原文地址：http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/
狀態嵌套的方法
狀態可以相互嵌套。有三個嵌套的方法：
- 使用“點標記法”，例如：
.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 --> <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>
完整示例：http://plnkr.co/edit/gmtcE2?p=preview組合使用示例
$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>