angular.js之路由的选择

　　　　在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。

　　　　乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。

　　　　例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。

　　　　而要做到上面介绍的功能就必须使用路由功能了。

主体思路：

1. 后台设立多个独立的模块

2. 建立一个路由控制模块

3. 根据需要通过路由提取需要模块加载到主页上

4. 加载的同时，将其他模块隐藏。

那么，路由模块的建立需要多少功夫呢？其实意外地简单：

首先，主页面上，写上对应的代码：

<ng-view></ng-view>这个代表路由区域和视图区域，只有写了这个标签才会触发路由事件：

 1 <html lang="en" ng-app="myTodo"><head>
 2         <meta charset="utf-8">
 3         <title>angularjs • TodoMVC</title>
 4         <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
 5         <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
 6         <style>
 7             .pagination {
 8                 overflow: hidden;
 9                 padding: 20px;
10             }
11             .pagination ul li {
12                 width: 60px;
13                 height: 30px;
14                 line-height: 30px;
15                 border:1px solid black;
16                 float: left;
17                 list-style-type: none;
18                 margin-right: 10px;
19                 text-align: center;
20             }
21         </style>
22     </head>
23     <body>
24         <ng-view></ng-view> <!-- 路由区域，视图区域-->
25         <footer id="info">
26             <p>Double-click to edit a todo</p>
27             <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
28             <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
29         </footer>
30         
31         <script src="node_modules/angular/angular.js"></script>
32         <script src="node_modules/angular-route/angular-route.js"></script>
33         <script src="js/app.js"></script>
34     
35 
36 </body>
37 </html>

其他的东西都是装饰，只要看第24行就可以了。

在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。

接下来请看对应的app.js。

 1 var app = angular.module("myTodo", ['ngRoute']);
 2 //路由的配置：
 3 app.config(function($routeProvider) {
 4   var routeconfig = {
 5         templateUrl: "body.html",
 6         controller: "myTodoCtrl"
 7         /*controller: 'myTodoCtrl'*/
 8     }
 9 
10     var ohter_config = {
11         templateUrl: "other.html"
12     }
13 
14     $routeProvider.
15       when("",routeconfig).
16       //status ： 它对应我们页面的hash: all completed active
17       //路由规则的优先级按写法的顺序所决定的
18       when("/other", ohter_config).
19       when("/:aaa", routeconfig ).
20       otherwise( { redirectTo: "/all" });
21 });
22 app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
23         console.log($routeParams);
24     
25 });

如果仅仅使用路由的话，以上的代码就足够使用了。它会保证;

1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到

/all
上面，网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。

2. 当页面跳转方向是/other的时候，跳转到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
上

3. 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转——

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

【尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。】

接下来我们讲解原理：

app.config(function($routeProvider)

这便是用来设定路由的代码，直接写就好

1 var routeconfig = {
2         templateUrl: "body.html",
3         controller: "myTodoCtrl"
4         /*controller: 'myTodoCtrl'*/
5     }
6 
7     var ohter_config = {
8         templateUrl: "other.html"
9     }

这是两个跳转，跳转是一个对象，templateUrl，即模板是body.html，这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。

第二个跳转因为不重要所以pass。

1 $routeProvider.
2       when("",routeconfig).
3       //status ： 它对应我们页面的hash: all completed active
4       //路由规则的优先级按写法的顺序所决定的
5       when("/other", ohter_config).
6       when("/:aaa", routeconfig ).
7       otherwise( { redirectTo: "/all" });
8 });

这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。

当哈希值为""即第二句，为空的时候，执行routeconfig

当哈希值为"/other",即第五局，执行other_config

当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。

当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。

我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。

angular.js之路由的选择

相关推荐