详解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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
jquery对表单操作2
Apr 06 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php获取url参数方法总结
2014/11/13 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python如何提升爬虫效率
2020/09/27 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
技校生自我鉴定范文
2013/09/26 职场文书
大家检讨书5000字
2014/02/03 职场文书
好学生评语大全
2014/05/05 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
健康证明
2015/06/19 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python