|
转自：http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/
参考原文：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>
|
// in app-states.js (or whatever you want to name it)
$stateProvider.state(
'contacts',{
template:
'<h1>My Contacts</h1>'
})
|
模板将被插入哪里?
状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html。
激活状态
有三种方法来激活状态：
- 调用
$state.go()方法，这是一个高级的便利方法；
- 点击包含
ui-sref指令的链接；
- 导航到与状态相关联的 url。
Templates 模板
可以通过下面几种方法来配置一个状态的模板。
方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式
1
2
3
|
$stateProvider.state(
'<h1>My Contacts</h1>'
})
|
方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。
templateUrl:
'contacts.html'
})
|
templateUrl的值也可以是一个函数返回的url，函数带一个预设参数stateParams。
1
2
3
4
5
|
templateUrl:
function (stateParams){
return
'/partials/contacts.' + stateParams.filterBy +
'.html';
}
})
|
方法三：通过templateProvider函数返回模板的 HTML。
1
2
3
4
5
6
7
|
templateProvider:
$timeout,$stateParams) {
return $timeout(
) {
'<h1>' + $stateParams.contactId +
'</h1>'
},100);
}
})
|
如果想在状态被激活前，让<ui-view>有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。
<body>
<ui-view>
<i>Some content will load here!
</i>
</ui-view>
</body>
|
Controllers 控制器
可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。
设置控制器：
1
2
3
4
5
6
|
'<h1>{{title}}</h1>',
controller:
function($scope){
$scope.title =
'My Contacts';
}
})
|
如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：
template: ...,
controller:
'ContactsCtrl'
})
|
使用controllerAs语法：
'ContactsCtrl as contact'
})
|
对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：
controllerProvider:
$stateParams) {
var ctrlName = $stateParams.type +
"Controller";
return ctrlName;
}
})
|
控制器可以使用$scope.on()方法来监听事件状态转换。
控制器可以根据需要实例化，当相应的scope被创建时。例如，当用户点击一个url手动导航一个状态时，$stateProvider将加载对应的模板到视图中，并且将控制器和模板的scope绑定在一起。
解决器 Resolve
可以使用resolve为控制器提供可选的依赖注入项。
resolve配置项是一个由key/value构成的对象。
- key – {string}：注入控制器的依赖项名称。
- factory - {string|function}：
- string：一个服务的别名
- function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。
例子
在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
|
'myState',{
resolve:{
simpleObj:
){
return {
value:
'simple!'};
},
promiSEObj:
$http){
return $http({
method:
'GET',url:
'/someUrl'});
},153)">// Another promise example.
promiSEObj2:
$http){
'/someUrl'})
.then (
data) {
return doSomeStuffFirst(data);
});
},153)">// 使用服务名的例子，这将在模块中查找名称为 'translations' 的服务，并返回该服务
translations:
"translations",153)">// 将服务模块作为解决函数的依赖项，通过参数传入
translations2:
translations,$stateParams){
translations.getLang($stateParams.lang);
},153)">// Example showing returning of custom made promise
greeting:
$q,$timeout){
var deferred = $q.defer();
$timeout(
) {
deferred.resolve(
'Hello!');
},87)">1000);
return deferred.promise;
}
},
controller:
$scope,simpleObj,promiSEObj,promiSEObj2,translations,translations2,greeting){
$scope.simple = simpleObj.value;
$scope.items = promiSEObj.items;
$scope.items = promiSEObj2.items;
$scope.title = translations.getLang(
"english").title;
$scope.title = translations2.title;
$scope.greeting = greeting;
}
})
|
为 $state 对象提供自定义数据
可以给 $state 对象提供自定义数据（建议使用data属性，以免冲突）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 基于对象和基于字符串定义 state 的例子
var contacts = {
name:
templateUrl:
'contacts.html',
data: {
customData1:
5,
customData2:
"blue"
}
}
$stateProvider
.state(contacts)
.state(
'contacts.list',{
templateUrl:
'contacts.list.html',87)">44,153)">"red"
}
})
|
可以通过下面的方式来访问上面定义的数据：
function Ctrl($state){
console.log($state.current.data.customData1)
console.log($state.current.data.customData2)
}
|
onEnter 和 onExit 回调函数
onEnter和onExit回调函数是可选配置项，分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
"contacts",
resolve: {
title:
'My Contacts' },title){
$scope.title =
'My Contacts';
},
onEnter:
title){
if(title){ ... do something ... }
},153)">// title 是解决依赖项，这里也是可以使用解决依赖项的
onExit:
title){
if(title){ ... do something ... }
}
})
|
State Change Events 状态改变事件
所有这些事件都是在$rootScope作用域触发
- $stateChangeStart- 当模板开始解析之前触发
1
2
|
$rootScope.$on(
'$stateChangeStart',
event,toState,toParams,fromState,fromParams){ ... })
|
注意：使用event.preventDefault()可以阻止模板解析的发生
event.preventDefault();
})
|
- $stateNotFound-
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});
$scope.$on(
'$stateNotFound',unfoundState,fromParams){
console.log(unfoundState.to);
console.log(unfoundState.toParams);
console.log(unfoundState.options);
})
|
- $stateChangeSuccess- 当模板解析完成后触发
'$stateChangeSuccess',fromParams){ ... })
|
- $stateChangeError- 当模板解析过程中发生错误时触发
'$stateChangeError',fromParams,error){ ... })
|
View Load Events 视图加载事件
- $viewContentLoading- 当视图开始加载，DOM渲染完成之前触发，该事件将在
$scope链上广播此事件。
$scope.$on(
'$viewContentLoading',viewConfig){
});
|
- $viewContentLoaded- 当视图加载完成，DOM渲染完成之后触发，视图所在的
$scope发出该事件。
$scope.$on(
'$viewContentLoaded',87)">event){ ... });
|
AngularJS
ui-router
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
