詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
狀態(tài)嵌套的方法
狀態(tài)可以相互嵌套。有三個嵌套的方法：
- 使用“點標記法”，例如：.state('contacts.list', {})
- 使用parent屬性，指定一個父狀態(tài)的名稱字符串，例如：parent: 'contacts'
- 使用parent屬性，指定一個父狀態(tài)對象，例如：parent: contacts（contacts 是一個狀態(tài)對象）
點標記法
在$stateProvider中可以使用點語法來表示層次結(jié)構(gòu)，下面，contacts.list是contacts的子狀態(tài)。
$stateProvider
.state('contacts', {})
.state('contacts.list', {});
使用parent屬性，指定一個父狀態(tài)的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});
基于對象的狀態(tài)
如果你不喜歡使用基于字符串的狀態(tài)，您還可以使用基于對象的狀態(tài)。name屬性將在狀態(tài)對象內(nèi)部設(shè)置，在所有的子狀態(tài)對象中設(shè)置parent屬性為父狀態(tài)對象，像下面這樣：
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)用和屬性比較時可以直接引用狀態(tài)對象：
$state.current === states.contacts; $state.includes(states.contacts)
注冊狀態(tài)的順序
可以以任何順序和跨模塊注冊狀態(tài)，也可以在父狀態(tài)存在之前注冊子狀態(tài)。一旦父狀態(tài)被注冊，將觸發(fā)自動排序，然后注冊子狀態(tài)。
狀態(tài)命名
狀態(tài)不允許重名，當使用“點標記法”，parent屬性被推測出來，但這并不會改變狀態(tài)的名字；當不使用“點標記法”時，parent屬性必須明確指定，但你仍然不能讓任何兩個狀態(tài)有相同的名稱，例如你不能有兩個不同的狀態(tài)命名為”edit”，即使他們有不同的父狀態(tài)。
嵌套狀態(tài)和視圖
當應(yīng)用程序在一個特定的狀態(tài) - 當一個狀態(tài)是活動狀態(tài)時 - 其所有的父狀態(tài)都將成為活躍狀態(tài)。下面例子中，當”contacts.list”是活躍狀態(tài)時，”contacts”也將隱性成為活躍狀態(tài)，因為他是”contacts.list”的父狀態(tài)。
子狀態(tài)將把其對應(yīng)的模板加載到父狀態(tài)對應(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)將從父母繼承以下屬性：
- 通過解決器解決的依賴注入項
- 自定義的data屬性
除了這些，沒有其他屬性繼承下來（比如controllers、templates和url等）
繼承解決的依賴項
版本 v0.2.0 的新特性
子狀態(tài)將從父狀態(tài)繼承通過解決器解決的依賴注入項，并且可以重寫（overwrite）依賴項，可以將解決依賴項注入子狀態(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)的解決依賴項注入到子狀態(tài)的解決函數(shù)中
resB: function(resA){
return {'value': resA.value + 'B'};
}
},
// 將父狀態(tài)的解決依賴項注入到子狀態(tài)的控制器中
controller: function($scope, resA, resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}
繼承自定義data屬性值
子狀態(tài)將從父狀態(tài)繼承自定義data屬性值，并且可以重寫（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'被激活時，輸出 "Hello World!"
// 'parent.child'被激活時，輸出 "Hello UI-Router!"
})
Abstract States 抽象狀態(tài)
一個抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當其子狀態(tài)被激活時。
下面是一些你將可能會使用到抽象狀態(tài)的示例：
- 為所有子狀態(tài)預(yù)提供一個基url
- 在父狀態(tài)中設(shè)置template屬性，子狀態(tài)對應(yīng)的模板將插入到父狀態(tài)模板中的ui-view(s)中
- 通過resolve屬性，為所有子狀態(tài)提供解決依賴項
- 通過data屬性，為所有子狀態(tài)或者事件監(jiān)聽函數(shù)提供自定義數(shù)據(jù)
- 運行onEnter或onExit函數(shù)，這些函數(shù)可能在以某種方式修改應(yīng)用程序。
- 上面場景的任意組合
請記住：抽象的狀態(tài)模板仍然需要<ui-view/>，來讓自己的子狀態(tài)模板插入其中。因此，如果您使用抽象狀態(tài)只是為了預(yù)提供基url、提供解決依賴項或者自定義data、運行onEnter/Exit函數(shù)，你任然需要設(shè)置template: "<ui-view/>"。
抽象狀態(tài)使用示例：
為子狀態(tài)提供一個基url，子狀態(tài)的url是相對父狀態(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解angularjs 關(guān)于ui-router分層使用
- AngularJS路由Ui-router模塊用法示例
- 詳解AngularJS1.6版本中ui-router路由中/#!/的解決方法
- 詳解AngularJs ui-router 路由的簡單介紹
- angularjs ui-router中路由的二級嵌套
- AngularJS ui-router (嵌套路由)實例
- 淺析angularJS中的ui-router和ng-grid模塊
- Angularjs中UI Router的使用方法
- Angularjs中UI Router全攻略
- AngularJS 使用 UI Router 實現(xiàn)表單向?qū)?/a>
- 深究AngularJS之ui-router詳解
相關(guān)文章
這篇文章主要介紹了使用Angular CLI從藍本生成代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹AngularJs 指令的知識，這里整理了詳細的資料和簡單示例代碼幫助大家學(xué)習(xí)理解應(yīng)用，有興趣的小伙伴可以參考下2016-09-09
這篇文章分別給大家介紹了AngularJS實現(xiàn)標簽頁的兩種方式，一種是通過普通指令實現(xiàn)標簽頁，另外一種是通過自定義指令實現(xiàn)的標簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
詳解Angular數(shù)據(jù)綁定及其實現(xiàn)方式
數(shù)據(jù)綁定是將應(yīng)用程序UI或用戶界面綁定到模型的機制。使用數(shù)據(jù)綁定，用戶將能夠使用瀏覽器來操縱網(wǎng)站上存在的元素。2021-05-05
AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結(jié)合實例形式分析了AngularJS二維數(shù)組元素遍歷的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
本文主要介紹 AngularJS控制器,這里對 AngularJS控制器的知識詳細講解,并提供實例代碼有需要的小伙伴可以參考下2016-07-07
本文主要介紹AngularJS ng-style 指令,這里對ng-style 指令做了詳細的基礎(chǔ)資料整理，并附有代碼示例，有需要的朋友可以參考下2016-08-08
Facade Service暴露commands簡化代碼邏輯提高可訪問性組合性
在 Angular 應(yīng)用開發(fā)中,使用 Facade Service 暴露 commands（命令）以及訂閱這些 commands 是一個常見的設(shè)計模式,本文將詳細介紹在 Facade Service 中如何實現(xiàn)這一目標,并深入探討相關(guān)細節(jié),以及通過實際示例進行說明2023-10-10
這篇文章主要介紹了AngularJS的Routing路由的定義與使用,講解了when()和otherwise()兩個相關(guān)的常用方法,需要的朋友可以參考下2016-03-03
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04