1. AngularJS路由介紹

AngularJS路由功能是一個純前端的解決方案，與我們熟悉的后臺路由不太一樣。后臺路由，通過不同的URL會路由到不同的控制器上(controller)，再渲染(render)到頁面(HTML)。AngularJS的前端路由，需求提前對指定的(ng-app)，定義路由規則(routeProvider)，然后通過不同的URL，告訴(ng-app)加載哪個頁面(HTML)，再渲染到(ng-app)視圖(ng-view)中。

AngularJS的前端路由，雖然URL輸入不一樣，頁面展示不一樣，其實完成的單頁(ng-app)視圖(ng-view)的局部刷新。這樣來看，AngularJS做單頁應用就有點標配的感覺了。

從這個角度想想，要實現一個gmail的應用，真的就不難了。

2. 路由的代碼實現

理論不多說了，直接上代碼！！ 還是基于我們之前用yeoman構建的項目。

業務場景：論壇功能，帖子列表頁(list.html) 和 帖子內容頁(detail.html)。

代碼文件：

1. 增加：app/demo-route.html

2. 增加：app/views/route/list.html

3. 增加：app/views/route/detail.html

4. 修改: app/scripts/app.js

5. 修改: app/scripts/controllers/main.js

1). 增加：app/demo-route.html

這個文件是主頁面(ng-app)，包含視圖(ng-view)

html>

route

Route?Demo?index

2). 增加：app/views/route/list.html

這個頁面是布局模板，是HTML的代碼片段。包括了一組ID的列表，通過ID列表的鏈接，可以進入到ID的詳細頁面。

---

Route?:?List.html

• ?ID{{?id?}}

3). 增加：app/views/route/detail.html

這個頁面是布局模板，是HTML的代碼片段。通過ID訪問，包含ID號, (ID的文章內容)

---

Route?{{id}}:?detail.html?

4). 修改: app/scripts/app.js

這個是ng-app文件的定義，我們在demo-route.html中定義了routeApp，在這里需要聲明。

var?routeApp?=?angular.module('routeApp',['ngRoute']);

routeApp.config(['$routeProvider',function?($routeProvider)?{

$routeProvider

.when('/list',?{

templateUrl:?'views/route/list.html',

controller:?'RouteListCtl'

})

.when('/list/:id',?{

templateUrl:?'views/route/detail.html',

controller:?'RouteDetailCtl'

})

.otherwise({

redirectTo:?'/list'

});

}]);

在routeApp模塊中，我們定義了路由和布局模板。routeApp的默認URL是/list，即http://localhost:9000/demo-route.html#/list。 跳轉詳細頁的路由是/list/:id，id為參數。

同時，/list的布局模板是views/route/list.html，屬于RouteListCtl的控制器管理空間。

5). 修改: app/scripts/controllers/main.js

這個文件定義控制器controller。

routeApp.controller('RouteListCtl',function($scope)?{

});

routeApp.controller('RouteDetailCtl',function($scope,?$routeParams)?{

$scope.id?=?$routeParams.id;

});分別對應該路由中的兩個控制器聲明。

總結

以上是生活随笔為你收集整理的angularjsl路由_AngularJS路由和模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。