一、ui-router相對ngRouter的優點

由於angular內建的路由機制那個ng-router存在一些缺陷，不能很好的實現多檢視與巢狀檢視，所以一般都會選擇angularUI提供的ui-router來代替ng-router。

ui-router中的一些指令：

• $urlRouterProvider：服務提供商，用來配置路由重定向
• $stateProvider：服務提供商，用來配置路由
• $state：服務，用來顯示當前路由狀態資訊，以及一些路由方法（如跳轉）

ui.router在建立路由時，會例項化一個state物件，並存儲在states集合裡面；每個state物件都有一個state.name

<a ui-sref="main" ></a>

當點選<a>標籤時，會直接跳到“main”state，而不是迴圈遍歷rules；跳到對應的state後，ui.router會改變hash值，所以會觸發“$locationChangeSuccess”事件，然後執行回撥。

$stateProvider.state('state1',{
   url: '/',
   template: {<p>this is state one</p>}
}).state('state2'
 
,{
   url: '/main',
   template: {<p>this is state2</p>}
})

二、多檢視

ui-router的最大特點是可以實現多檢視與巢狀檢視
所謂多檢視，就是一個頁面中可以顯示多個動態變化的不同區域。

• 在ui-router中，可以給檢視命名（如：ui-view=“state1”）
• 可以再路由配置中根據檢視名字（如：“state1”）來配置不同的模組、控制器等；
• 檢視名是一個字串，不可以包含“@”字元（@在檢視命名中有特殊含義）

多檢視的一個例子：

$stateProvider.state('main.stateOne'
 
,{
    url: '/state:[0-9]',
    view: {
        '@main': {temp;ate: <div>this is stateOne</div>},
        //模板內容會被安插到福路由main模板的匿名檢視下（ui-view）
        '[email protected]': {template: <div>this is stateTwo</div>},
        //模板內容會被安插到跟路由模板名為“state1”的檢視下（ui-wview=“state1”）
        '[email protected]': {template: <p>this is stateThree</p>}
        //模板內容會被安插到福路由（main）模板名為“state3”的檢視下
    }
});

views 用來顯示多個檢視，它的值為： “ 檢視名@ 狀態名 ”
檢視名是“ui-view=‘state1’”中的state1，也可以是空字串或者省略，代表匿名檢視；
狀態名預設情況下是父路由的state.name（即父路由的狀態名），也可以是空字串，表示頂層rootState（最外層的狀態名），還可以是該檢視的任意祖先的state.name；

三、巢狀檢視

所謂巢狀檢視，就是在頁面中某個動態變化的區域中，巢狀這另一個可以動態變化的區域。

<div ui-view="parentView>
    Parent view
    <div ui-view="childView">Child view</div>
</div>