赞
踩
最近正在开发的项目以AngularJS开发,目前开发已经告一段落,打算近期整理一下开发阶段中遇到的问题和个人感受。开发过程中接触了一些AngularJS的常用库,UI-ROUTER就是其中比较重要的路由库,就从这里开始写起来。
UI-ROUTER官网上提供了3个简单的教程,本篇就以这3个教程结合开发中的实际使用进行总结。
首先是熟悉的Hello World
。
<body ng-app='myApp'>
<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="about" ui-sref-active="active">about</a></li>
</ul>
<ui-view></ui-view>
</body>
angular.module('myApp', ['ui.router']) .config(function ($stateProvider) { var helloState = { name: 'hello', url: '/hello', template: '<h3>hello world</h3>' }; var aboutState = { name: 'about', url: '/about', template: '<h3>this is a abut view</h3>' }; $stateProvider.state(helloState) .state(aboutState); });
我们首先来谈谈HTML部分的代码。其中首先来看看ui-sref
、ui-sref-active
属性和ui-view
标签。
ui-sref:
ui-sref: 是用来连接状态的一个指令。
这是一个可以带参数的连接状态的指令。当被选中,这个指令会激活带有提供的参数值的连接状态。Linked State
属性值是连接状态的name
比如:
在上面的代码中,<a ui-sref="hello" ui-sref-active="active">hello</a>
- 1
其中
ui-sref
的属性值hello
,对应的就是js中helloState
的name
值。Relative Links
你也可以在
ui-sref
中使用相对状态路径。
需要注意的是路径是相对于创建了连接的状态。这允许一个状态创建一个总是命中相同目的的相对ui-sref
属性。
例子:
下面的连接都相对于于父状态,即使当一个子状态当前被激活<a ui-sref='.child1'>child 1 state</a> <a ui-sref='.child2'>child 2 state</a>
- 1
- 2
下面的连接会激活父状态
<a ui-sref='^'>Return</a>
- 1
这个例子是个很不错的例子
Relative linkshrefs
如果这个已连接的状态有一个URL,指令会自动生成并且更新
href
属性(使用[[StateService.href]])方法。
例子:
假设users
状态有一个url/users/
<a ui-sref='users' href='/users/'>Users</a>
- 1
参数值
除了状态名,属性
ui-sref
可以包含用来激活状态的参数值。参数值可以添加在状态名之后,用括号闭合。括号内的内容是一个表达式,被当作参数值执行。
例子:
这个例子渲染了一个连接列表给用户,状态的userId
参数值来自用户的user.id
属性。<li ng-repeat="user in users"> <a ui-sref="users.detail({userId: user.id})">{{user.displayName}}</a> </li>
- 1
- 2
- 3
注意:
参数值表达式通过$watch
监听并更新。过渡期选项(Transition Options)
你可以通过
ui-sref-opts
属性来指定[[TransitionOptions]]
传递给[[StateService.go]]
。
选项被限制为只有location
,inhreit
并且reload
。例子:
<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
- 1
其他DOM事件
你可以指定DOM事件响应(而不是click),通过提供一个
events
数组在ui-sref-opts
属性中。
例子:<input type="text" ui-sref="contacts" ui-sref-opts="{events: ['change', 'blur']}">
- 1
跟参数值表达式不一样的是,状态名没有通过
$watch
进行监听(因为性能原因),如果你需要动态更新连接状态,使用全动态指定[[uiState]]指令
。
ui-view
ui-view: 一个用激活状态填充视区的指令。
Attributes
name: (可选的) 视图名称
相同状态下的视图中的视图名称必须是唯一的。在不同的状态下你可以有相同的名称。
autoScroll
一个表达式,当执行结果为
true
, 状态被激活时,ui-view
将会滚动进试图中。通过[[$uiViewScroll]]
来实现滚动。onload
当视图更新时就会执行的表达式
其中ui-view
组件使用ViewConfig
来决定哪个视图被加载进ui-view
,并且决定了视图状态的上下文对象。比如:
<div ng-app="myApp">
<a ui-sref="hello">hello</a>
<div ui-view></div>
</div>
angular.module('myApp') .config(['$stateProvider', function($stateProvider) { var helloState = { name:'hello', url: '/hello', template: '<h2>{{$resolve.init}}</h2><h3>hello world {{num}}</h3><button ng-click="helloCtrl.add()">+</button><button ng-click="helloCtrl.subtract()">-</button>', controller: function ($scope) { $scope.num = 0; this.add = function () { $scope.num++; } this.subtract = function () { $scope.num--; } }, controllerAS: "helloCtrl", resolve: { init: function () { console.log('init'); return 1; } } }; $stateProvider.state(helloState); }])
上面是一个较为完整的例子。a
标签中的ui-sref
的值与viewConfig
的name
对应。需要注意的是,resolve
块中的数据作为$scope
放置在scope
中(上面的模板中提到写到的<h2>{{$resolve.init}}</h2>
)。
此时,将$scope
输出到控制台中, 发现了$resolve
。其中$resolve
下$transitions$
有各种状态的hookRegistrationFn
$transition$: Transition
$id: 0
isActive: ƒ ()
onBefore: ƒ hookRegistrationFn(matchObject, callback, options)
onEnter: ƒ hookRegistrationFn(matchObject, callback, options)
onError: ƒ hookRegistrationFn(matchObject, callback, options)
onExit: ƒ hookRegistrationFn(matchObject, callback, options)
onFinish: ƒ hookRegistrationFn(matchObject, callback, options)
onRetain: ƒ hookRegistrationFn(matchObject, callback, options)
onStart: ƒ hookRegistrationFn(matchObject, callback, options)
onSuccess: ƒ hookRegistrationFn(matchObject, callback, options)
注:上面的例子中,在controller
部分加上console.log(1)
,发现控制台中的输出为init
,然后是1
。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。