学习 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++选择重载函数

    一.函数重载 普通函数重载的关键是参数列表---也称函数特征标.函数参数中有以下情况可以出现重载: 1.  形参个数不同 2.  形参的类型不同 3.  形参的类型和个数都不同 const形参和函数重 ...

  2. 第一册：lesson seventy one.

    原文: He is awful. A:What's Ron Marston like , Pauline? B:He is awful.He telephoned me four times yest ...

  3. c#调用腾讯云API的实例

    //获取时间戳 .net framework /* DateTime dt = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1 ...

  4. javascript html页面中的内容替换

    <script language="javascript"> function ffRed(){  var xsxf = document.getElementById ...

  5. Nginx之OCSP stapling配置

    摘要: 正确地配置OCSP stapling, 可以提高HTTPS性能. 什么是OCSP stapling? OCSP的全称是Online Certificate Status Protocol,即在 ...

  6. spring boot之hello

    自己使用springboot也已经写过一段时间的代码,但是对springboot真正运行的流程还是有点模糊,今天写出自己对springboot的认识,如有不对,还请各位大佬不吝赐教,话不多说,直接上代 ...

  7. js原型链结构与链表结构对比

    在结构上多一个指向自身的constructor构造函数,这就是原型链够简单吧. 利用原型链结构实现继承和向链表中插入节点,有区别吗? 没区别!!

  8. es6 语法 （iterator和for...of循环）

    Iterator遍历器 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据 ...

  9. cf55D. Beautiful numbers(数位dp)

    题意 题目链接 Sol 看到这种题就不难想到是数位dp了. 一个很显然的性质是一个数若能整除所有位数上的数,则一定能整除他们的lcm. 根据这个条件我们不难看出我们只需要记录每个数对所有数的lcm(也 ...

  10. 性能优化1--UI优化

    1.使用系统为我们提供了几个抽象的标签 ①include:重用 include中layout属性指定一个外部布局文件,通过该方式则不需要把这个布局文件在该代码中重复的写一遍了. 若include指定了 ...