【转】AngularJS路由和模板

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] view plaincopy

1. <!DOCTYPE html>
2. <html ng-app="routeApp">
3. <head>
4. <title>route</title>
5. <script src="lib/angular/angular.min.js"></script>
6. <!--需要额外引入angular-route.min.js-->
7. <script src="lib/angular/angular-route.min.js"></script>
8. <script src="scripts/app.js"></script>
9. <script src="scripts/controllers/main.js"></script>
10. </head>
11. <body >
12. <h1>Route Demo index</h1>
13. <div ng-view></div>
14. </body>
15. </html>

2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。

[html] view plaincopy

1. <hr/>
2. <h3>Route : List.html</h3>
3. <ul>
4. <li ng-repeat="id in [1, 2, 3 ]">
5. <a href="#/list/{{ id }}"> ID{{ id }}</a>
6. </li>
7. </ul>

3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)

[html] view plaincopy

1. <hr/>
2. <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。

[javascript] view plaincopy

1. var routeApp = angular.module(‘routeApp‘,[‘ngRoute‘]);
2. routeApp.config([‘$routeProvider‘,function ($routeProvider) {
3. $routeProvider
4. .when(‘/list‘, {
5. templateUrl: ‘views/route/list.html‘,
6. controller: ‘RouteListCtl‘
7. })
8. .when(‘/list/:id‘, {
9. templateUrl: ‘views/route/detail.html‘,
10. controller: ‘RouteDetailCtl‘
11. })
12. .otherwise({
13. redirectTo: ‘/list‘
14. });
15. }]);

在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。

[javascript] view plaincopy

1. routeApp.controller(‘RouteListCtl‘,function($scope) {
2. });
3. routeApp.controller(‘RouteDetailCtl‘,function($scope, $routeParams) {
4. $scope.id = $routeParams.id;
5. });

分别对应该路由中的两个控制器声明。

from : http://blog.csdn.net/violet_day/article/details/16974467