1. 程式人生 > >angularJs模組ui-router之狀態巢狀和檢視巢狀

angularJs模組ui-router之狀態巢狀和檢視巢狀

狀態巢狀的方法

狀態可以相互巢狀。有三個巢狀的方法:

  1. 使用“點標記法”,例如:.state('contacts.list', {})
  2. 使用parent屬性,指定一個父狀態的名稱字串,例如:parent: 'contacts'
  3. 使用parent屬性,指定一個父狀態物件,例如:parent: contacts(contacts 是一個狀態物件)

點標記法

$stateProvider中可以使用點語法來表示層次結構,下面,contacts.listcontacts的子狀態。

$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屬性
    除了這些,沒有其他屬性繼承下來(比如controllerstemplatesurl等)

繼承解決的依賴項

版本 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屬性,為所有子狀態或者事件監聽函式提供自定義資料
  • 執行onEnteronExit函式,這些函式可能在以某種方式修改應用程式。
  • 上面場景的任意組合

請記住:抽象的狀態模板仍然需要<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>