原文地址:http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/

状态嵌套的方法

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

  1. 使用“点标记法”,例如:.state('contacts.list', {})
  2. 使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
  3. 使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象)

点标记法

$stateProvider中可以使用点语法来表示层次结构,下面,contacts.listcontacts的子状态。

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

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

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

  • 通过解决器解决的依赖注入项
  • 自定义的data属性
    除了这些,没有其他属性继承下来(比如controllerstemplatesurl等)

继承解决的依赖项

版本 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 抽象状态

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

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

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

请记住:抽象的状态模板仍然需要<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>

完整示例:http://plnkr.co/edit/gmtcE2?p=preview组合使用示例

$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}}">{{person.name}}</a>
</li>
</ul>
<!-- contacts.detail.html -->
<h2>{{ person.name }}</h2>

angularJs模块ui-router之状态嵌套和视图嵌套的更多相关文章

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  3. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  4. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  5. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  6. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  7. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  8. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  9. AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

随机推荐

  1. HighGUI图形图像界面初步——滑动条的创建和使用

    ---恢复内容开始--- 滑动条是OpenCV动态调节参数特别好用的一种工具,它依附于窗口而存在.由于OpenCV没有实现按钮功能,所以很多时候,我们可以用仅含0-1的滑动条来实现按钮的按下于弹起效果 ...

  2. 【Unity3D】Unity3D开发《我的世界》之四、创建一个Block

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_04.html 一.新建Block类 我们的Block类用来存储跟Block相关的信 ...

  3. linux内核体系结构

    linux内核第一记   1.linux体系结构   从上图可知,Linux分为:用户空间和内核空间.内核空间和用户空间是程序执行的两种不同的状态,通过系统调用和硬件中断能够完成从用户空间到内核空间的 ...

  4. dojo页面调试出错

    今天,我在调试dojo页面时,出现一些未定义的错误,这些错误只显示在引入的js的那一行,并没有指出是页面哪儿出问题了. 出现的问题一: neteaseTracker is not defined 出现 ...

  5. Linux以GB显示内存大小

    Linux以GB显示内存大小 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -g total used free shared buffers ca ...

  6. IIS易混概念小结

    IIS连接数 常识: 虚拟主机会限制IIS连接数,关于其含义,差不多每个主机供应商都有一套自己的说法,微软也没有给出很明确的解释: 含义: IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫 ...

  7. Spring 之BeanFactory(转)

    BeanFactory是Spring的“心脏”.它就是Spring IoC容器的真面目. Spring使用BeanFactory来实例化.配置和管理Bean.但是,在大多数情况我们并不直接使用Bean ...

  8. 过滤器(Filter)和拦截器(Interceptor)

    之前总是弄混这两者,今天看了几篇文章,小结一下在这里. Filter介绍 Filter可以认为是Servlet的一种"加强版",它主要用于对用户请求进行预处理,也可以对HttpSe ...

  9. [Luogu3527][POI2011]MET-Meteors

    BZOJ权限题!提供洛谷链接! sol 昨晚突发奇想去学了一下整体二分. 这道题应该算是整体二分的板子题吧. 整体二分 首先要求可离线,不然还是安心码数据结构吧. 整体二分简单的来讲,就是时间复杂度可 ...

  10. wget命令企业级应用参数详解

    wget -O /etc/yum.repos.d/CentOS-Base.repo --spider: 爬虫,检查网站是不是好的 -T: 指定超时时间 --tries=2  指定重试的次数 -q   ...