详解angularJs模块ui-router之状态嵌套和视图嵌套

状态嵌套的方法

状态可以相互嵌套。有三个嵌套的方法：

1. 使用“点标记法”，例如：.state('contacts.list',{})
2. 使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts'
3. 使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象）

点标记法

在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。

rush:js;"> $stateProvider .state('contacts',{}) .state('contacts.list',{});

使用parent属性，指定一个父状态的名称字符串

rush:js;"> $stateProvider .state('contacts',{}) .state('list',{ parent: 'contacts' });

基于对象的状态

如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。name属性将在状态对象内部设置，在所有的子状态对象中设置parent属性为父状态对象，像下面这样：

rush:js;"> 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);在方法调用和属性比较时可以直接引用状态对象：

rush:js;"> $state.current === states.contacts; $state.includes(states.contacts)

注册状态的顺序

可以以任何顺序和跨模块注册状态，也可以在父状态存在之前注册子状态。一旦父状态被注册，将触发自动排序，然后注册子状态。

状态命名

状态不允许重名，当使用“点标记法”，parent属性被推测出来，但这并不会改变状态的名字；当不使用“点标记法”时，parent属性必须明确指定，但你仍然不能让任何两个状态有相同的名称，例如你不能有两个不同的状态命名为”edit”，即使他们有不同的父状态。

嵌套状态和视图

当应用程序在一个特定的状态 - 当一个状态是活动状态时 - 其所有的父状态都将成为活跃状态。下面例子中，当”contacts.list”是活跃状态时，”contacts”也将隐性成为活跃状态，因为他是”contacts.list”的父状态。

子状态将把其对应的模板加载到父状态对应模板的ui-view中。

rush:js;"> $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');
}

rush:xhtml;">