学习 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. HTTP状态码分类

    前言: 我们经常使用浏览器发出http请求,那么对于请求返回的状态,对于开发人员来讲,我们必须要明白其所代表的含义,如: 常见状态吗:400(请求无效),401(需要权限),500(服务器错误), 今 ...

  2. CloudFoundry 之 IBMCloud 项目部署.NETcore例子

    步骤一 通过官网注册IBMCloud账号 https://idaas.iam.ibm.com/idaas/mtfim/sps/authsvc?PolicyId=urn:ibm:security:aut ...

  3. C#线程安全类型

    1.IProducerConsumerCollection (线程安全接口) 此接口的所有实现必须都启用此接口的所有成员,若要从多个线程同时使用. using System; using System ...

  4. git 创建本地分支与远程分支

    早上抽空整理了下git常用操作,偶尔看看加深下印象吧: 如果github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pu ...

  5. 建立uboot,内核的SI工程（1）

    1. 建立Uboot的SI工程1.1首先给uboot打上补丁,然后来生成压缩文件 tar cjf u-boot- 1.2 编译uboot make 100ask24x0_config //使用打好补丁 ...

  6. java_自定义标签运行原理

    一.自定义标签运行原理: 二.文字说明 1.IE->web服务器 2.Web服务器->jsp 3.遇到自定义标签,首先实例化标签所对应的标签处理器类 4.调用setPageContext方 ...

  7. springboot使用hibernate validator校验,Bean Validation校验

    第一个地址:springboot使用hibernate validator校验,Bean Validation校验

  8. Netty实战十之编解码器框架

    编码和解码,或者数据从一种特定协议的格式到另一种格式的转换.这些任务将由通常称为编解码器的组件来处理.Netty提供了多种组件,简化了为了支持广泛的协议而创建自定义的编解码器的过程.例如,如果你正在构 ...

  9. 继承、接口、static、abstract

    继承: 1.用extends来完成继承 2.子类可以继承父类全部的数据域但是只有部分的数据域对子类可见 3.在java中支持单继承 4.单继承和多继承的比较 (1)多继承比单继承能够更好的提高代码的复 ...

  10. WPF中在XAML中实现数据类型转换的两种方法

    熟悉数据绑定的朋友都知道,当我们在Model中获取一个对象的数据,常常需要对其进行数据转换后显示在UI界面上,比如你用bool类型存储了一个人的性别,但是在界面上却需要经过转化后显示为男或女: 今天又 ...