1.背景介绍
UI-Router它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。
2.知识剖析
$stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
$urlRouter /$urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的url占位符规则。
$urlMatcherFactory：将url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外，它还支持扩展语法，允许一个正则表达式指定占位符，并且能够提取命名参数和查询url的一部分。
首先引入源文件，接下来将UI-Router作为web应用的依赖，注入到主程序：
angular.module('myApp',['ui.router'])
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
和ngRoute一样，为特定状态指定的模板将会放在ui-view元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
模板，模板路径，模板Provider
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'Hello {{ name }}';
})
上述代码在设置对象上定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。开发者可以在每个视图下使用如下方式来设置模板template -HTML字符串，或者是返回HTML字符串的函数templateUrl - HTML模板的路径，或者是返回HTML模板路径的函数templateProvider,返回HTML字符串的函数。
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: 'Welcome to修真院',
controller: function($scope, $stateParams) {
$scope.inboxId = $stateParams.inboxId;
}
});
当用户浏览到/index时，该应用将状态改为index同时向主ui-view元素中插入template中的内容。
inboxId为URL的第二个部分，例如：访问/inbox/1,那么$stateParams.inboxId就为1（$stateParams为{inboxId:1}）。同时也可使用不同的语法：url: '/inbox/{inboxId}'
嵌套路由
使用url参数可以实现嵌套的路由，有了嵌套路由便可在同一个模板同一个路由实现多层次的ui-view，例如在/inbox中嵌入更多路由：
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: 'Welcome to修真院
\
Show priority\
\
',
controller: function($scope, $stateParams) {
$scope.inboxId = $stateParams.inboxId;
}
})
.state('inbox.priority', {
url: '/priority',
template: 'Your priority inbox'
});
.state('inbox.priority'是/inbox下的一个子路由：state( . )语法指定了它使子路由。/inbox/1将匹配第一个路由，而/inbox/1/priority会匹配第二个路由。使用这种语法，在父视图中的ui-view元素将会由第二个路由控制。
Views视图
开发者可以在同一个模板中改变和切换不同的视图。如果设置了视图选项，则该状态的‘template’，‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。例如:
ui-view="filters"
ui-view="mailbox"
ui-view="priority"
接下来创建分别被插入到上述ui-view的有命名的视图，每个子视图可以包含自己的模板、控制器和预载入数据。
$stateProvider
.state('inbox', {
views: {
'filters': {
template: 'Filter inbox',
controller: function($scope) {}
},
'mailbox': {
templateUrl: 'Mail inbox'
},
'priority': {
template: 'Priority inbox',
}
}
});
$stateParams状态参数
该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时:
url: '/inbox/:inboxId/messages/{sorted}?from&to'
当用户访问者链接时:
url: '/inbox/123/messages/ascending?from=10&to=20'
$stateParams对象的值为:
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
$urlRouterProvider
开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活，所以$urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用，例如在重定向或者安全验证的时候。在模块的设置函数里便可使$urlRouterProvider。
when()
该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：
.config(function($urlRouterProvider) {
$urlRouterProvider.when('', '/inbox');
});
otherwise()
和ngRoute的otherwise()函数相似，在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建’默认‘路径的好方法。otherwise()只接受一个参数，要么函数要么字符串，字符串必须为合法的url路由地址，函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
// or
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
});
});
rule()
如果想越过任何URL的匹配或者在其他路由前做路由修改，则可以使用rule()函数。在使用它的时候必须返回一个合法的代表路径的字符串。
app.config(function($urlRouterProvider){
$urlRouterProvider.rule(
function($injector, $location) {
return '/index';
});
})
参考文献
深入理解ANGULARUI路由_UI-ROUTER：
www.cnblogs.com/hughtxp/p/3965916.html
PPT: http://chowhengguang.oschina.io/demo/PPT10.html#/
如何使用ui-router？_腾讯视频
网友评论