详解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 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
node.js中的console用法总结
2014/12/15 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
详解django中Template语言
2020/02/22 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
什么是属性访问器
2015/10/26 面试题
实习教师自我鉴定
2013/12/09 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
实习生个人总结范文
2015/02/28 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript