Angular-Ui-Router
什么是Angular-Ui-Router
它是Angular第三方开发用于管理ui与路由的模块，功能比Angular原生的ngRoute要强而且全，因此原生基本已经被其替代。
UI-Router是采用的是一种状态管理机制，“状态”可以继承，“状态”不禁包含url，还有views,controller等，以此来组织路由和控制界面UI的渲染，而不是单纯的改变路由。对于UI方面提供嵌套视图，可以一个页面嵌套多个视图，多视图再嵌套单个视图，每个视图可提供其特定的controller等针对管理，方便视图重用且功能精细，可以打造十分复杂的web应用。
Angular自身是通过集成各个功能模块而形成完整的web应用，所以要使用Ui-Router除了angular.js只用导入其模块angular-ui-router.js(也可以加产品版本min.js),可以通过bower包管理器或github等下载。
src="angular-ui-router/release/angular-ui-router.js"&&
然后在ngApp中加入ui.router
var app = angular.module('myApp', ['ui.router']);
然后再创建login.html用于嵌套，再在需要嵌套的页面配置
&!-index.html url'/'
&div ui-view&&/div&
再配置路由
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
templateUrl: 'login.html',
当进入主页它便自动将login.html嵌套到ui-view中。
ui-view是用来告诉ui-router哪里需要嵌套模板
ui-view="chart"&&
ui-view="data"&&
$.state("", {
template: "&h1&HELLO!&/h1&"
template: "&chart_thing/&"
templateUrl: 'tplUrl.html'
autoscroll
让ui-view有滚动条效果，&ui-view autoscroll[='expression']/&expression可选
绑定在&a&tag，用于‘状态’转换，类似&a&的href属性。底层通过$state.href()来返回编译好的状态填充。
- ui-sref=’stateName’
- ui-sref=’stateName({param: value, param: value})’
ui-sref="home"&Home& |
ui-sref="about"&About&
ng-repeat="contact in contacts"&
ui-sref="contacts.detail({ id: contact.id })"&{{ contact.name }}&
$stateProvider
$stateProvider用于配制’状态‘，可以是链式配制。
$stateProvider.state(stateName1, stateConfig1)
.state(stateName2,stateConfig2);
stateName是以个唯一的字符串，用于标记状态。
stateConfig用于管理状态的配制，object类型。
stateConfig部分内容：
param必须是拉丁字母、数字或下滑线，而且必须是唯一的。
- ‘/hello’
‘/user/:id’ :匹配’/user/bob’ 或’/user/1234!!!’或甚至是’/user/’ 但不是能’/user’ 或 ‘/user/bob/details’
- ‘/user/{id}’：跟上面一样，只是将：换成{}
- ‘/user/{id:int}’：指定param是Interger类型
正则表达形式
url: "/contacts/{contactId:[0-9]{1,8}}"
指定查询参数
url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"
$stateProvider
.state('contacts', {
url: '/contacts',
.state('contacts.list', {
url: '/list',
contact 状态配对/contacts
contacts.list状态配对/contacts/list
若在contact.list状态中url:'^/list'，则可直接匹配”/list”
关于指定html模板，为ui-view指定加载指定模板
template：可以是字符串html内容，也可以是返回html字符串的方法。
templateUrl：html模板的路径，也可以是返回该路径的方法
templateProvider ：返回html字符串方法，该方法可以注入，可以访问本地。
关于指定的controller，为指定模板添加controller，很便捷
controller：实现方法或controller的名字。
controllerProvider:实现可注入方法返回普通的controller或字符串 。
关于params，若不在url配制参数也可以在params配制，是个object类型，该参数挂载在$stateParams。在传递参数时一定要在url或params先定义有这个参数。
关于views,views是个object类型，用来代替上述所说的template，通过状态的配制达到多视图嵌套单个页面。
ui-view="filters"&&
ui-view="tabledata"&&
ui-view="graph"&&
$stateProvider
.state('report',{
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){
... controller stuff just for filters view ...
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){
... controller stuff just for tabledata view ...
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){
... controller stuff just for graph view ...
通过viewname@statename可以在嵌套在页面的视图中再嵌套视图。
index.html--&
ui-view="childView1"&&
ui-view="childView2"&&
$stateProvider
.state('main', {
templateUrl: 'main.html',
'childView1@main': {
templateUrl: 'childView1.html',
controller: 'child1Ctrl'
'childView2@main': {
templateUrl: 'childView2.html',
controller: 'child2Ctrl'
当跳转到url ‘/’就可以渲染index.html，包括内嵌main.html,而child1.html与child2.html则内嵌于main.html中。
关于Resolve，用来为controller提供数据或内容，将resolve内的对象当做参数注入
simpleObj:
function(){
return {value: 'simple!'};
promiseObj:
function($http){
return $http({method: 'GET', url: '/someUrl'});
promiseObj2:
function($http){
return $http({method: 'GET', url: '/someUrl'})
.then (function (data) {
return doSomeStuffFirst(data);
translations: "translations",
translations2: function(translations, $stateParams){
return translations.getLang($stateParams.lang);
greeting: function($q, $timeout){
var deferred = $q.defer();
$timeout(function() {
deferred.resolve('Hello!');
return deferred.
controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){
$scope.simple = simpleObj.
$scope.items = promiseObj.data.
$scope.items = promiseObj2.
$scope.title = translations.getLang("english").
$scope.title = translations2.
$scope.greeting =
关于abstract 抽象模板,抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖，abstract模板需要ui-view，以下是包含多视图模板：
$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '&div ui-view&&/div&'
.state('admin.index', {
url: '/index',
template: '&h3&Admin index&/h3&'
.state('admin.users', {
url: '/users',
template: '&ul&...&/ul&'
onEnter,onExit,在进入状态或脱离状态时，要做什么可以使用,比如离开时显示是否要离开的对话框等。
$stateProvider.state("contacts", {
template: '&h1&{{title}}&/h1&',
resolve: { title: 'My Contacts' },
controller: function($scope, title){
$scope.title =
onEnter: function(title){
if(title){ ... do something ... }
onExit: function(title){
if(title){ ... do something ... }
reloadOnSearch，如果reloadOnSearch选项被设置为true（默认），当$location.search()发生变化时会重新加载路由。如果设置为false，那么当url中的查询部分发生变化时就不会重新加载路由。
data，用于在stateconfig自定义数据.该数据和预载入数据resolve属性相似，但是该数据不会被注入到控制器中，promise也不会被预载入，它的用途是从父状态传递数据到子状态。
// Example shows an object-based state and a string-based state
var contacts = {
name: 'contacts',
templateUrl: 'contacts.html',
customData1: 5,
customData2: "blue"
$stateProvider
.state(contacts)
.state('contacts.list', {
templateUrl: 'contacts.list.html',
customData1: 44,
customData2: "red"
$urlRouterProvider
可以通过不同的 url 激活不同的状态，由于设定好的状态在特定的url被访问是会自动激活，所以在管理激活和加载状态的时候， $urlRouterProvider 并不是必须的。在状态管理之外的时候才会需要，比如重定向，或者验证的时候。
该函数需要两个参数：1.当前的路径(String | RegExp | UrlMatcher（定义url )，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串.
handler是路径：
app.config(function($urlRouterProvider){
// when there is an empty route, redirect to /index
$urlRouterProvider.when('', '/index');
// You can also use regex for the match parameter
$urlRouterProvider.when(/aspx/i, '/index');
hander是函数：
$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) {
if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) {
$state.transitionTo(state, $match, false);
如果提供一个函数处理，路由匹配的时候，这个函数就会被调用，它可以返回下列三种之一的结果。
false，这个回应告诉 $urlRouter 规则并不匹配，应该查找其它匹配的状态，在我们希望验证用户是否访问正确地址的时候很有用。
字符串，$urlRouter 将其作为重定向目标。
true 或者 undefined，函数已经处理了这个 url
oterwiese() 在没有其它路由匹配的情况下重定向。这是创建默认 url 的好方法。otherwise() 函数只需要一个参数，一个字符串或者一个函数。如果提供了一个字符串，就会被看做一个默认地址，在任何错误的或者不能匹配任何路由的时候，就会被重定向到这个地址。如果是一个函数，在没有其它路由匹配的时候，就会被执行
app.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/index');
$urlRouterProvider.otherwise(function($injector, $location){
... some advanced code...
如果我们希望处理任何路由，或者在其它路由之前进行一些处理，可以使用 rule() 函数。
app.config(function ($urlRouterProvider) {
$urlRouterProvider.rule(function ($injector, $location) {
var path = $location.path(), normalized = path.toLowerCase();
if (path != normalized) {
$location.replace().path(normalized);
$state.go可以在javascript中转换状态（类似ui-sref,在html中转换）。
$.go(, [,toParams],[,options])
形参to是stateName，必须，使用”^”或”.”表示相对状态；
形参toParams可空，类型是对象,挂载在对应$stateparams,参数也可以通过状态机制继承；
形参options可空，类型是对象，字段包括：
location:为boolean类型默认true,如果是true会更新地址中的url,flase不会，若为replace会更新并覆盖最后一此的记录。
inherit为boolean类型默认true,如果是true会继承最近的的url中的参数。
relative为对象默认$state.$current,当定义为相对路劲时，定义那个状态是相对的。
notify为boolean类型默认为true, 当为true时广播 $stateChangeStart 和
$stateChangeSuccess事件
reload为boolean类型默认为false,如果是true会强制重载且一切一样。
$state.go('photos.detail')
$state.go('^')到上一级,比如从photo.detail到photo
$state.go('^.list')到相邻state,比如从photo.detail到photo.list
$state.go('^.ment')到孙子级state，比如从photo.detail到ment
$state.reload()
强制重载当前状态，与$state.go的option内配制reload=true类似。
$state.includes(stateName [, params])
$state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态，返回时boolean值.
比如当前状态是contacts.details.item
$state.includes("contacts"); // returns true
$state.includes("contacts.details"); // returns true
$state.includes("contacts.details.item"); // returns true
$state.includes("contacts.list"); // returns false
$state.includes("about"); // returns false
params，假设当前状态”contacts.details.item.edit”，其url是/contacts/1/address/edit，为:id配制1 和 ：item配制’address’。
$state.includes("contacts.detail", {id: 1}); // returns true
$state.includes("contacts.detail.item", {item:'address'}); // returns true
$state.includes("contacts", {bogus:'gnarly'}); // returns false
$state.is(stateOrName [, params])
类似$state.includes，但它比较严格。
假设当前状态：contact.details.item
$state.is("contact.details.item"); // returns true
$state.is(contactDetailItemStateConfigObj); // returns true
// Everything else would return false
$state.is("contacts.detail.item.edit", {id: 1, item: 'address'}); // returns true
// Everything else returns `false`
$state.href(stateOrName [, params] [, options])
一个URL生成方法，返回已经填充指定参数的状态的编译后的链接。
$.href(".person", { person: "bob" })
$state.get([stateName])
得到状态的配制object
$state.current
返回状态对象的引用，用于访问自定义data
注意：使用$State和$stateparams需要将其挂载到$rootscope
angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$urlRouter
$urlRouter.sync()
Returns null.
T the same update that happens when the address bar url changes, aka $locationChangeSuccess. This method is useful when you need to use preventDefault() on the $locationChangeSuccess event, perform some custom logic (route protection, auth, config, redirection, etc) and then finally proceed with the transition by calling $urlRouter.sync().
angular.module('app', ['ui.router']);
.run(function($rootScope, $urlRouter) {
$rootScope.$on('$locationChangeSuccess', function(evt) {
evt.preventDefault();
var meetsRequirement =
if (meetsRequirement) $urlRouter.sync();
$stateParams
用于获取url中的参数，每个url的参数都放在对应$stateParams这个服务中，是一个object类型，将其注入controller或service中可以拿到url的参数。
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: function($stateParams){
$stateParams.contactId
}).state('contacts.detail.subitem', {
url: '/item/:itemId',
controller: function($stateParams){
$stateParams.contactId
$stateParams.itemId
使用resolve传递父参数
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: function($stateParams){
$stateParams.contactId
contactId: ['$stateParams', function($stateParams){
return $stateParams.contactId;
}).state('contacts.detail.subitem', {
url: '/item/:itemId',
controller: function($stateParams, contactId){
$stateParams.itemId
$uiViewScroll
$uiViewScroll(elem)：会为element添加scroll
和ng-class,ng-if等angular指令绑定一起用
stateName" | isState 等于 $state.is("stateName")
"stateName" | includedByState 等于 $state.includes("stateName")
所有的事件都从$rootscope传播
$stateChangeStart
当状态开始转变时触发
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams, options){ ... })
使用preventDefault()来预防意外事件
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams, options){
event.preventDefault();
$stateNotFound
使用unfoundState对象来捕捉属性
$state.go("lazy.state", {a:1, b:2}, {inherit:false});
$rootScope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams){
console.log(unfoundState.to);
console.log(unfoundState.toParams);
console.log(unfoundState.options);
$stateChangeSuccess
在状态过度完成时触发。
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){ ... })
$stateChangeError
用于catchresolvefunction中异常，并使用event.preventDefault()来预防$UrlRouter重新调回之前的有效url
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error){ ... })
View Load Events
$viewContentLoading
在页面加载时候触发，在DOM描绘之前，$rootscope广播这事件
$rootScope.$on('$viewContentLoading',
function(event, viewConfig){
$viewContentLoaded
视图加载完，在dom描绘之后，这个视图对应$scope触发该事件
$scope.$on('$viewContentLoaded',
function(event){ ... });
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？深入理解AngularJs-Ui-router
Angularjs ui-router - 组件：
$state / $stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的 url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。 ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。 $urlRouter / $urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。 $urlMatcherFactory：将 url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外，它还支持扩展语法，允许一个正则表达式指定占位符，并且能够提取命名参数和查询url的一部分。 $templateFactory - 通过$http / $templateCache来加载模板，供状态配置中使用。
AngularJS不需要任何第三方库，利用自身集成的各个模块便可开发出功能齐全的web应用，不过活跃的AngularJS社区也开发了很多能够最大限度强化web应用的库。本文带读者了解专业开发使用的模块AngularUI中的ui-路由(ui-router)。AngularUI库已经被分成了几个模块，用户可以只选择载入自己感兴趣的模块，而不用载入整个库。
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是&机器状态&来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
安装方式可以选择下载发行版本或者使用Bower（前端包管理器）：
$ bower install angular-ui-router --save
同时也需要将源文件包含到页面中：
&script type=text/javascript src=app/bower_components/angular-ui-router/release/angular-ui-router.js&&/script&
接下来，将UI-Router作为web应用的依赖，注入到主程序：
angular.module('myApp', ['ui.router']);
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
和ngRoute一样，为特定状态指定的模板将会放在
元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'partials/start.html'
上述代码在设置对象上定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。
模板，模板路径，模板Provider
开发者可以在每个视图下使用如下方式来设置模板 - template - HTML字符串，或者是返回HTML字符串的函数 - templateUrl - HTML模板的路径，或者是返回HTML模板路径的函数 - templateProvider - 返回HTML字符串的函数 例如：
$stateProvider.state('home', {
template: '
Hello {{ name }}
和ngRoute相似，开发者可以指定任何已经被注册的控制器，或者在路由里面创建一个作为控制器的函数。但如果没有定义模板，控制器将无效。
预载入Resolve
使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。
预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。
如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。
$stateProvider.state('home', {
resolve: {
//这个函数的值会被直接返回，因为它不是数据保证
person: function() {
name: Ari,
email: ari@fullstack.io
//这个函数为数据保证, 因此它将在控制器被实例化之前载入。
currentDetails: function($http) {
return $http({
method: 'JSONP',
url: '/current_details'
//前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）
facebookId: function($http, currentDetails) {
method: 'GET',
url: '/api/current_user',
email: currentDetails.data.emails[0]
//定义控制器
controller: function($scope, person,
currentDetails, facebookId) {
$scope.person =
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。 该选项与ngRoute的URL相似，但可以被视为对ngRoute主要的升级，在接下来的文章里你便会认可这一点。开发者可以这样指定一个基本的路由。
$stateProvider
.state('inbox', {
url: '/inbox',
template: '
Welcome to your inbox
当用户浏览到/inbox时，该应用将状态改为inbox同时向主ui-view元素中插入模板中的内容(&Welcome to your inbox&)。URL参数有多个选项，因此它非常强大。开发者可以像设置ngRoute一样设置最基本的参数：
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: '
Welcome to your inbox
', controller: function($scope, $stateParams) { $scope.inboxId = $stateParams.inboxId; } });
现在将:inboxId最为URL的第二个部分，例如：访问/inbox/1,那么$stateParams.inboxId就为1（$stateParams为{inboxId:1}）。同时也可使用不同的语法：
url: '/inbox/{inboxId}'
路径必须匹配URL，与ngRoute不同的是，当用户访问到/inbox/时，上面的的路径会被激活，然而当访问到/inbox时不会被激活。路径同时也使开发者可以使用正则表达式来匹配，例如：
// 限定id为6位16进制数字
url: '/inbox/{inboxId:[0-9a-fA-F]{6}}',
// 匹配任何在 `/inbox`后面的url（慎用）并匹配值到indexId
url: '/inbox/{inboxId:.*}'
注意，在路由中目前还无法使用路由组，路由数据预载入器无法预载入。
在路径里也可以指定查询参数：
// /inbox?sort=ascending 将会被匹配
url: '/inbox?sort'
使用url参数可以实现嵌套的路由，有了嵌套路由便可在同一个模板同一个路由实现多层次的ui-view，例如在/inbox中嵌入更多路由：
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: '
Welcome to your inbox
', controller: function($scope, $stateParams) { $scope.inboxId = $stateParams.inboxId; } }) .state('inbox.priority', { url: '/priority', template: '
Your priority inbox
第一个路由是传统的，注意第二个，它是/inbox下的一个子路由：state( . )语法指定了它使子路由。/inbox/1将匹配第一个路由，而/index/1/priority会匹配第二个路由。使用这种语法，在父视图中的ui-view元素将会由第二个路由控制。
Params 路由参数
params选项是一个包含路径中的参数和正则表达式匹配结果的数组。该选项不能和url选项混用！当某状态被激活时，应用将这个数组赋值给$stateParams服务。
Views 视图
开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大，开发者可以在同一个模板中改变和切换不同的视图。
&如果设置了视图选项，则该状态的&template&，&templateUrl&及&templateProvider&将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。
例如有这样的视图：
接下来就可以创建将被分别被插入到上述ui-view的有命名的视图了，每个子视图可以包含自己的模板、控制器和预载入数据。
$stateProvider
.state('inbox', {
'filters': {
template: '
Filter inbox
', controller: function($scope) {} }, 'mailbox': { templateUrl: 'partials/mailbox.html' }, 'priority': { template: '
Priority inbox
', resolve: { facebook: function() { return FB.messages(); } } } } });
abstract 抽象模板
抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。除了需要添加abstract属性外，其他设置和设定一个常规状态是相同的：
$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '
' }) .state('admin.index', { url: '/index', template: '
Admin index
' }) .state('admin.users', { url: '/users', template: '
onEnter,onExit 回调函数
当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作，例如在用户要离开时可以弹出对话框&你确定吗？&以及防止意外操作等。
自定义数据也可以被附加到状态控制对象state configObject.该数据和预载入数据resolve属性相似，但是该数据不会被注入到控制器中，promise也不会被预载入，它的用途是从父状态传递数据到子状态。
和ngRoute相同的是，angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听$scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在$rootScope上触发，因此在任何$scope对象上都可以监听到这些事件。
状态改变事件
$scope.$on('$stateChangeStart',
function(evt, toState, toParams, fromState, fromParams), {
// 如果需要阻止事件的完成
evt.preventDefault();
可以触发的事件包括：
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等。
视图载入事件
视图载入阶段ui-router也提供了一些事件
$viewContentLoading
当视图正在被载入且在DOM被渲染之前触发。
$scope.$on('$viewContentLoading',
function(event, viewConfig){
// 获取任何视图设置的参数，以及一个特殊的属性：viewConfig.targetView
$viewContentLoaded
当视图被载入且DOM已经渲染完成后被触发。
$stateParams 状态参数
在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时：
url: '/inbox/:inboxId/messages/{sorted}?from&to'
//当用户访问者链接时：
'/inbox/123/messages/ascending?from=10&to=20'
$stateParams对象的值为：
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
$urlRouterProvider
和ngRoute一样，开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活，所以$urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用，例如在重定向或者安全验证的时候。在模块的设置函数里便可使用$urlRouterProvider。
该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：
.config(function($urlRouterProvider) {
$urlRouterProvider.when('', '/inbox');
如果传递的是函数，在路径被匹配时该函数会被执行，处理器返回如下3个值中的一个： - falsy，该回应告诉$urlRouter没有匹配到当前url规则，应该尝试匹配新的路径，这样能保证用户访问了正常的路径。 - 字符串，$urlRouter将该字符串当做重定向的路径。 - TRUE 或者 undefined，该回应告诉$urlRouter，url已被处理
otherwise()
和ngRoute的otherwise()函数相似，在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建&默认&路径的好方法。 otherwise()只接受一个参数，要么函数要么字符串，字符串必须为合法的url路由地址，函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
如果想越过任何URL的匹配或者在其他路由前做路由修改，则可以使用rule()函数。在使用它的时候必须返回一个合法的代表路径的字符串。
app.config(function($urlRouterProvider){
$urlRouterProvider.rule(
function($injector, $location) {
return '/index';}