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


Posted in Javascript onApril 28, 2017

状态嵌套的方法

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

  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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
简单分析javascript中的函数
Sep 10 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
实例详解带参数的 npm script
May 28 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 #Javascript
d3.js实现立体柱图的方法详解
Apr 28 #Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 #Javascript
vue调用高德地图实例代码
Apr 28 #Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 #Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 #Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 #Javascript
You might like
PHP 危险函数全解析
2009/09/09 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
机械设计制造专业个人求职信
2013/09/25 职场文书
理财学专业自荐书
2014/06/28 职场文书
关键在于落实心得体会
2014/09/03 职场文书
雷锋观后感
2015/06/10 职场文书
消防宣传标语大全
2015/08/03 职场文书
安全生产协议书
2016/03/22 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
KVM基础命令详解
2022/04/30 Servers