angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套的示例分析

發(fā)布時(shí)間：2021-08-18 11:10:43 來(lái)源：億速云閱讀：101 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

狀態(tài)嵌套的方法

狀態(tài)可以相互嵌套。有三個(gè)嵌套的方法：

使用“點(diǎn)標(biāo)記法”，例如：.state('contacts.list', {})
使用parent屬性，指定一個(gè)父狀態(tài)的名稱(chēng)字符串，例如：parent: 'contacts'
使用parent屬性，指定一個(gè)父狀態(tài)對(duì)象，例如：parent: contacts（contacts 是一個(gè)狀態(tài)對(duì)象）

點(diǎn)標(biāo)記法

在$stateProvider中可以使用點(diǎn)語(yǔ)法來(lái)表示層次結(jié)構(gòu)，下面，contacts.list是contacts的子狀態(tài)。

$stateProvider
 .state('contacts', {})
 .state('contacts.list', {});

使用parent屬性，指定一個(gè)父狀態(tài)的名稱(chēng)字符串

$stateProvider
 .state('contacts', {})
 .state('list', {
  parent: 'contacts'
 });

基于對(duì)象的狀態(tài)

如果你不喜歡使用基于字符串的狀態(tài)，您還可以使用基于對(duì)象的狀態(tài)。name屬性將在狀態(tài)對(duì)象內(nèi)部設(shè)置，在所有的子狀態(tài)對(duì)象中設(shè)置parent屬性為父狀態(tài)對(duì)象，像下面這樣：

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);在方法調(diào)用和屬性比較時(shí)可以直接引用狀態(tài)對(duì)象：

$state.current === states.contacts;
$state.includes(states.contacts)

注冊(cè)狀態(tài)的順序

可以以任何順序和跨模塊注冊(cè)狀態(tài)，也可以在父狀態(tài)存在之前注冊(cè)子狀態(tài)。一旦父狀態(tài)被注冊(cè)，將觸發(fā)自動(dòng)排序，然后注冊(cè)子狀態(tài)。

狀態(tài)命名

狀態(tài)不允許重名，當(dāng)使用“點(diǎn)標(biāo)記法”，parent屬性被推測(cè)出來(lái)，但這并不會(huì)改變狀態(tài)的名字；當(dāng)不使用“點(diǎn)標(biāo)記法”時(shí)，parent屬性必須明確指定，但你仍然不能讓任何兩個(gè)狀態(tài)有相同的名稱(chēng)，例如你不能有兩個(gè)不同的狀態(tài)命名為”edit”，即使他們有不同的父狀態(tài)。

嵌套狀態(tài)和視圖

當(dāng)應(yīng)用程序在一個(gè)特定的狀態(tài) - 當(dāng)一個(gè)狀態(tài)是活動(dòng)狀態(tài)時(shí) - 其所有的父狀態(tài)都將成為活躍狀態(tài)。下面例子中，當(dāng)”contacts.list”是活躍狀態(tài)時(shí)，”contacts”也將隱性成為活躍狀態(tài)，因?yàn)樗恰眂ontacts.list”的父狀態(tài)。

子狀態(tài)將把其對(duì)應(yīng)的模板加載到父狀態(tài)對(duì)應(yīng)模板的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>

子狀態(tài)將從父狀態(tài)繼承哪些屬性？

子狀態(tài)將從父母繼承以下屬性：

通過(guò)解決器解決的依賴(lài)注入項(xiàng)
自定義的data屬性

除了這些，沒(méi)有其他屬性繼承下來(lái)（比如controllers、templates和url等）

繼承解決的依賴(lài)項(xiàng)

版本 v0.2.0 的新特性

子狀態(tài)將從父狀態(tài)繼承通過(guò)解決器解決的依賴(lài)注入項(xiàng)，并且可以重寫(xiě)（overwrite）依賴(lài)項(xiàng)，可以將解決依賴(lài)項(xiàng)注入子狀態(tài)的控制器和解決函數(shù)中。

$stateProvider.state('parent', {
   resolve:{
     resA: function(){
      return {'value': 'A'};
     }
   },
   controller: function($scope, resA){
     $scope.resA = resA.value;
   }
  })
  .state('parent.child', {
   resolve:{
     // 將父狀態(tài)的解決依賴(lài)項(xiàng)注入到子狀態(tài)的解決函數(shù)中
     resB: function(resA){
      return {'value': resA.value + 'B'};
     }
   },
   // 將父狀態(tài)的解決依賴(lài)項(xiàng)注入到子狀態(tài)的控制器中
   controller: function($scope, resA, resB){
     $scope.resA2 = resA.value;
     $scope.resB = resB.value;
   }

繼承自定義data屬性值

子狀態(tài)將從父狀態(tài)繼承自定義data屬性值，并且可以重寫(xiě)（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'被激活時(shí)，輸出 "Hello World!"
  // 'parent.child'被激活時(shí)，輸出 "Hello UI-Router!"
})

Abstract States 抽象狀態(tài)

一個(gè)抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當(dāng)其子狀態(tài)被激活時(shí)。

下面是一些你將可能會(huì)使用到抽象狀態(tài)的示例：

為所有子狀態(tài)預(yù)提供一個(gè)基url
在父狀態(tài)中設(shè)置template屬性，子狀態(tài)對(duì)應(yīng)的模板將插入到父狀態(tài)模板中的ui-view(s)中
通過(guò)resolve屬性，為所有子狀態(tài)提供解決依賴(lài)項(xiàng)
通過(guò)data屬性，為所有子狀態(tài)或者事件監(jiān)聽(tīng)函數(shù)提供自定義數(shù)據(jù)
運(yùn)行onEnter或onExit函數(shù)，這些函數(shù)可能在以某種方式修改應(yīng)用程序。
上面場(chǎng)景的任意組合

請(qǐng)記?。撼橄蟮臓顟B(tài)模板仍然需要<ui-view/>，來(lái)讓自己的子狀態(tài)模板插入其中。因此，如果您使用抽象狀態(tài)只是為了預(yù)提供基url、提供解決依賴(lài)項(xiàng)或者自定義data、運(yùn)行onEnter/Exit函數(shù)，你任然需要設(shè)置template: "<ui-view/>"。

抽象狀態(tài)使用示例：

為子狀態(tài)提供一個(gè)基url，子狀態(tài)的url是相對(duì)父狀態(tài)的

$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
  })

將子狀態(tài)模板插入到父狀態(tài)指定的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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽