Angular路由：ui-router
阿新 • • 發佈：2019-01-05
ui-router是AngularJs的一個客戶端路由框架。AngularJs ngRoute模組中的路由是通過URL路由來管理檢視的，ui-router則是通過狀態(state)來管理檢視，並且可以繫結路由和其它的行為。狀態被繫結到命名、巢狀和並行檢視，大大增強了檢視管理的能力。
傳統的路由ngRoute有以下缺點：
傳統的路由ngRoute有以下缺點：
- 檢視不能巢狀。
- 單個頁面下不支援多個檢視。
- 無法通過url進入到指定頁面，必須通過路由進入。
安裝ui-router
ui-router同ngRoute一樣也是一個單獨的模組，需要下載安裝。可以去GitHub上下載：https://github.com/angular-ui/ui-router/tree/legacy。我是下載的release版本，直接將其儲存至angular-ui-router.js檔案中。然後在index.html頁面中進行引用，記住要放在angular.js後面。<script src="js/angular.js"></script> <script src="js/angular-ui-router.js"></script>
新增模組依賴
在使用ui-router的模組中新增ui-router依賴，這樣才能使用。angular.module("app", [ "ui.router"//新增ui-router模組依賴 ]).config(["$stateProvider","$urlRouteProvider", function($stateProvider,$urlRouteProvider) { //在這裡配置狀態 }])
頁面佈局
1、巢狀的狀態和檢視
ui-router主要的用途就是用在巢狀的狀態和檢視中。首先需要在index.html頁面中的body使用ui-view指令，它同ng-view類似都是為檢視進行佔位。關於ui-view指令具體請檢視：ui-view指令詳解，ui-sref是<a>標籤專用的狀態的連線指令，將a標籤連線到某個狀態。這樣點選<a>標籤的時候，就會自動跳轉到相應的狀態。關於ui-sref指令具體請檢視：ui-sref指令詳解。
<body ng-app="app"> <div ui-view></div>然後為狀態"state1","state2"分別新增關聯的檢視page1.html和page2.html，並在檢視中再一次使用了ui-view和ui-sref指令巢狀狀態和檢視。其實這個和在index.html新增ui-view是一樣的操作，但我們成功的進行了狀態和檢視的巢狀。<!-- 在這裡新增導航 --> <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> </body>
//page1.html <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
//page2.html <h1>State 2</h1> <hr/> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
//page1Child.html <h3>List of State 1 Items</h3> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul>
//page2Child.html<h3>List of State 2 Things</h3><ul> <li ng-repeat="thing in things">{{ thing }}</li></ul>
狀態配置
建立app.js檔案，加入下面的程式碼，並在index.html中進行引用。在應用模組中我們通過$stateProvider和$urlRouterProvider對狀態和路由進行配置。將狀態，路由，檢視和控制器很好的對應了起來。
//app.js angular.module("app", [ "ui.router",//新增ui-router模組依賴 "controllers"//控制器模組 ]).config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider) { //在這裡配置狀態 $stateProvider .state('state1', { url: "/state1", templateUrl: "views/page1.html" }) .state('state1.list', { url: "/list", templateUrl: "views/page1Child.html", controller: "page1ChildController" }) .state('state2', { url: "/state2", templateUrl: "views/page2.html" }) .state('state2.list', { url: "/list", templateUrl: "views/page2Child.html", controller: "page2ChildController" }); // 將未匹配的url重定向到state1狀態中。 $urlRouterProvider.otherwise("/state1"); }])$stateProvdier和$urlRouterProvider是ui-router模組的兩個服務，專門進行狀態和路由配置。$stateProvider.state()方法進行狀態配置，第一個引數是狀態的名字，第二個引數是配置物件，重要的屬性有url：路由名稱，由自己命名，templateUrl：檢視路徑，controller：對應的控制器名稱。具體請參考：$stateProvider詳解。$rulRouterProvider類似於ngRoute的$routeProvider對
$location.url()進行監視，發現變化後就匹配路由。具體請參考：$urlRouterProvider詳解。
新增控制器
為了便於擴充套件，我們將控制器放入單獨的模組中。建立controllers.js檔案，加入下面的程式碼。然後在app.js中引用控制器模組。
angular.module("controllers", []) .controller("Page1Controller", ["$scope",function($scope) { }]) .controller("Page2Controller", ["$scope", function($scope) { }]) .controller("page1ChildController", ["$scope", function($scope) { $scope.listItems = ["Tom", "Jack", "GAMELoft9"]; }]) .controller("page2ChildController", ["$scope", function($scope) { $scope.ListThings = ["robot", "cat", "icecream"]; }]);
這樣一個完整的巢狀檢視路由就完成了。效果如下圖所示：
完整的demo在：http://download.csdn.net/detail/gameloft9/9471247
2、多檢視和命名檢視
多檢視和命名檢視下面這篇文章已經講的很好了，這裡給出連結：http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/。