一、什么是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都始终保持不变