溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了angularJs模塊ui-router之狀態嵌套和視圖嵌套的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
狀態嵌套的方法
狀態可以相互嵌套。有三個嵌套的方法：
使用“點標記法”，例如：.state('contacts.list', {})
使用parent屬性，指定一個父狀態的名稱字符串，例如：parent: 'contacts'
使用parent屬性，指定一個父狀態對象，例如：parent: contacts（contacts 是一個狀態對象）
點標記法
在$stateProvider中可以使用點語法來表示層次結構，下面，contacts.list是contacts的子狀態。
$stateProvider
.state('contacts', {})
.state('contacts.list', {});使用parent屬性，指定一個父狀態的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});基于對象的狀態
如果你不喜歡使用基于字符串的狀態，您還可以使用基于對象的狀態。name屬性將在狀態對象內部設置，在所有的子狀態對象中設置parent屬性為父狀態對象，像下面這樣：
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);在方法調用和屬性比較時可以直接引用狀態對象：
$state.current === states.contacts; $state.includes(states.contacts)
注冊狀態的順序
可以以任何順序和跨模塊注冊狀態，也可以在父狀態存在之前注冊子狀態。一旦父狀態被注冊，將觸發自動排序，然后注冊子狀態。
狀態命名
狀態不允許重名，當使用“點標記法”，parent屬性被推測出來，但這并不會改變狀態的名字；當不使用“點標記法”時，parent屬性必須明確指定，但你仍然不能讓任何兩個狀態有相同的名稱，例如你不能有兩個不同的狀態命名為”edit”，即使他們有不同的父狀態。
嵌套狀態和視圖
當應用程序在一個特定的狀態 - 當一個狀態是活動狀態時 - 其所有的父狀態都將成為活躍狀態。下面例子中，當”contacts.list”是活躍狀態時，”contacts”也將隱性成為活躍狀態，因為他是”contacts.list”的父狀態。
子狀態將把其對應的模板加載到父狀態對應模板的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 --> <h2>My Contacts</h2> <div ui-view></div>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="contact in contacts">
<a>{{contact.name}}</a>
</li>
</ul>子狀態將從父狀態繼承哪些屬性？
子狀態將從父母繼承以下屬性：
通過解決器解決的依賴注入項
自定義的data屬性
除了這些，沒有其他屬性繼承下來（比如controllers、templates和url等）
繼承解決的依賴項
版本 v0.2.0 的新特性
子狀態將從父狀態繼承通過解決器解決的依賴注入項，并且可以重寫（overwrite）依賴項，可以將解決依賴項注入子狀態的控制器和解決函數中。
$stateProvider.state('parent', {
resolve:{
resA: function(){
return {'value': 'A'};
}
},
controller: function($scope, resA){
$scope.resA = resA.value;
}
})
.state('parent.child', {
resolve:{
// 將父狀態的解決依賴項注入到子狀態的解決函數中
resB: function(resA){
return {'value': resA.value + 'B'};
}
},
// 將父狀態的解決依賴項注入到子狀態的控制器中
controller: function($scope, resA, resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}繼承自定義data屬性值
子狀態將從父狀態繼承自定義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 抽象狀態
一個抽象的狀態可以有子狀態但不能顯式激活，它將被隱性激活當其子狀態被激活時。
下面是一些你將可能會使用到抽象狀態的示例：
為所有子狀態預提供一個基url
在父狀態中設置template屬性，子狀態對應的模板將插入到父狀態模板中的ui-view(s)中
通過resolve屬性，為所有子狀態提供解決依賴項
通過data屬性，為所有子狀態或者事件監聽函數提供自定義數據
運行onEnter或onExit函數，這些函數可能在以某種方式修改應用程序。
上面場景的任意組合
請記住：抽象的狀態模板仍然需要<ui-view/>，來讓自己的子狀態模板插入其中。因此，如果您使用抽象狀態只是為了預提供基url、提供解決依賴項或者自定義data、運行onEnter/Exit函數，你任然需要設置template: "<ui-view/>"。
抽象狀態使用示例：
為子狀態提供一個基url，子狀態的url是相對父狀態的
$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
})將子狀態模板插入到父狀態指定的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 --> <h2>Contacts Page</h2> <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 --> <h2>Contacts Page</h2> <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 -->
<h3>{{ person.name }}</h3>感謝你能夠認真閱讀完這篇文章，希望小編分享的“angularJs模塊ui-router之狀態嵌套和視圖嵌套的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
