在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。
乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。
例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。
而要做到上面介绍的功能就必须使用路由功能了。
主体思路：
1. 后台设立多个独立的模块
2. 建立一个路由控制模块
3. 根据需要通过路由提取需要模块加载到主页上
4. 加载的同时，将其他模块隐藏。
那么，路由模块的建立需要多少功夫呢？其实意外地简单：
首先，主页面上，写上对应的代码：
<ng-view></ng-view>这个代表路由区域和视图区域，只有写了这个标签才会触发路由事件：
<html lang="en" ng-app="myTodo"><head> <meta charset="utf-8"> <title>angularjs • TodoMVC</title> <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> <style> .pagination { overflow: hidden; padding: 20px; } .pagination ul li { width: 60px; height: 30px; line-height: 30px; border:1px solid black; float: left; list-style-type: none; margin-right: 10px; text-align: center; } </style> </head> <body> <ng-view></ng-view> <!-- 路由区域，视图区域--> <footer id="info"> <p>Double-click to edit a todo</p> <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-route/angular-route.js"></script> <script src="js/app.js"></script> </body></html>其他的东西都是装饰，只要看第24行就可以了。
在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。
接下来请看对应的app.js。
var app = angular.module("myTodo", ['ngRoute']);//路由的配置：app.config(function($routeProvider) { var routeconfig = { templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ } var ohter_config = { templateUrl: "other.html" } $routeProvider. when("",routeconfig). //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" });});app.controller("myTodoCtrl", function($scope, $routeParams, $filter){ console.log($routeParams); });
新闻热点
疑难解答
图片精选
