学习 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. 将Python脚本打包成可执行文件

    Python是一个脚本语言,被解释器解释执行.它的发布方式: .py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的各种库.(Python官方的各种安 ...

  2. windows 下 nginx 配置文件路径

    nginx在windowns下路径 http{ #虚拟主机1 server{ listen 80; #监听端口,基于IP配置的时候变更此处,比如192.168.1.100:8080; server_n ...

  3. IDEA插件（Android Studio插件）开发示例代码及bug解决

    IDEA插件(Android Studio插件)开发示例代码及bug解决 代码在actionPerformed方法中,有个AnActionEvent e 插件开发就是要求我们复写上述的这个方法即可,在 ...

  4. 对比JavaScript中的Continue和Break

    译者按: 最好是不用,不过基础知识要掌握. 原文: JavaScript: Continue vs Break - Learn the difference between the continue ...

  5. nginx部署与安装

    1.在学习ngnix的时候,免不了需要进行安装,安装其实很简单,一个shell脚本就可以搞定可以参考如下 使用root用户执行nginx-install.sh脚本即可,脚本如下: #!/bin/bas ...

  6. Android 实现倒计时操作

    new CountDownTimer(10000, 1000) { @Override public void onTick(long millisUntilFinished) { } @Overri ...

  7. Mysql Group by 使用解析

    使用gruop by 分组 1. 方式一:select name from table1 group by name; 注意:group by 两侧都应该含有name,例如select country ...

  8. 替换富文本里的px为rem

    var content = '23px' content = content.replace(/(\d+)px/g, function(s, t) { s = s.replace('px', ''); ...

  9. blfs（systemd版本）学习笔记-构建gnome桌面系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+gnome(桌面组件) 链接: lfs(systemd版本)学习笔记系列:http ...

  10. 08-HTML-框架标签

    <html> <head>  <title>框架标签学习</title>  <meta charset="utf-8"/> ...