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' } varcontactsList = { 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 --> <h1>My Contacts</h1> <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 --> <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}}">{{person.name}}</a> </li> </ul>
<!-- contacts.detail.html --> <h2>{{ person.name }}</h2>