ng-route路由詳解

一個網頁是通過布局展示在我們眼前,一個應用是由一組不同的頁面形成,在這些頁面中會有一些頭部,尾部并不是隨著頁面變化面發(fā)生變化的, angularJS中的一個模塊就是為了實現這樣的功能的,首行在頁面中引入ng-route

    <script src="js/angular-1.5.8/angular.js"></script>
    <script src="js/angular-1.5.8/angular-route.js"></script>

要創(chuàng)建一個布局模板,需要修改html以告訴angularJS把模板渲染到何處,這時就是需要用ng-view指令來配合,它與路由組合到一起,我們就可以指定當前路由所對應的模板在DOM中的渲染位置

<div ng-view></div>

這個相當 于一個切入點,也就是說配合路由,帶有ng-view標識的DOM元素這里就是配合路由要渲染的頁面。
常見的路由配置代碼:

angular.module('MyApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
.otherwise({redirectTo: '/'});
}]);

when() 方法用于配置路由的基本參數,一個路徑字符串,和一個配置參數對象 ,otherwise()方法可以理解成default,也就是沒有路由請求或是請求的路由不存在時,應該指向的位置

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容