Angular(三)路由ui-router
阿新 • • 發佈:2019-01-08
一、ui-router相對ngRouter的優點
由於angular內建的路由機制那個ng-router存在一些缺陷,不能很好的實現多檢視與巢狀檢視,所以一般都會選擇angularUI提供的ui-router來代替ng-router。
ui-router中的一些指令:
- $urlRouterProvider:服務提供商,用來配置路由重定向
- $stateProvider:服務提供商,用來配置路由
- $state:服務,用來顯示當前路由狀態資訊,以及一些路由方法(如跳轉)
ui.router在建立路由時,會例項化一個state物件,並存儲在states集合裡面;每個state物件都有一個state.name
ui.router提供了一個指令“ui-sref”來解決迴圈遍歷rules的問題
<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>