参考原文:https://github.com/angular-ui/ui-router/wiki
ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。
controller
、template
和view
等属性,来定义指定位置的用户界面和界面行为模板可以通过下面这种最简单的方式来指定
1
2
3
4
|
<body ng-controller="MainCtrl">
<section ui-view>
section>
body>
|
1
2
3
4
|
// in app-states.js (or whatever you want to name it)
$stateProvider.state(
'contacts', {
template:
'
My Contacts'
})
|
状态被激活时,它的模板会自动插入到父状态对应的模板中包含ui-view
属性的元素内部。如果是顶层的状态,那么它的父模板就是index.html
。
有三种方法来激活状态:
$state.go()
方法,这是一个高级的便利方法;ui-sref
指令的链接;可以通过下面几种方法来配置一个状态的模板。
方法一:配置template
属性,指定一段 HTML 字符串,这人是设置模板的最简单的方式
1
2
3
|
$stateProvider.state(
'contacts', {
template:
'
My Contacts'
})
|
方法二:配置templateUrl
属性,来加载指定位置的模板,这是设置模板的常用方法。
1
2
3
|
$stateProvider.state(
'contacts', {
templateUrl:
'contacts.html'
})
|
templateUrl
的值也可以是一个函数返回的url,函数带一个预设参数stateParams
。
1
2
3
4
5
|
$stateProvider.state(
'contacts', {
templateUrl:
function (stateParams){
return
'/partials/contacts.' + stateParams.filterBy +
'.html';
}
})
|
方法三:通过templateProvider
函数返回模板的 HTML。
1
2
3
4
5
6
7
|
$stateProvider.state(
'contacts', {
templateProvider:
function ($timeout, $stateParams) {
return $timeout(
function () {
return
'
'+ $stateParams.contactId + ''
},
100);
}
})
|
如果想在状态被激活前,让
有一些默认的内容,当状态被激活之后默认内容将被状态对应的模板替换。
1
2
3
4
5
|
<body>
<ui-view>
<i>Some content will load here!
i>
ui-view>
body>
|
可以为模板指定一个控制器(controller)。警告:控制器不会被实例化如果模板没有定义。
设置控制器:
1
2
3
4
5
6
|
$stateProvider.state(
'contacts', {
template:
'
学习 ui-router - 管理状态',
controller:
function($scope){
$scope.title =
'My Contacts';
}
})
|
如果在模块中已经定义了一个控制器,只需要指定控制器的名称即可:
1
2
3
4
|
$stateProvider.state(
'contacts', {
template: ...,
controller:
'ContactsCtrl'
})
|
使用controllerAs
语法:
1
2
3
4
|
$stateProvider.state(
'contacts', {
template: ...,
controller:
'ContactsCtrl as contact'
})
|
对于更高级的需要,可以使用controllerProvider
来动态返回一个控制器函数或字符串:
1
2
3
4
5
6
7
|
$stateProvider.state(
'contacts', {
template: ...,
controllerProvider:
function($stateParams) {
var ctrlName = $stateParams.type +
"Controller";
return ctrlName;
}
})
|
控制器可以使用$scope.on()
方法来监听事件状态转换。
控制器可以根据需要实例化,当相应的scope
被创建时。例如,当用户点击一个url手动导航一个状态时,$stateProvider
将加载对应的模板到视图中,并且将控制器和模板的scope
绑定在一起。
可以使用resolve
为控制器提供可选的依赖注入项。
resolve
配置项是一个由key/value
构成的对象。
在controller
实例化之前,resolve
中的每一个对象都必须 be resolved,请注意每个 resolved object 是怎样作为参数注入到控制器中的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
$stateProvider.state(
'myState', {
resolve:{
// Example using function with simple return value.
// Since it's not a promise, it resolves immediately.
simpleObj:
function(){
return {value:
'simple!'};
},
// Example using function with returned promise.
// 这是一种典型使用方式
// 请给函数注入任何想要的服务依赖,例如 $http
promiseObj:
function($http){
// $http returns a promise for the url data
return $http({method:
'GET', url:
'/someUrl'});
},
// Another promise example.
// 如果想对返回结果进行处理, 可以使用 .then 方法
// 这是另一种典型使用方式
promiseObj2:
function($http){
return $http({method:
'GET', url:
'/someUrl'})
.then (
function (data) {
return doSomeStuffFirst(
data);
});
},
// 使用服务名的例子,这将在模块中查找名称为 'translations' 的服务,并返回该服务
// Note: The service could return a promise and
// it would work just like the example above
translations:
"translations",
// 将服务模块作为解决函数的依赖项,通过参数传入
// 提示:依赖项 $stateParams 代表 url 中的参数
translations2:
function(translations, $stateParams){
// Assume that getLang is a service method
// that uses $http to fetch some translations.
// Also assume our url was "/:lang/home".
translations.getLang($stateParams.lang);
},
// Example showing returning of custom made promise
greeting:
function($q, $timeout){
var deferred = $q.defer();
$timeout(
function() {
deferred.resolve(
'Hello!');
},
1000);
return deferred.promise;
}
},
// 控制器将等待上面的解决项都被解决后才被实例化
controller:
function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){
$scope.simple = simpleObj.value;
// 这里可以放心使用 promiseObj 中的对象
$scope.items = promiseObj.items;
$scope.items = promiseObj2.items;
$scope.title = translations.getLang(
"english").title;
$scope.title = translations2.title;
$scope.greeting = greeting;
}
})
|
可以给 $state 对象提供自定义数据(建议使用data
属性,以免冲突)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 基于对象和基于字符串定义 state 的例子
var contacts = {
name:
'contacts',
templateUrl:
'contacts.html',
data: {
customData1:
5,
customData2:
"blue"
}
}
$stateProvider
.state(contacts)
.state(
'contacts.list', {
templateUrl:
'contacts.list.html',
data: {
customData1:
44,
customData2:
"red"
}
})
|
可以通过下面的方式来访问上面定义的数据:
1
2
3
4
|
function Ctrl($state){
console.log($state.current.data.customData1)
// 输出 5;
console.log($state.current.
data.customData2)
// 输出 "blue";
}
|
onEnter
和onExit
回调函数是可选配置项,分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$stateProvider.state(
"contacts", {
template:
'
学习 ui-router - 管理状态',
resolve: { title:
'My Contacts' },
controller:
function($scope, title){
$scope.title =
'My Contacts';
},
// title 是解决依赖项,这里也是可以使用解决依赖项的
onEnter:
function(title){
if(title){ ...
do something ... }
},
// title 是解决依赖项,这里也是可以使用解决依赖项的
onExit:
function(title){
if(title){ ...
do something ... }
}
})
|
所有这些事件都是在$rootScope
作用域触发
1
2
|
$rootScope.$on(
'$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){ ... })
|
注意:使用event.preventDefault()
可以阻止模板解析的发生
1
2
3
4
5
6
|
$rootScope.$on(
'$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
// transitionTo() promise will be rejected with
// a 'transition prevented' error
})
|
v0.3.0
- 在 transition 时通过状态名查找状态,当状态无法找到时发生。该事件在 scope 链上广播,只允许一次处理错误的机会。unfoundState
将作为参数传入事件监听函数,下面例子中可以看到unfoundState
的三个属性。使用event.preventDefault()
来阻止模板解析,
1
2
3
4
5
6
7
8
9
10
|
// somewhere, assume lazy.state has not been defined
$state.go(
"lazy.state", {a:
1, b:
2}, {inherit:
false});
// somewhere else
$scope.$on(
'$stateNotFound',
function(event, unfoundState, fromState, fromParams){
console.log(unfoundState.to);
// "lazy.state"
console.log(unfoundState.toParams);
// {a:1, b:2}
console.log(unfoundState.options);
// {inherit:false} + default options
})
|
1
2
|
$rootScope.$on(
'$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){ ... })
|
1
2
|
$rootScope.$on(
'$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error){ ... })
|
$scope
链上广播此事件。
1
2
3
4
5
6
|
$scope.$on(
'$viewContentLoading',
function(event, viewConfig){
// Access to all the view config properties.
// and one special property 'targetView'
// viewConfig.targetView
});
|
$scope
发出该事件。
1
2
3
|
$scope.$on(
'$viewContentLoading',
$scope.$on(
'$viewContentLoaded',
function(event){ ... });
|