AngularUI Router 概要【转】

标签：

通过AngularJS来创建SPA（single page application），要想让页面导航看起来跟一般Web页面一样的话，路由相当重要。AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块，相比AngularJS的标准路由ngRoute，它更灵活，基于state而不是URL在一个页面中加载多个View并保持View的层次，Nested States & Views以及Multiple & Named Views。UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。 

和ngRoute相比： 

• $route -> $state
• $routeParams -> $stateParams
• $routeProvider -> $stateProvider
• <div ng-view></div> -> <div ui-view></div>

（1）设置路由 
在.config()方式中使用$stateProvider（不是$routeProvider）： 

Js代码  

1. $stateProvider.state(‘state名‘, {设置信息});  

但是默认otherwise需要使用$urlRouterProvider来设置 

Js代码  

1. $urlRouterProvider.otherwise(‘/tab/home‘);  

例如： 

Js代码  

1. $stateProvider  
2.     .state("emp",{  
3.         url:"/emp"  
4.         ,templateUrl:"list.html"  
5.         ,controller:"ListCtrl"  
6.     })  
7.     .state("emp.detail",{  
8.         url:"/:empID"  
9.         ,templateUrl:"emp.html"  
10.         ,controller:"EmpCtrl"  
11.     });  

ngRoute的设置方法： 

Js代码  

1. $routeProvider.when(‘url‘, {设置信息});  

例如： 

Js代码  

1. $routeProvider  
2.     .when("/emp",{  
3.         templateUrl:"list.html"  
4.         ,controller:"ListCtrl"  
5.     })  
6.     .when("/emp/:empID"){  
7.         templateUrl:"emp.html"  
8.         ,controller:"EmpCtrl"  
9.     };  

（2）层次化 
state可以嵌套，通过state名中的点来划分层次。 
格式为：父View.子View 
比如：items.detail是items的子View。 

Js代码  

1. $stateProvider  
2.   .state("items", {  
3.     abstract: true,  
4.     url: "/items"  
5.     templateUrl: "items.html" // 必须包含<ui-view/>  
6.   })  
7.   .state("items.detail", {  
8.     url: "/detail", // URL就是"/items/detail"  
9.     templateUrl: "items-detail.html"  
10.   })  
11.   .state("items.info", {  
12.     url: "/info", // URL就是"/items/info"  
13.     templateUrl: "items-info.html"  
14.   });  

（3）指定View名 
<div ui-view="view1"></div> 
<div ui-view="view2"></div> 

Js代码  

1. .state("emp.detail"),{  
2.     url:"/:empID"  
3.     ,views:{  
4.         view1:{  
5.             templateUrl:"view1.html"  
6.             ,controller:"View1Ctrl"  
7.         }  
8.         ,view2:{  
9.             templateUrl:"view1.html"  
10.             ,controller:"View1Ctrl"  
11.         }  
12.     }  
13. }  

初始View 

Js代码  

1. .state("emp.detail"),{  
2.     url:"/:empID"  
3.     ,views:{  
4.         "":{  
5.             templateUrl:"emp.html"  
6.             ,controller:"EmpCtrl"  
7.         }  
8.     }  
9. }  

view@state 

Js代码  

1. .state("emp.detail.picture"),{  
2.     url:"/all"  
3.     ,views:{  
4.         "@emp":{  
5.             templateUrl:"picture.html"  
6.             ,controller:"PictureCtrl"  
7.         }  
8.     }  
9. }  

（4）设置 
url：默认相对路径（以^开头的是绝对路径） 
views：每个子视图可以包含自己的模板、控制器和预载入数据。 
abstract：抽象模板不能被激活 
template、templateUrl、templateProvider：HTML字符串或者返回HTML字符串的函数、HTML模板的路径或者返回HTML模板路径的函数、返回HTML字符串的函数 
controller、controllerProvider：指定任何已经被注册的控制器或者一个作为控制器的函数 
resolve：在路由到达前预载入一系列依赖或者数据，然后注入到控制器中。 
data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。 
onEnter/onExit：进入或者离开当前状态的视图时会调用这两个函数 

URL使用举例： 
url: ‘/inbox‘ 
url: ‘/inbox/:inboxId‘ 
url: ‘/inbox/{inboxId}‘ 
url: ‘/inbox/{inboxId:[0-9a-fA-F]{6}}‘ 
url: ‘/inbox/{inboxId:.*}‘ 
url: ‘/inbox?sort‘ 
url: ‘/inbox/:inboxId/messages/{sorted}?from&to‘ 
url: ‘/party/:partyID/:partyLocation‘ 
url: ‘/product/info/favorite?pid&jancode&showAddFavorite&fromPg‘ 

（5）页面跳转 
<a href="#/emp/hoge/1234">Go</a> 
<a ui-sref=".hoge({id:empID})">Go</a> 
$state.go(‘state名‘, {参数}); 

（6）事件 
state事件 

• $rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams){ ... })
• $rootScope.$on(‘$stateNotFound‘, function(event, unfoundState, fromState, fromParams){ ... })
• $rootScope.$on(‘$stateChangeSuccess‘, function(event, toState, toParams, fromState, fromParams){ ... })
• $rootScope.$on(‘$stateChangeError‘, function(event, toState, toParams, fromState, fromParams, error){ ... })

view事件 
View被加载但是DOM树构建之前时： 
$scope.$on(‘$viewContentLoading‘, function(event, viewConfig){ ... }); 
View被加载而且DOM树构建完成时： 
$scope.$on(‘$viewContentLoaded‘, function(event){ ... }); 

参考： 
https://github.com/angular-ui/ui-router 
https://docs.angularjs.org/api/ngRoute 
http://angular-ui.github.io/ui-router/sample/ 
http://scotch.io/tutorials/javascript/angular-routing-using-ui-router 
http://blog.eisneim.com/articles/dive_deep_into_ui-router.html

AngularUI Router 概要【转】

标签：

原文地址：http://www.cnblogs.com/yangzhx/p/4315451.html