1.背景介紹
UI-Router它是一個(gè)讓開發(fā)者能夠根據(jù)URL狀態(tài)或者說是'機(jī)器狀態(tài)'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統(tǒng)AngularJS應(yīng)用實(shí)用的方式）。該模塊為開發(fā)者提供了很多視圖（view）額外的控制于樟。開發(fā)者可以創(chuàng)建嵌套分層的視圖艘希、在同一個(gè)頁面使用多個(gè)視圖硼身、讓多個(gè)視圖控制某個(gè)視圖等更多的功能鉴未。
2.知識剖析
$stateProvider：管理狀態(tài)定義、當(dāng)前狀態(tài)和狀態(tài)轉(zhuǎn)換鸠姨。包含觸發(fā)狀態(tài)轉(zhuǎn)換的事件和回調(diào)函數(shù)铜秆，異步解決目標(biāo)狀態(tài)的任何依賴項(xiàng)，更新$location到當(dāng)前狀態(tài)讶迁。由于狀態(tài)包含關(guān)聯(lián)的url连茧，通過$urlRouterProvider生成一個(gè)路由規(guī)則來執(zhí)行轉(zhuǎn)換的狀態(tài)。
ui-view指示器：渲染狀態(tài)中定義的視圖巍糯，是狀態(tài)中定義的視圖的一個(gè)占位符啸驯。
$urlRouter /$urlRouterProvider：管理了一套路由規(guī)則列表來處理當(dāng)$location發(fā)生變化時(shí)如何跳轉(zhuǎn)。最低級的方式是祟峦，規(guī)則可以是任意函數(shù)罚斗，來檢查$location，并在處理完成時(shí)候返回true宅楞。支持正則表達(dá)式規(guī)則和通過$urlMatcherFactory編譯的UrlMatcher對象的url占位符規(guī)則针姿。
$urlMatcherFactory：將url和占位符編譯為UrlMatcher對象。除了$routeProvider支持的占位符語法之外厌衙，它還支持?jǐn)U展語法距淫，允許一個(gè)正則表達(dá)式指定占位符，并且能夠提取命名參數(shù)和查詢url的一部分婶希。
首先引入源文件榕暇，接下來將UI-Router作為web應(yīng)用的依賴，注入到主程序：
angular.module('myApp',['ui.router'])
與集成的ngRoute服務(wù)不同的是喻杈，UI-Router可以將視圖嵌套彤枢，因?yàn)樗诘氖遣僮鳡顟B(tài)而僅非URL。與傳統(tǒng)做法使用ng-view不同的是筒饰，在ngRoute里需要使用ui-view服務(wù)缴啡。當(dāng)在ui-router中處理路由和狀態(tài)時(shí)，開發(fā)者的重心是當(dāng)前的狀態(tài)是什么以及在哪一個(gè)頁面里龄砰。
和ngRoute一樣盟猖，為特定狀態(tài)指定的模板將會(huì)放在ui-view元素中。在這些模板中也可以包含自己的ui-view,這就是在同一個(gè)路由下實(shí)現(xiàn)嵌套視圖的方法换棚。要定義一個(gè)路由式镐，與傳統(tǒng)的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider固蚤。
模板娘汞，模板路徑，模板Provider
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'Hello {{ name }}';
})
上述代碼在設(shè)置對象上定義了一個(gè)叫start的狀態(tài)夕玩。設(shè)置對象stateConfig和路由設(shè)置對象的選項(xiàng)是非常相似的你弦。開發(fā)者可以在每個(gè)視圖下使用如下方式來設(shè)置模板template -HTML字符串惊豺，或者是返回HTML字符串的函數(shù)templateUrl - HTML模板的路徑，或者是返回HTML模板路徑的函數(shù)templateProvider,返回HTML字符串的函數(shù)禽作。
url選項(xiàng)將會(huì)為該應(yīng)用的狀態(tài)指定一個(gè)URL基于用戶瀏覽該應(yīng)用所在的狀態(tài)尸昧。這樣當(dāng)在瀏覽該應(yīng)用的時(shí)候便能實(shí)現(xiàn)深度鏈接的效果。
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: 'Welcome to修真院',
controller: function($scope, $stateParams) {
$scope.inboxId = $stateParams.inboxId;
}
});
當(dāng)用戶瀏覽到/index時(shí)旷偿，該應(yīng)用將狀態(tài)改為index同時(shí)向主ui-view元素中插入template中的內(nèi)容烹俗。
inboxId為URL的第二個(gè)部分，例如：訪問/inbox/1,那么$stateParams.inboxId就為1（$stateParams為{inboxId:1}）萍程。同時(shí)也可使用不同的語法：url: '/inbox/{inboxId}'
嵌套路由
使用url參數(shù)可以實(shí)現(xiàn)嵌套的路由幢妄，有了嵌套路由便可在同一個(gè)模板同一個(gè)路由實(shí)現(xiàn)多層次的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下的一個(gè)子路由：state( . )語法指定了它使子路由茫负。/inbox/1將匹配第一個(gè)路由蕉鸳，而/inbox/1/priority會(huì)匹配第二個(gè)路由。使用這種語法忍法，在父視圖中的ui-view元素將會(huì)由第二個(gè)路由控制潮尝。
Views視圖
開發(fā)者可以在同一個(gè)模板中改變和切換不同的視圖。如果設(shè)置了視圖選項(xiàng)缔赠，則該狀態(tài)的‘template’衍锚，‘templateUrl’及‘templateProvider’將被忽略友题。如果想在路由里包含父級模板嗤堰，就需要?jiǎng)?chuàng)建一個(gè)包含模板的抽象模板。例如:
ui-view="filters"
ui-view="mailbox"
ui-view="priority"
接下來創(chuàng)建分別被插入到上述ui-view的有命名的視圖度宦，每個(gè)子視圖可以包含自己的模板踢匣、控制器和預(yù)載入數(shù)據(jù)。
$stateProvider
.state('inbox', {
views: {
'filters': {
template: 'Filter inbox',
controller: function($scope) {}
},
'mailbox': {
templateUrl: 'Mail inbox'
},
'priority': {
template: 'Priority inbox',
}
}
});
$stateParams狀態(tài)參數(shù)
該服務(wù)的作用是處理url的不同部分戈抄。例如离唬，當(dāng)上述的inbox狀態(tài)是這樣時(shí):
url: '/inbox/:inboxId/messages/{sorted}?from&to'
當(dāng)用戶訪問者鏈接時(shí):
url: '/inbox/123/messages/ascending?from=10&to=20'
$stateParams對象的值為:
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
$urlRouterProvider
開發(fā)者可以在該對象上設(shè)定特定的URL被激活時(shí)做什么的規(guī)則。由于設(shè)定好的狀態(tài)在特定的url被訪問是會(huì)自動(dòng)激活划鸽，所以$urlRouterProvider沒有必要用來管理激活和載入狀態(tài)输莺。但當(dāng)需要管理哪些被發(fā)生在當(dāng)前狀態(tài)之外的作用域scope時(shí)它會(huì)非常有用，例如在重定向或者安全驗(yàn)證的時(shí)候裸诽。在模塊的設(shè)置函數(shù)里便可使$urlRouterProvider嫂用。
when()
該函數(shù)需要兩個(gè)參數(shù)：1.當(dāng)前的路徑，2.需要重定向到的路徑（或者是需要在路徑被訪問是運(yùn)行的函數(shù)）丈冬。設(shè)置重定向前需要為$urlRouterProvider設(shè)置when函數(shù)來接受一個(gè)字符串嘱函。例如，當(dāng)希望重定向一個(gè)空的路由到/inbox：
.config(function($urlRouterProvider) {
$urlRouterProvider.when('', '/inbox');
});
otherwise()
和ngRoute的otherwise()函數(shù)相似埂蕊，在用戶提交的路徑?jīng)]有被定義的時(shí)候它將重定向到指定的頁面往弓。這是個(gè)創(chuàng)建’默認(rèn)‘路徑的好方法疏唾。otherwise()只接受一個(gè)參數(shù)，要么函數(shù)要么字符串函似，字符串必須為合法的url路由地址槐脏，函數(shù)則會(huì)在沒有任何路徑被匹配的時(shí)候被運(yùn)行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
// or
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
});
});
rule()
如果想越過任何URL的匹配或者在其他路由前做路由修改撇寞，則可以使用rule()函數(shù)准给。在使用它的時(shí)候必須返回一個(gè)合法的代表路徑的字符串。
app.config(function($urlRouterProvider){
$urlRouterProvider.rule(
function($injector, $location) {
return '/index';
});
})
參考文獻(xiàn)
深入理解ANGULARUI路由_UI-ROUTER：
www.cnblogs.com/hughtxp/p/3965916.html
PPT: ? ?http://chowhengguang.oschina.io/demo/PPT10.html#/
