Angularjs路由.让人激动的技术.真给前端长脸了.

先看文件的摆放

不废话,直接上代码.

detail.html:

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

list.html:

1 <hr>
2         <h1>List.html</h1>
3         <h2>{{myName}}</h2>
4         <ul>
5             <li ng-repeat="id in [1,2,3]">
6                 <a href="#/list/{{id}}">链接{{id}}</a>
7             </li>
8         </ul>

demo-route.html

 1 <!DOCTYPE html>
 2 <html ng-app="routeModule">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript" src="../js/angular1.4.3.js"></script>
 7     <script type="text/javascript" src="../js/angular-route.js"></script>
 8   </head>
 9 <body>
10     <h1>Angular的路由案例</h1>
11     <div ng-view></div>
12 <script>
13     var routeApp = angular.module('routeModule',['ngRoute']);
14     routeApp.config(['$routeProvider',function ($routeProvider) {
15         $routeProvider
16                 .when('/list', {
17                     templateUrl: 'views/route/list.html',
18                     controller: 'ListRouteController'
19                 })
20                 .when('/list/:id', {
21                     templateUrl: 'views/route/detail.html',
22                     controller: 'DetailRouteController'
23                 })
24                 .otherwise({
25                     redirectTo: '/list'
26                 });
27     }]);
28 
29     routeApp.controller('ListRouteController',function($scope) {
30         $scope.myName="思思博士";
31     });
32     routeApp.controller('DetailRouteController',function($scope, $routeParams) {
33         $scope.id = $routeParams.id;
34     });
35 </script>
36 </body>
37 </html>

注意看我引入的js版本.现在的route模块从angular中提取出来了.所以需要单独引用.

单击链接或修改id好,就能看到神奇的效果了.