欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-03 12:31:09
状态嵌套的方法 状态可以相互嵌套。有三个嵌套的方法： 使用“点标记法”，例如：.state('contacts.list', {}) 使用parent...

状态嵌套的方法

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

  1. 使用“点标记法”，例如：.state('contacts.list', {})
  2. 使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts'
  3. 使用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>

子状态将从父状态继承哪些属性？

子状态将从父母继承以下属性：

  1. 通过解决器解决的依赖注入项
  2. 自定义的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 抽象状态

一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。

下面是一些你将可能会使用到抽象状态的示例：

  1. 为所有子状态预提供一个基url
  2. 在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中
  3. 通过resolve属性，为所有子状态提供解决依赖项
  4. 通过data属性，为所有子状态或者事件监听函数提供自定义数据
  5. 运行onenter或onexit函数，这些函数可能在以某种方式修改应用程序。
  6. 上面场景的任意组合

请记住：抽象的状态模板仍然需要<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}}" rel="external nofollow" >{{person.name}}</a>
  </li>
</ul>
<!-- contacts.detail.html -->
<h2>{{ person.name }}</h2>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 适用于初学者的简易PHP文件上传类

下一篇： PHP加密解密函数详解

推荐阅读