最近正在开发的项目以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>其中
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>下面的连接会激活父状态
<a ui-sref='^'>Return</a>这个例子是个很不错的例子
Relative linkshrefs
如果这个已连接的状态有一个URL，指令会自动生成并且更新
href属性(使用[[StateService.href]])方法。
例子：
假设users状态有一个url/users/<a ui-sref='users' href='/users/'>Users</a>参数值
除了状态名，属性
ui-sref可以包含用来激活状态的参数值。参数值可以添加在状态名之后，用括号闭合。括号内的内容是一个表达式，被当作参数值执行。
例子:
这个例子渲染了一个连接列表给用户，状态的userId参数值来自用户的user.id属性。<li ng-repeat="user in users"> <a ui-sref="users.detail({userId: user.id})">{{user.displayName}}</a> </li>注意:
参数值表达式通过$watch监听并更新。过渡期选项（Transition Options）
你可以通过
ui-sref-opts属性来指定[[TransitionOptions]]传递给[[StateService.go]]。
选项被限制为只有location,inhreit并且reload。例子：
<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>其他DOM事件
你可以指定DOM事件响应（而不是click），通过提供一个
events数组在ui-sref-opts属性中。
例子：<input type="text" ui-sref="contacts" ui-sref-opts="{events: ['change', 'blur']}">跟参数值表达式不一样的是，状态名没有通过
$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。