Angular中ui-router实现路由嵌套案例
学习 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 实现视图与路由深层嵌套综合案例
源代码下载请点击
推荐学习AngularJS Routing Using UI-Router https://scotch.io/tutorials/angular-routing-using-ui-router
Angular中ui-router实现路由嵌套案例的更多相关文章
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- angular中ui calendar的一些使用心得
ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- 全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- 060——VUE中vue-router之路由嵌套在文章系统中的使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- React Fiber源码分析 第一篇
先附上流程图一张 先由babel编译, 调用reactDOM.render,入参为element, container, callback, 打印出来可以看到element,container,cal ...
- 博客使用base64编码图片测试
为了解决发博客时需要先要上传,所以查了一下这个方法 1.把本地图片转为base64编码的字符串, 网上有很多提供这个功能的网站,转换后像这样 data:image/jpeg;base64,/9j/4A ...
- 判断文本是否溢出/hover显示全部
前言 在工作中我们经常会遇到,文字过多,需要用省略号,并且鼠标hover的时候 还需要 显示全部的文字的需求. 正文 文字过多需要用省略号的实现:上代码啦 .ellipsis { width: 100 ...
- 前端入门3-CSS基础
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- CSS效果：CSS改变下拉列表select框的默认样式
原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可.当然右侧的小箭头可以用伪元素before或者after来实现. select { /*Chrome和Fir ...
- 51nod1238 最小公倍数之和 V3(莫比乌斯反演)
题意 题目链接 Sol 不想打公式了,最后就是求一个 \(\sum_{i=1}^n ig(\frac{N}{i})\) \(g(i) = \sum_{i=1}^n \phi(i) i^2\) 拉个\( ...
- yarn安装ant-报错
异常现象: 使用react引用antd的库时报错 yarn add antd Trace: Error: connect ETIMEDOUT 114.55.80.225:80 at Object._e ...
- HashMap 与 ConcrrentHashMap 使用以及源码原理分析
前奏一:HashMap面试中常见问题汇总 HashMap的工作原理是近年来常见的Java面试题,几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和Has ...
- 使用fiddler抓包手机请求数据
1.启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler Options”对话框. 2.在Fiddler Options”对话框切换到“Con ...
- 调用Android自带浏览器打开网页
转载请注明出处: http://blog.csdn.net/lowprofile_coding/article/details/77928608 在Android中可以调用自带的浏览器,或者指定一个浏 ...