angular的uiRouter服务学习(2)
本篇接着上一篇 angular的uiRouter服务学习(1) 继续讲解uiRouter的用法
本篇主要讲解uiRouter的嵌套状态&嵌套视图
嵌套状态的方法:
状态和状态之间可以互相嵌套,状态的嵌套共有以下几种方式:
1.使用'.state()'进行嵌套. 比如 .state('contact',{}).state('contact.list',{})
2.使用 ui-router.stateHelper 来创建状态嵌套树. 这种方式需要另外引入依赖,所以很少被使用.也就不具体详解了
3.定义状态的'parent'属性,属性值是一个字符串,就是父状态的名字.比如 {parent:'contacts'}
4.定义状态的'parent'属性,属性值是一个对象,对象就是父状态对象.比如 {parent:contacts}
使用.state()来创建嵌套状态:
可以对$stateProvider使用.state()来指定状态的嵌套继承,比如下面的例子:contacts.list就是contacts的一个子状态:
html:
<div> <a href="contacts">查看视图</a> <a href="contacts/list">查看嵌套视图</a> <ui-view>点击链接后内容会被加载在这里</ui-view> </div>
js
var nest = angular.module('nest',['ui.router']); nest.config(function($stateProvider){ $stateProvider.state('contacts',{ url:'/contacts', templateUrl:'contacts.html' }).state('contacts.list',{ url:'/list', templateUrl:'contacts.list.html' }) });
contacts.html
<h4>联系人列表:</h4> <ui-view></ui-view>
contacts.list.html
<p>我是contacts.list的内容</p>
*需要注意的是,子状态的url是以父状态的url为baseUrl的.所以这里子状态的url应该是'/contacts/list'
定义状态的'parent'属性,属性值是一个字符串:
可以通过状态的parent属性来指定它的父状态.
js:
nest.config(function($stateProvider){ $stateProvider.state('contacts',{ url:'/contacts', templateUrl:'contacts.html' }).state('list',{ url:'/list', templateUrl:'contacts.list.html', parent:'contacts' }) });
这种方式和上一中方式的区别在于,子状态不需要使用 '父状态.子状态' 这种格式.但是需要指定子状态的parent属性为'父状态名'
基于对象的状态实现嵌套状态:
如果你不喜欢上面说到的两种方式,那么还可以使用基于对象的状态: 为状态添加一个name属性,然后给子状态设置parent属性为父状态对象.
需要注意的是,使用这种方式,子状态的name属性命名规则必须和.state()方法一样,按照'父状态.子状态'的格式来命名
var contacts = { name:'parent', //特意不取名叫'contacts' url:'/contacts', templateUrl:'contacts.html' }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts }; nest.config(function($locationProvider,$stateProvider){ $stateProvider.state(contacts).state(list); });
状态的注册顺序:
状态的注册顺序无关紧要,你也可以先注册子状态再注册父状态.它会被放在队列里直到父状态被注册的时候才被注册.
父状态必须存在:
如果你只注册了一个子状态,比如contacts.list, 你就必须定义一个叫做contacts的父状态,(定义先后顺序无所谓,但一定要定义),否则的话,将不会有状态被注册.contacts.list这个状态会被放在队列中,直到contacts状态被定义. 如果你不定义父状态,也不会有任何的报错.所以需要注意,为了让子状态生效,必须定义父状态.
状态取名规则:
没有任何两个状态可以拥有相同的名字. 当使用.state()来创建嵌套状态的时候,父状态没有被指定,而是通过推断得到的. 当不使用.state()来创建嵌套状态的时候,parent属性必须被定义,但即使是两个拥有不同父状态的子状态,你依然不能给它们取相同的名字.
状态和视图的嵌套:
当应用处于一个特定的状态时(也就是某个状态被激活时),这个状态的所有祖先状态也都被激活了. 比如上面的所有例子: 当 'contacts.list' 状态被激活,'contacts' 状态也被隐式的激活了,因为它是 'contacts.list'的父状态.
子状态会把它的视图模板加载到父状态的模板的 ui-view 元素中去.
比如上面的这些例子,只要<a href="contacts/list">查看嵌套视图</a>被点击,contacts.list状态被激活,contacts状态也会被隐式的激活.
子状态从父状态继承了什么?
子状态从父状态继承了以下两项:
其余的,比如控制器,模板,url,等都不会被继承...
resolve继承的栗子:
核心代码:
var contacts = { name:'parent', url:'/contacts', templateUrl:'contacts.html', resolve:{ resA:function(){ return {value:'A'} } }, controller:function($scope,resA){ $scope.a = resA.value } }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts, resolve:{ resB:function(resA){ return {value:resA.value+'B'} } }, controller:function($scope,resB){ $scope.b = resB.value } }; nest.config(function($locationProvider,$stateProvider){ $locationProvider.html5Mode({enabled:true}).hashPrefix('!'); $stateProvider.state(contacts).state(list); });
contacts.html:
{{a}} //A
contacts.list.html:
{{a}} //A
{{b}} //AB
可以看到,contacts.list子状态继承了contacts父状态里resolve的依赖'resA'
需要注意: 如果你想在子状态实例化之前解析完父状态的resolve项里的某个promise依赖,那么,这个promise依赖必须被注入到子状态里去.
data继承的栗子:
核心代码:
var contacts = { name:'parent', url:'/contacts', templateUrl:'contacts.html', data:{ dataA:'a', dataB:'b' }, controller:function($scope,$state){ $scope.a = $state.current.data.dataA; } }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts, controller:function($scope,$state){ $scope.a = $state.current.data.dataA; $scope.b = $state.current.data.dataB; } }; nest.config(function($locationProvider,$stateProvider){ $locationProvider.html5Mode({enabled:true}).hashPrefix('!'); $stateProvider.state(contacts).state(list); });
contacts.html:
{{a}} //a
contacts.list.html:
{{a}} //a
{{b}} //b
可以看到,父状态的data属性都被子状态继承了
状态的继承是基于视图的继承的
注意,scope作用域的继承和状态的继承无关,它只和视图之间的嵌套关系有关.
很有可能有这种情况: 子状态的视图不仅用于被填充到父状态的视图中,也可能被填充到很多其他地方.在这种情况下.只有被填充到父状态的子状态的视图,才能继承父状态的scope,这种继承只是angular本身的scope继承机制,和状态继承机制是无关的.所以被填充到其他地方的视图是不能访问到父状态的scope的.
抽象状态
一个抽象状态它拥有自己的子状态,但是它不能激活自己. 它只能当子状态被激活的时候,隐式的被激活.
如果要让一个状态成为抽象状态,需要给它设置abstract属性为true
下面是几种抽象状态常用的场合:
- 给子状态们的url提供一个基础url.
- 插入带有ui-view(s)的视图模板,显示子状态们通用的内容,而ui-view部分供各个子状态不同的视图模板来填充.
- 可以给视图添加一个控制器
- 另外,这样也可以把$scope对象继承给子状态.但是注意,就如同上一点所说的,这是通过angular的scope的视图继承机制实现的,不是状态继承
- 通过data属性,给子状态们提供数据.
- 通过resolve属性,给子状态们提供依赖.
- 通过触发onEnter和onExit回调,来处理一些事情.
- 以上几种情况的混合.
注意: 抽象状态也需要带有<ui-view>元素来让子状态视图填充,所以,如果你创建抽象状态是为了给子状态提供基础url,提供resolve依赖,data数据,或者调用onEnter和onExit回调,那么你需要在template属性中设置视图模板为:''<ui-view/>".
下面简单举几个栗子:
栗子1:给子状态们的url提供一个基础url.
html:
<div> <a href="contacts">查看视图</a> <a href="contacts/list">查看嵌套视图1</a> <a href="contacts/detail">查看嵌套视图2</a> <ui-view>点击链接后内容会被加载在这里</ui-view> </div>
js:
var contacts = { abstract:true, name:'parent', url:'/contacts', template:'<ui-view/>' }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts }; var detail = { name:'parent.detail', url:'/detail', templateUrl:'contacts.detail.html', parent:contacts }; nest.config(function($locationProvider,$stateProvider){ $locationProvider.html5Mode({enabled:true}).hashPrefix('!'); $stateProvider.state(contacts).state(list).state(detail); });
contacts.list.html:
<p>我是contacts.detail</p>
contacts.detail.html:
<p>我是contacts.detail</p>
当url变为'contacts/list'和'contacts/detail'的时候,会激活相应的状态
------------------------------------------------------------------------------------------------------------------------------------------
栗子2: 父状态插入带有ui-view(s)的视图模板,显示子状态们通用的内容,而ui-view部分供各个子状态不同的视图模板来填充.
html同上.
js:
var contacts = { abstract:true, name:'parent', url:'/contacts', templateUrl:'contacts.html' }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts }; var detail = { name:'parent.detail', url:'/detail', templateUrl:'contacts.detail.html', parent:contacts }; nest.config(function($locationProvider,$stateProvider){ $locationProvider.html5Mode({enabled:true}).hashPrefix('!'); $stateProvider.state(contacts).state(list).state(detail); });
contacts.html:
<h4>联系人列表:</h4> <ui-view></ui-view>
无论切换哪个子状态,contacts.html中的<h4>联系人列表:</h4>部分都是通用的.
------------------------------------------------------------------------------------------------------------------------------------------
栗子3: 混合使用
html:
<div> <a href="contacts">查看视图</a> <a href="contacts/list">查看嵌套视图1</a> <ui-view>点击链接后内容会被加载在这里</ui-view> </div>
js:
var contacts = { abstract:true, name:'parent', url:'/contacts', templateUrl:'contacts.html', controller:function($scope){ $scope.contacts = [{id:0,name:'code_bunny'},{id:1,name:'white_bunny'},{id:2,name:'black_bunny'}] } }; var list = { name:'parent.child', url:'/list', templateUrl:'contacts.list.html', parent:contacts }; var detail = { name:'parent.detail', url:'/detail/:id', templateUrl:'contacts.detail.html', parent:contacts, controller:function($scope,$stateParams){ $scope.id = $stateParams.id } }; nest.config(function($locationProvider,$stateProvider){ $locationProvider.html5Mode({enabled:true}).hashPrefix('!'); $stateProvider.state(contacts).state(list).state(detail); });
contacts.html:
<h4>联系人列表:</h4> <ui-view></ui-view>
contacts.list.html:
<ul> <li ng-repeat="contact in contacts"> <a href="contacts/detail/{{contact.id}}">{{contact.name}}</a> </li> </ul>
contacts.detail.html:
<p>{{contacts[id]['name']}}</p>
完整代码: https://github.com/OOP-Code-Bunny/angular/tree/master/uiRouter
参考网站: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
