詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
狀態(tài)嵌套的方法
狀態(tài)可以相互嵌套。有三個(gè)嵌套的方法：
- 使用“點(diǎn)標(biāo)記法”，例如：.state('contacts.list', {})
- 使用parent屬性，指定一個(gè)父狀態(tài)的名稱字符串，例如：parent: 'contacts'
- 使用parent屬性，指定一個(gè)父狀態(tài)對(duì)象，例如：parent: contacts（contacts 是一個(gè)狀態(tài)對(duì)象）
點(diǎn)標(biāo)記法
在$stateProvider中可以使用點(diǎn)語(yǔ)法來(lái)表示層次結(jié)構(gòu)，下面，contacts.list是contacts的子狀態(tài)。
$stateProvider
.state('contacts', {})
.state('contacts.list', {});
使用parent屬性，指定一個(gè)父狀態(tài)的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});
基于對(duì)象的狀態(tài)
如果你不喜歡使用基于字符串的狀態(tài)，您還可以使用基于對(duì)象的狀態(tài)。name屬性將在狀態(tài)對(duì)象內(nèi)部設(shè)置，在所有的子狀態(tài)對(duì)象中設(shè)置parent屬性為父狀態(tài)對(duì)象，像下面這樣：
var contacts = {
name: 'contacts', //mandatory
templateUrl: 'contacts.html'
}
var contactsList = {
name: 'list', //mandatory
parent: contacts, //mandatory
templateUrl: 'contacts.list.html'
}
$stateProvider
.state(contacts)
.state(contactsList)
$state.transitionTo(states.contacts);在方法調(diào)用和屬性比較時(shí)可以直接引用狀態(tài)對(duì)象：
$state.current === states.contacts; $state.includes(states.contacts)
注冊(cè)狀態(tài)的順序
可以以任何順序和跨模塊注冊(cè)狀態(tài)，也可以在父狀態(tài)存在之前注冊(cè)子狀態(tài)。一旦父狀態(tài)被注冊(cè)，將觸發(fā)自動(dòng)排序，然后注冊(cè)子狀態(tài)。
狀態(tài)命名
狀態(tài)不允許重名，當(dāng)使用“點(diǎn)標(biāo)記法”，parent屬性被推測(cè)出來(lái)，但這并不會(huì)改變狀態(tài)的名字；當(dāng)不使用“點(diǎn)標(biāo)記法”時(shí)，parent屬性必須明確指定，但你仍然不能讓任何兩個(gè)狀態(tài)有相同的名稱，例如你不能有兩個(gè)不同的狀態(tài)命名為”edit”，即使他們有不同的父狀態(tài)。
嵌套狀態(tài)和視圖
當(dāng)應(yīng)用程序在一個(gè)特定的狀態(tài) - 當(dāng)一個(gè)狀態(tài)是活動(dòng)狀態(tài)時(shí) - 其所有的父狀態(tài)都將成為活躍狀態(tài)。下面例子中，當(dāng)”contacts.list”是活躍狀態(tài)時(shí)，”contacts”也將隱性成為活躍狀態(tài)，因?yàn)樗恰眂ontacts.list”的父狀態(tài)。
子狀態(tài)將把其對(duì)應(yīng)的模板加載到父狀態(tài)對(duì)應(yīng)模板的ui-view中。
$stateProvider
.state('contacts', {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
}
})
.state('contacts.list', {
templateUrl: 'contacts.list.html'
});
function MainCtrl($state){
$state.transitionTo('contacts.list');
}
<!-- index.html --> <body ng-controller="MainCtrl"> <div ui-view></div> </body>
<!-- contacts.html --> <h1>My Contacts</h1> <div ui-view></div>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="contact in contacts">
<a>{{contact.name}}</a>
</li>
</ul>
子狀態(tài)將從父狀態(tài)繼承哪些屬性？
子狀態(tài)將從父母繼承以下屬性：
- 通過(guò)解決器解決的依賴注入項(xiàng)
- 自定義的data屬性
除了這些，沒(méi)有其他屬性繼承下來(lái)（比如controllers、templates和url等）
繼承解決的依賴項(xiàng)
版本 v0.2.0 的新特性
子狀態(tài)將從父狀態(tài)繼承通過(guò)解決器解決的依賴注入項(xiàng)，并且可以重寫(xiě)（overwrite）依賴項(xiàng)，可以將解決依賴項(xiàng)注入子狀態(tài)的控制器和解決函數(shù)中。
$stateProvider.state('parent', {
resolve:{
resA: function(){
return {'value': 'A'};
}
},
controller: function($scope, resA){
$scope.resA = resA.value;
}
})
.state('parent.child', {
resolve:{
// 將父狀態(tài)的解決依賴項(xiàng)注入到子狀態(tài)的解決函數(shù)中
resB: function(resA){
return {'value': resA.value + 'B'};
}
},
// 將父狀態(tài)的解決依賴項(xiàng)注入到子狀態(tài)的控制器中
controller: function($scope, resA, resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}
繼承自定義data屬性值
子狀態(tài)將從父狀態(tài)繼承自定義data屬性值，并且可以重寫(xiě)（overwrite）data屬性值
$stateProvider.state('parent', {
data:{
customData1: "Hello",
customData2: "World!"
}
})
.state('parent.child', {
data:{
// customData1 inherited from 'parent'
// 覆蓋了 customData2 的值
customData2: "UI-Router!"
}
});
$rootScope.$on('$stateChangeStart', function(event, toState){
var greeting = toState.data.customData1 + " " + toState.data.customData2;
console.log(greeting);
// 'parent'被激活時(shí)，輸出 "Hello World!"
// 'parent.child'被激活時(shí)，輸出 "Hello UI-Router!"
})
Abstract States 抽象狀態(tài)
一個(gè)抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當(dāng)其子狀態(tài)被激活時(shí)。
下面是一些你將可能會(huì)使用到抽象狀態(tài)的示例：
- 為所有子狀態(tài)預(yù)提供一個(gè)基url
- 在父狀態(tài)中設(shè)置template屬性，子狀態(tài)對(duì)應(yīng)的模板將插入到父狀態(tài)模板中的ui-view(s)中
- 通過(guò)resolve屬性，為所有子狀態(tài)提供解決依賴項(xiàng)
- 通過(guò)data屬性，為所有子狀態(tài)或者事件監(jiān)聽(tīng)函數(shù)提供自定義數(shù)據(jù)
- 運(yùn)行onEnter或onExit函數(shù)，這些函數(shù)可能在以某種方式修改應(yīng)用程序。
- 上面場(chǎng)景的任意組合
請(qǐng)記?。撼橄蟮臓顟B(tài)模板仍然需要<ui-view/>，來(lái)讓自己的子狀態(tài)模板插入其中。因此，如果您使用抽象狀態(tài)只是為了預(yù)提供基url、提供解決依賴項(xiàng)或者自定義data、運(yùn)行onEnter/Exit函數(shù)，你任然需要設(shè)置template: "<ui-view/>"。
抽象狀態(tài)使用示例：
為子狀態(tài)提供一個(gè)基url，子狀態(tài)的url是相對(duì)父狀態(tài)的
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
// Note: abstract still needs a ui-view for its children to populate.
// You can simply add it inline here.
template: '<ui-view/>'
})
.state('contacts.list', {
// url will become '/contacts/list'
url: '/list'
//...more
})
.state('contacts.detail', {
// url will become '/contacts/detail'
url: '/detail',
//...more
})
將子狀態(tài)模板插入到父狀態(tài)指定的ui-view中
$stateProvider
.state('contacts', {
abstract: true,
templateURL: 'contacts.html'
)
.state('contacts.list', {
// loaded into ui-view of parent's template
templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
// loaded into ui-view of parent's template
templateUrl: 'contacts.detail.html'
})
<!-- contacts.html --> <h1>Contacts Page</h1> <div ui-view></div>
完整示例
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
}
})
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
url: '/:id',
templateUrl: 'contacts.detail.html',
controller: function($scope, $stateParams){
$scope.person = $scope.contacts[$stateParams.id];
}
})
<!-- contacts.html --> <h1>Contacts Page</h1> <div ui-view></div>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="person in contacts">
<a ng-href="#/contacts/{{person.id}}" rel="external nofollow" >{{person.name}}</a>
</li>
</ul>
<!-- contacts.detail.html -->
<h2>{{ person.name }}</h2>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解angularjs 關(guān)于ui-router分層使用
- AngularJS路由Ui-router模塊用法示例
- 詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
- 詳解AngularJs ui-router 路由的簡(jiǎn)單介紹
- angularjs ui-router中路由的二級(jí)嵌套
- AngularJS ui-router (嵌套路由)實(shí)例
- 淺析angularJS中的ui-router和ng-grid模塊
- Angularjs中UI Router的使用方法
- Angularjs中UI Router全攻略
- AngularJS 使用 UI Router 實(shí)現(xiàn)表單向?qū)?/a>
- 深究AngularJS之ui-router詳解
相關(guān)文章
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了AngularJS中transclude用法,詳細(xì)分析了transclude的具體功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
本篇文章主要介紹了詳解AngularJS ng-class樣式切換，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
詳解在Angular項(xiàng)目中添加插件ng-bootstrap
這篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加插件 ng-bootstrap，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之組件中DOM操作的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)看看吧。2017-05-05
詳解angular用$sce服務(wù)來(lái)過(guò)濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來(lái)過(guò)濾HTML標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例
本篇文章主要介紹了在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
在本章中將討論事件綁定在Angular7中的工作方式,當(dāng)用戶以鍵盤移動(dòng),鼠標(biāo)單擊或鼠標(biāo)懸停的形式與應(yīng)用程序交互時(shí),它將生成一個(gè)事件,需要處理這些事件以執(zhí)行某種操作,考慮一個(gè)示例以更好地理解這一點(diǎn)2023-12-12
這篇文章主要介紹了AngularJS 過(guò)濾器（自帶和自建）詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09