角度jsでui-routerを使用してページをルーティングするには

Question

ui-routerのURLから＃記号を避ける方法をすべてリダイレクトすることができます。ご参考までにマイコードここに。

routerApp.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('/', { 
     url: '/', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/landingpageheader.html' 
      }, 

      'main': { 
       templateUrl: 'partials/landingpage.html', 

      } 
     } 
    }) 
    .state('home', { 
     url: '/home', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header_top.html', 
       controller: 'GoogleSearchCtrl' 
      }, 

      'main': { 
       templateUrl: 'partials/homepage.html', 
       controller: 'HomePageCtrl' 
      } 
     } 
    }) 
    .state('chefprofile', { 
     url: '/chefprofile/:chef&:itemdate', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header_top.html' 
      }, 

      'main': { 
       templateUrl: 'partials/chefprofile.html', 
       controller: 'ChefCtrl' 
      } 
     } 
    }) 
    .state('aboutus', { 
     url: '/aboutus', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header2.html' 
      }, 

      'main': { 
       templateUrl: 'partials/about_us.html', 

      } 
     } 
    }) 
    .state('register', { 
     url: '/register', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header3.html' 
      }, 

      'main': { 
       templateUrl: 'partials/register.html', 

      } 
     } 
    }) 
    .state('delivery', { 
     url: '/delivery_register', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header3.html' 
      }, 

      'main': { 
       templateUrl: 'partials/dlvry_register.html', 

      } 
     } 
    }) 
    .state('myaccount', { 
     url: '/myaccount', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/header3.html' 
      }, 

      'main': { 
       templateUrl: 'partials/my_account.html', 

      } 
     } 
    }) 
    .state('faq', { 
     url: '/FAQ', 
     views: { 
      'headertop': { 
       templateUrl: 'partials/headerfaq.html' 
      }, 

      'main': { 
       templateUrl: 'partials/faq.html', 

      } 
     } 
    }); 



}); 

Answer 1

ロケーションプロバイダからHTML5モードを使用できるはずです。

 app.config(["$locationProvider", 
      function($locationProvider) { 
       $locationProvider.html5Mode(true); 
     }]); 

Answer 2

これは、角度がルーティングの互換モードを使用する場合に発生します。これは古いブラウザでのルーティングを助けますが、価格が付いています。 Angularは内部でURLハッシュを使用して経路を変更しているため、URLでこれを見ることができます。

ハッシュを削除し、コードが常にHTML5互換のブラウザで実行されることが確実であれば、その答えに@IamYamanが記述した方法を使用できます。

HTML5メソッドは、履歴プッシュAPIを使用してブラウザのURLを変更します。そのため、ページはリフレッシュされません。

また、HTMLのheadセクションにベースタグを<base href="/">と設定することを忘れないでください。 this guideで詳細を読むことができます。

Answer 3

私はsection.Itが他のCSS、JSファイルをロードしませんでした頭の中で '<ベースHREF = "/">' を書いたときに、この

angular.module('yourapp', [ 
    'ui.router' 
]) 
.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $locationProvider.html5Mode(true); 
    });