AngularJs是單頁(yè)面應用框架，因此如何從一個(gè)視圖跳轉到另外一個(gè)視圖是至關(guān)重要的。隨著(zhù)應用的擴大，我們希望有專(zhuān)門(mén)的視圖管理功能。AngularJs有專(zhuān)門(mén)的路由模塊ngRoute來(lái)提供視圖的切換，將路由、視圖和控制器很好的對應了起來(lái)。 簡(jiǎn)單的說(shuō)，ngRoute模塊中的$route服務(wù)會(huì )監測$location.url()的變化，并將它映射到預先定義的視圖和控制器。
從1.2開(kāi)始AngularJs的路由模塊已經(jīng)獨立出來(lái)成為了一個(gè)單獨的模塊，所以我們需要先安裝它。在官網(wǎng)下載angular-route.js存放至項目的js文件夾下，然后在index.html中進(jìn)行引用。記住要放在angular.js后面。
<script src="js/angular.js"></script><script src="js/angular-route.js"></script>
<!DOCTYPE html><html ><head> <title>index</title> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script src="js/controllers.js"></script> <script src="js/app.js"></script></head><body ng-app="app"><div ng-view></div></body></html>
然后我們有兩個(gè)視圖頁(yè)面，分別是page1.html和page2.html，內容很簡(jiǎn)單，他們分別綁定了一個(gè)content變量，其中page1視圖還有一個(gè)按鈕，點(diǎn)擊后可以跳轉到page2頁(yè)面。
//page1.html<div> {{content}} <br> <input type="button" value="Go to page2" ng-click="direct()"/></div>
//page2.html<div> {{content}}</div>
ngRoute模塊有$routeProvider對象，在應用配置階段通過(guò)它進(jìn)行路由的配置，將路由、視圖和控制器一一對應起來(lái)。創(chuàng )建app.js文件，在里面創(chuàng )建"app"模塊，記住需要添加ngRoute模塊依賴(lài)。我們將控制器放在了controller.js文件中的controllers模塊里面，所以這里還需要添加控制器依賴(lài)。
angular.module("app", [ "ngRoute", "controllers"]).config(["$routeProvider", function($routeProvider) { $routeProvider .when("/index", { templateUrl: "views/page1.html", controller: "Page1Controller" }) .when("/child", { templateUrl: "views/page2.html", controller: "Page2Controller" }) .otherwise({ redirectTo: "/index" });}])$routeProvider通過(guò)when（）和otherwise（）兩個(gè)方法進(jìn)行路由配置。when()方法第一個(gè)參數是路由，名字由自己指定。第二個(gè)參數是映射對象，最重要的映射屬性有視圖的url和對應的控制器。otherwise（）參數是映射對象，redirectTo屬性指定無(wú)法匹配時(shí)跳轉的路由。有關(guān)$routeProvider的詳細信息請參考：http://www.cnblogs.com/koukabatsugun/p/3445072.html。
至此路由配置就完成了?，F在我們來(lái)實(shí)現相應的控制器，創(chuàng )建controllers.js文件。
angular.module("controllers", []) .controller("Page1Controller", ["$scope", "$location", function($scope, $location) { $scope.content = "This is page 1"; $scope.direct = function(){//跳轉到page2 $location.path('/child'); } }]) .controller("Page2Controller", ["$scope", "$location", function($scope, $location) { $scope.content = 'This is page 2'; }]);在direct函數中我們通過(guò)$location.path()將路由改為'/child'從而跳轉到了page2.html頁(yè)面。$location是ngRoute模塊中的一個(gè)服務(wù)，通過(guò)它可以獲取和設置瀏覽器地址欄中的url。$location包含url()、path()、replace()、search()等方法和$locationChangeSuccess等事件。具體內容請參考下面鏈接：http://docs.angularjs.cn/api/ng/service/$location。
除了$location，ngRoute模塊還有$routeParams服務(wù)，它可以讓你獲取當前路由的參數(它實(shí)際上是$location.search()和path()的結合體)。例如：
// 假設:// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby// Route: /Chapter/:chapterId/Section/:sectionId//// 那么:$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}//配置路由參數 .when("/child/:content", { templateUrl: "views/page2.html", controller: "Page2Controller"})
//跳轉$location.path('/child/someThing');//獲取參數$scope.content = $routeParams.content;//content="someThing"
有關(guān)$routeParams詳細信息請查看下面鏈接：http://docs.angularjs.cn/api/ngRoute/service/$routeParams
最后將完整的demo傳上來(lái)：http://download.csdn.net/detail/gameloft9/9470605，請在webstorm中打開(kāi)。聯(lián)系客服
