在一個單頁面中，我們可以添加多個模塊，使得網頁只在需要的時候加載這個模塊。模塊的切換大致上可以代替網頁的切換，于是，我們便可以通過模塊的切換實現網頁的切換，這個切換是按需加載的。
乍一看非常普通的東西，但是仔細想想就可以發現，這種思想可以解決非常多的資源。
例如，假如有一個頁面，需要顯示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 >Sindre Sorhus</a></p> <p>Part of <a >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-mark2/index.html#/complete
【尤其注意的一點：除了2會跳出這個頁面，其他的跳轉是顯示在規定的視圖區和路由區上面的，body網頁上的內容會被加載過來?！?/p>
接下來我們講解原理：
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的原因。第二個參數是為這個模板添加控制器，名字是――myTodoCtrl。
第二個跳轉因為不重要所以pass。
$routeProvider. when("",routeconfig). //status ： 它對應我們頁面的hash: all completed active //路由規則的優先級按寫法的順序所決定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" });});這一段代碼是用來進行判斷的，當哈希值發生改變的時候，執行對應的跳轉對象。
當哈希值為""即第二句，為空的時候，執行routeconfig
當哈希值為"/other",即第五局，執行other_config
當哈希值是一個特殊變量的時候，變量的名稱為aaa，值為X（X可以是定義好的任何指，這里是all，complete，active中其中一個），即"/active","/complete","/all"的時候，執行routeconfig。
當哈希值是其他情況的時候，默認跳轉到哈希值為"/all"上。
我們得到了哈希值，執行了后面的對象，取出對象的模板，添加在了主頁上面，啟動了控制器，整個路由便算完成了。
以上就是小編為大家帶來的angular.js之路由的選擇方法的全部內容了，希望對大家有所幫助，多多支持武林網~
新聞熱點
疑難解答
