24.路由

转自：https://www.cnblogs.com/best/tag/Angular/

单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源，区分不同的功能模块。
路由并非在angularjs核心文件内，你需要另外加入一段脚本 “angular-route.min.js”需要注意的是在创建 “app” 对象是需要填写对 ngRoute 依赖

示例代码：

routeTest.html 单页程序的首页

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title>路由展示</title>
 7         <style>
 8             a {
 9                 color: #333;
10                 text-decoration: none;
11             }
12             
13             a:hover {
14                 color: orangered;
15             }
16         </style>
17     </head>
18 
19     <body>
20         <p>
21             <a href="#/">返回列表</a>
22             <a href="#/t1">当前时间</a>
23             <hr />
24         </p>
25         <div ng-view></div>
26         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
27         <script src="js/angular146/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
28         <script id="t1" type="text/ng-template">
29             当前时间是：{{currentDate}}
30         </script>
31         <script type="text/javascript">
32             var app = angular.module("app", ['ngRoute']);
33             app.config(function($routeProvider) {
34                 $routeProvider.when('/', {
35                     controller: 'listController',
36                     templateUrl: 'list.html'
37                 });
38                 $routeProvider.when('/t1', {
39                     controller: 't1Controller',
40                     templateUrl: 't1'
41                 });
42                 $routeProvider.when('/detail/:id', {
43                     controller: 'detailController',
44                     templateUrl: 'detail.html'
45                 });
46                 $routeProvider.otherwise({
47                     redirectTo: '/'
48                 });
49             });
50             app.service("dataService", function() {
51                 this.list = [{
52                     id: 1,
53                     title: '谷歌',
54                     url: 'http://www.google.com'
55                 }, {
56                     id: 2,
57                     title: '百度',
58                     url: 'http://www.baidu.com'
59                 }, {
60                     id: 3,
61                     title: '必应',
62                     url: 'http://www.bing.com'
63                 }, {
64                     id: 4,
65                     title: '搜狗',
66                     url: 'http://www.sogou.com'
67                 }, {
68                     id: 5,
69                     title: '雅虎',
70                     url: 'http://www.yahoo.cn'
71                 }];
72                 this.getEntity = function(id) {
73                     var result = null;
74                     angular.forEach(this.list, function(obj, index) {
75                         if(obj.id == id) {
76                             result = obj;
77                         }
78                     });
79                     return result;
80                 }
81             });
82             app.controller("listController", function($scope, dataService) {
83                 
84                 $scope.items = dataService.list;
85             });
86             app.controller("detailController", function($scope, dataService, $routeParams) {
87                 
88                 $scope.obj = dataService.getEntity($routeParams.id);
89             });
90             app.controller("t1Controller", function($scope) {
91                 $scope.currentDate = new Date().toLocaleString();
92             });
93         </script>
94     </body>
95 
96 </html>

列表页 list.html

<ul ng-repeat="item in items">
<li>
<a href="#/detail/{{item.id}}">{{item.title}}</a>
</li>
</ul>

详细页 detail.html：

 1 <fieldset>
 2     <legend>详细信息</legend>
 3     <p>
 4         编号：{{obj.id}}
 5     </p>
 6     <p>
 7         名称：{{obj.title}}
 8     </p>
 9     <p>
10         网址： <a href="{{obj.url}}">{{obj.url}}</a>
11     </p>
12 </fieldset>

运行结果：