ui-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
  • ->

(1)设置路由
在.config()方法中使用$stateProvider(不是$routeProvider)来配置应用或者模块的state:
Js代码   收藏代码
  1. $stateProvider.state('state名', {设置信息});  


但是默认otherwise需要使用$urlRouterProvider来设置
Js代码   收藏代码
  1. $urlRouterProvider.otherwise('/tab/home');  

设置whenPath(可用正则),当匹配是直接跳转到toPath
Js代码   收藏代码
  1. $urlRouterProvider.when(whenPath, toPath);  

自定义URL捕获处理,handler方法有一个参数$location返回一个path
Js代码   收藏代码
  1. $urlRouterProvider.rule(handler);  


例如:
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名必须唯一,通过state名中的点来划分Parent/child层次。
格式为:父View.子View
比如:items.detail是items的子View。
Js代码   收藏代码
  1. $stateProvider  
  2.   .state("items", {  
  3.     abstracttrue,  
  4.     url: "/items"  
  5.     templateUrl: "items.html" // 必须包含  
  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)设置信息
url:默认相对路径(以^开头的是绝对路径)
views:每个子视图可以包含自己的模板、控制器和预载入数据。
abstract:设置为true时,只能被继承不能直接切换到此state
template、templateUrl、templateProvider:HTML字符串或者返回HTML字符串的函数、HTML模板的路径或者返回HTML模板路径的函数
controller、controllerProvider:可以是一个控制器函数或者已经被注册的控制器名称,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'

(4)指定View名
Html代码   收藏代码
  1. <div ui-view="view1">div>  
  2. <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. }  


(5)页面跳转
链接点击后跳转到指定state
Html代码   收藏代码
  1. <a href="#/emp/hoge/1234">Goa>  
  2. <a ui-sref=".hoge({id:empID})">Goa>  


Js代码   收藏代码
  1. $state.go('state名' [, 参数] [, 可选项]);  

参数在下一个控制器中通过$stateParams接收

可选项:
location:true(更新地址栏)、false(不更新地址栏)、replace(更新地址栏同时更新history记录)
inherit:true(继承当前URL的参数)、false
relative:跳转原来的state对象
notify:true(激发$stateChangeStart和$stateChangeSuccess)、false
reload:重新加载

Js代码   收藏代码
  1. $state.reload();  
  2. $state.includes(stateName [, params]);  
  3. $state.is(stateOrName [, params]);  
  4. $state.href(stateOrName [, params] [, options]);  
  5. $state.get([stateName]);  
  6. $state.current  


(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树构建之前时:
Js代码   收藏代码
  1. $scope.$on('$viewContentLoading'function(event, viewConfig){ ... });  

View被加载而且DOM树构建完成时:
Js代码   收藏代码
  1. $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

你可能感兴趣的:(angularjs)