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的应用，真的就不难了。
例子
AngularJS 本身就涉及到了WEB开发理念中的MVC，即模型 视图 控制器
而在PHP开发中已经有一套MVC的模型，难免有些晕
此段代码主要功能：根据URL动态参数变化，动态替换AngularJS所指定的模板
http://域名/index.html#/role/edit/2 指向 http://域名/role/edit?id=2
http://域名/index.html#/role/edit/3 指向 http://域名/role/edit?id=3
参数详解：
url: 是匹配的url规则
templateUrl: 是指定模板，此参数可以
上代码：
| 代码如下 | 复制代码 |
| // 编辑角色 |
url 后面增加了js随机数 防止缓存 Math.random()
好了，我们再看一个项目布局的例子
目录
. 路由的代码实现
理论不多说了，直接上代码！！ 还是基于我们之前用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)
| 代码如下 | 复制代码 |
| <!doctype html> <div ng-view></div> <script src="bower_components/angular/angular.js"></script> |
2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。
| 代码如下 | 复制代码 |
| <hr/> <ul> |
3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号,(ID的文章内容)
<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。
| 代码如下 | 复制代码 |
| var routeApp = angular.module('routeApp',[]); 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; }); |
分别对应该路由中的两个控制器声明。
程序写好，我们打开浏览器看效果。
3. 实现效果截图
别忘了用下面命令，启动程序。
grunt server
浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list,“#/list”是被redirectTo转向的结果。
点击ID2的链接。
页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。
我们再浏览地址栏中，输入212
http://localhost:9000/demo-route.html#/list/212
观察chrome的开发工具的监控中，没有任何的networking操作。
在浏览地址栏中，再输入原来list的地址
http://localhost:9000/demo-route.html#/list
观察chrome的开发工具的监控，确认没有任何变化！！
从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。
