一、什么是routing（路由）
Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page（設置頁面不同於控制頁面，登錄頁面不同於賬號信息頁面。。。。就是說一個應用很多功能不同的頁面）
我們可以使用Angular簡單優雅地實現這個功能（頁面之間的控制跳轉...）
二、安裝
使用angular的路由功能需要安裝routing模塊...（引入angular-route.js就可以了）
三、定義
定義路由非常容易，在我們的應用mian模塊里面注入ngRoute依賴就可以了
|
1
2
|
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {});
|
現在，我們就可以給應用定義路由了。在路由模塊里面的.config()方法里面注入了$routeProvider，上面的代碼給我們演示了兩個用於定義路由的方法。
when()
when()方法有兩個參數，我們希望匹配的瀏覽器url和路由操作對象。一般main route經常使用“/”來表示，也可以定義URL參數，在controller里面就使用$routeParams獲取url參數。
-
templateUrl: 表示路由跳轉的view模板
-
controller: 控制器
|
1
2
3
4
5
6
7
8
9
10
11
|
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {
$routeProvider
.when(
'/'
, {
templateUrl:
'views/main.html'
,
controller:
'MainCtrl'
})
.when(
'/day/:id'
, {
templateUrl:
'views/day.html'
,
controller:
'DayCtrl'
})
|
otherwise()
otherwise()定義了當應用找不到指定路由的時候跳轉的路由
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {
$routeProvider
.when(
'/'
, {
templateUrl:
'views/main.html'
,
controller:
'MainCtrl'
})
.when(
'/day/:id'
, {
templateUrl:
'views/day.html'
,
controller:
'DayCtrl'
})
.otherwise({
redirectTo:
'/'
});
})
|
四、使用
定義好了路由需要怎么使用呢?我們要告訴angular頁面的哪一個部分是我們希望轉換的，這需要使用到ng-view指令
|
1
2
3
|
<
div
class
=
"header"
>My page</
div
>
<
div
ng-view></
div
>
<
span
class
=
"footer"
>A footer</
span
>
|
這樣就只有<div ng-view></div>會被更新， header/footer都始終保持不變