通过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):
- $stateProvider.state('state名', {设置信息});
但是默认otherwise需要使用$urlRouterProvider来设置
- $urlRouterProvider.otherwise('/tab/home');
例如:
- $stateProvider
- .state("emp",{
- url:"/emp"
- ,templateUrl:"list.html"
- ,controller:"ListCtrl"
- })
- .state("emp.detail",{
- url:"/:empID"
- ,templateUrl:"emp.html"
- ,controller:"EmpCtrl"
- });
ngRoute的设置方法:
- $routeProvider.when('url', {设置信息});
例如:
- $routeProvider
- .when("/emp",{
- templateUrl:"list.html"
- ,controller:"ListCtrl"
- })
- .when("/emp/:empID"){
- templateUrl:"emp.html"
- ,controller:"EmpCtrl"
- };
(2)层次化
state可以嵌套,通过state名中的点来划分层次。
格式为:父View.子View
比如:items.detail是items的子View。
- $stateProvider
- .state("items", {
- abstract: true,
- url: "/items"
- templateUrl: "items.html" // 必须包含<ui-view/>
- })
- .state("items.detail", {
- url: "/detail", // URL就是"/items/detail"
- templateUrl: "items-detail.html"
- })
- .state("items.info", {
- url: "/info", // URL就是"/items/info"
- templateUrl: "items-info.html"
- });
(3)指定View名
<div ui-view="view1"></div>
<div ui-view="view2"></div>
- .state("emp.detail"),{
- url:"/:empID"
- ,views:{
- view1:{
- templateUrl:"view1.html"
- ,controller:"View1Ctrl"
- }
- ,view2:{
- templateUrl:"view1.html"
- ,controller:"View1Ctrl"
- }
- }
- }
初始View
- .state("emp.detail"),{
- url:"/:empID"
- ,views:{
- "":{
- templateUrl:"emp.html"
- ,controller:"EmpCtrl"
- }
- }
- }
view@state
- .state("emp.detail.picture"),{
- url:"/all"
- ,views:{
- "@emp":{
- templateUrl:"picture.html"
- ,controller:"PictureCtrl"
- }
- }
- }
(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