学习 ui-router 资料整理

对于Angular内置的路由是单路由视图，ui-router可以实现路由嵌套。后面将会有一个案例概括前面所有资料整理

学习 ui-router - 管理状态  http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/

学习 ui-router - 状态嵌套和视图嵌套  http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/
学习 ui-router - 多个命名的视图  http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/

ui-router 多个命名的视图

<!-- index.html (root unnamed template) -->

<body ng-app>

<div ui-view></div> <!-- contacts.html plugs in here -->

<div ui-view="status"></div>

</body>

<!-- contacts.html -->

<h1>My Contacts</h1>

<div ui-view></div>

<div ui-view="detail"></div>

<!-- contacts.detail.html -->

<h1>Contacts Details</h1>

<div ui-view="info"></div>　

ui-router 相对命名与绝对命名 写法

$stateProvider

  .state('contacts', {

    // 根状态，对应的父模板则是index.html

    // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中

    templateUrl: 'contacts.html'

  })

  .state('contacts.detail', {

    views: {

        // 嵌套状态，对应的父模板是 contacts.html

        // 相对命名

        // contacts.html 中 <div ui-view='detail'/> 将对应下面

        "detail" : { },   

        // 相对命名

        // 对应 contacts.html 中的未命名 ui-view <div ui-view/>

        "" : { },

        // 绝对命名

        // 对应 contacts.detail.html 中 <div ui-view='info'/>

        "info@contacts.detail" : { }

        // 绝对命名

        // 对应 contacts.html 中 <div ui-view='detail'/>

        "detail@contacts" : { }

        // 绝对命名

        // 对应 contacts.html 中的未命名 ui-view <div ui-view/>

        "@contacts" : { }

        // 绝对命名

        // 对应 index.html 中 <div ui-view='status'/>

        "status@" : { }

        // 绝对命名

        // 对应 index.html 中 <div ui-view/>

        "@" : { }

  });

ui-router  实现视图与路由深层嵌套综合案例

源代码下载请点击

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6509814.html

关于作者：专注于前端开发

本文版权归作者所有,转载请标明原文链接

推荐学习AngularJS Routing Using UI-Router  https://scotch.io/tutorials/angular-routing-using-ui-router

Angular中ui-router实现路由嵌套案例的更多相关文章

  1. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  2. angular中ui calendar的一些使用心得

    ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...

  3. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  4. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  5. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

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

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

  7. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  8. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  9. 060——VUE中vue-router之路由嵌套在文章系统中的使用方法：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C#与C++数据类型比较及结构体转换[整理]

    //c++:HANDLE(void   *)                          ----    c#:System.IntPtr//c++:Byte(unsigned   char)  ...

  2. Centos 7.6配置nginx反向代理负载均衡集群

    一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76    nginx负载均衡器 192.168.2.82    web ...

  3. WPF，强制捕获鼠标事件，鼠标移出控件外依然可以执行强制捕获的鼠标事件

    在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...

  4. linux系统mysql主从配置

    一.原理 mysql主从配置的流程大体如图: 1)master会将变动记录到二进制日志里面: 2)master有一个I/O线程将二进制日志发送到slave; 3) slave有一个I/O线程把mast ...

  5. Hibernate入门(七)一对多入门案例

    一对多 场景模拟:用户(一)对订单(多) 1.建表 创建客户表,字段有:客户id,客户姓名,客户性别,客户年龄,客户年纪,客户电话. 创建订单表,字段有:订单编号,明细编号,客户编号(外键) DROP ...

  6. thinkphp简洁、美观、靠谱的分页类

    我们要实现如下图分页效果 这个分页类是在thinkphp框架内置的分页类的基础上修改而来:原分页类的一些设计,在实际运用中感觉不是很方便: 1.只有一页内容时不显示分页: 2.原分页类在当前页是第一页 ...

  7. ES6中字符串扩展

    ES6中字符串扩展 ① for...of 遍历字符串: 例如: for(let codePoint of 'string'){ console.log(codePoint) } 运行结果: ②  in ...

  8. K8S 调度器，预选策略，优选函数

    Kubernetes Scheduler 提供的调度流程分三步: 预选策略(predicate) 遍历nodelist,选择出符合要求的候选节点,Kubernetes内置了多种预选规则供用户选择. 优 ...

  9. 小tips：JS语法之标签（label）

    JavaScript语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下. label: statement 标签可以是任意的标识符,但是不能是保留字,语句 ...

  10. 2018-11-21 手工翻译Vue.js源码第一步:14个文件重命名

    背景 对现有开源项目的代码进行翻译(文件名/命名/注释) · Issue #107 · program-in-chinese/overview 简单地说, 通过翻译源码, 提高项目代码可读性(对于母语 ...