如何路由頁面使用ui路由器角js

如何避免ui路由器中的URL＃符號我可以刪除$urlRouterProvider.otherwise('/');它將所有a href="#"重定向到索引頁。請幫助。請提前感謝我的代碼這裏。如何路由頁面使用ui路由器角js

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', 

      } 
     } 
    }); 



});

來源

2016-12-07 Rahul K R

您應該能夠使用位置提供商提供的HTML5模式。

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

來源

2016-12-07 05:14:11 IamYaman

這種情況發生在angular使用兼容模式進行路由時。這有助於在較舊的瀏覽器中工作，但帶有價格。 Angular內部使用URL哈希來修改路由，因此您可以在URL中看到它。

如果您想刪除哈希，並且確定您的代碼將始終運行在兼容HTML5的瀏覽器上，那麼可以使用該方法，如@IamYaman在答案中所述。

HTML5方法使用歷史推送API來更改瀏覽器的URL。這就是爲什麼網頁不刷新。

此外，不要忘記在HTML的head部分中設置基本標記爲<base href="/">。你可以在this guide瞭解更多。

來源

2016-12-07 05:22:06 31piy

當我寫 '<基本href = 「/」>' 的頭部section.It沒有加載其它CSS，JS文件。 –

嘗試此

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

來源

2016-12-07 05:24:05 Sujithrao

當我刪除'$ urlRouterProvider.otherwise（'/'）;' 。路由不起作用 –

你是否在控制檯中發現錯誤？ – Sujithrao

對不起，它的工作，謝謝。那是一個緩存問題 –

如何路由頁面使用ui路由器角js

回答

相關問題