在一個單一頁面中，我們可以新增多個模組，使得網頁只在需要的時候載入這個模組。模組的切換大致上可以取代網頁的切換，於是，我們便可以透過模組的切換實現網頁的切換，這個切換是按需載入的。
乍看之下非常普通的東西，但是仔細想想就可以發現，這種思想可以解決非常多的資源。
例如，假如有一個頁面，需要顯示1000種商品的信息，每個商品的表現形式各不相同（設他們有各自獨立的css和js），那麼一般來說，我們就需要準備1000張網頁去載入這些資訊。但是，使用這種模組化思想，我們就可以僅在後台設定1000個各不相同的模組，然後根據需要將需要的商品的對應模組加載到唯一一張頁面上而已。
而要做到上面介紹的功能就必須使用路由功能了。
主體思路：
1. 後台設立多個獨立的模組
2. 建立一個路由控制模組
3. 根據需要透過路由提取需要模組載入到主頁上
4. 載入的同時，將其他模組隱藏。
那麼，路由模組的建立需要多少功夫呢？其實意外地簡單：
首先，主頁上，寫上對應的程式碼：
這個代表路由區域和視圖區域，只有寫了這個標籤才會觸發路由事件：
<html 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);
});登入後複製
如果只使用路由的話，以上的程式碼就夠使用了。它會保證;
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-32/index.html #/complete
【尤其註意的一點：除了2會跳出這個頁面，其他的跳轉是顯示在規定的視圖區和路由區上面的，body網頁上的內容會被加載過來。 】
接下來我們講解原理：
app.config(function($routeProvider)
這便是用來設定路由的程式碼，直接寫就好
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}登入後複製
這是兩個跳轉，跳躍是一個對象，templateUrl，即模板是body.html，這就是為什麼index.html會載入body.html的原因。轉因為不重要所以pass。為空的時候，執行routeconfig
當雜湊值為"/other",即第五局，執行other_config
當雜湊值是特殊變數的時候，變數的名稱為aaa，值為X（X可以是定義好的任何指，這裡是all，complete，active中其中一個），即"/active","/complete","/all"的時候，執行routeconfig。的時候，預設跳到哈希值為"/all"。便算完成了。路由的選擇方法相關文章請關注PHP中文網！
