Angular路由的定义和使用
原文链接：http://www.ng-newsletter.com/advent2013/#!/day/2
一、什么是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都始终保持不变
