[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料，理论上只是为了自己以后学习需要的，但是还是需要认真对待的
以下内容仅供参考，请慎重使用学习
1.AngularJS路由嵌套
Angularjs本身自带路由模块，可以满足通过不同的 URL 访问不同的内容，当然实际应用为在单页面点击不同按钮等加载不同页面
之前有关于angular-route路由的介绍，但是只能一层路由嵌套，如果需要多重嵌套就是不够用了
UI-Router作为AngularUI为开发者提供的其中实用的一个模块，根据URL状态组织和控制界面UI的渲染，不是仅仅只改变路由（传统AngularJS应用实用的方式）
该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
1//首页代码 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../framework/angular-1-4-6.min.js"></script>
<script src="../../framework/angular-ui-router.min.js" type="text/javascript" charset="utf-8"></script>
<script src="f"></script>
</head>
<body ng-app="myApp">
<h1>首页</h1>
<div>
<span><a ui-sref="mainTab" href="">mian</a></span>
<span><a ui-sref="mainTab2" href="">mia1</a></span>
</div>
<div ui-view=""></div>
<script type="text/javascript">
//main主页的模块myApp依赖模块ui.router
var app=angular.module('myApp',['ui.router']);
app.config(["$stateProvider", "$urlRouterProvider",function($stateProvider,$urlRouterProvider){
//默认路由到mainTab
$urlRouterProvider.when('', '/mainTab');
$stateProvider.state('mainTab', {
url: '/mainTab',
templateUrl: 'mainTab.html'
//mainTab.tab1 即mainTab/tab1 二级嵌套
}).state('mainTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('mainTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('mainTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
}).state('mainTab2', {
url: '/mainTab2',
templateUrl: 'mainTab2.html'
//mainTab.tab1 即mainTab/tab1 二级嵌套
}).state('mainTab2.tab11', {
url: '/tab11',
templateUrl: 'tab11.html'
}); }]);
</script>
</body> </html>
//第二层加载页面代码，二层嵌套
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body >
</body >
<div>
<p>maintab</p>
<span><a ui-sref=".tab1" href="">tab 1</a></span>
<span><a ui-sref=".tab2" href="">tab 2</a></span>
<span><a ui-sref=".tab3" href="">tab 3</a></span>
</div>
<div>
<div ui-view=""></div>
</div>
</html>
//第三层页面嵌套，其实只是显示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>tab1</p>
</body>
</html>
2.注意和angular自带route的不同
1.自带的文件模块为angular-route.js——多重嵌套的为ui-router.min.js
2.一个为<div ng-view="">——另一个是<div ui-view=""></div>
3.多层嵌套的写法
//一层嵌套 .state('mainTab' $stateProvider.state('mainTab', {
url: '/mainTab',
templateUrl: 'mainTab.html'
//mainTab.tab1 即mainTab/tab1 二级嵌套
})
//二层嵌套 state('mainTab.tab1', （注意是.tab1）
.state('mainTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
})4.点击a标签的写法
//ui-sref="mainTab" （ui-sref）
<span><a ui-sref="mainTab" href="">mian</a></span>
<span><a ui-sref="mainTab2" href="">mia1</a></span>二层嵌套的为：
//ui-sref=".tab1" （名称前带"."）
<span><a ui-sref=".tab1" href="">tab 1</a></span>
<span><a ui-sref=".tab2" href="">tab 2</a></span>
<span><a ui-sref=".tab3" href="">tab 3</a></span>
[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程的更多相关文章
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人 ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- AngularJS html5Mode与ASP.NET MVC路由
AngularJS html5Mode与ASP.NET MVC路由共存 前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- VueJs(10)---vue-router（动态路由，嵌套式路由，编程式路由）
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
随机推荐
- javascript 易错知识点合集
为什么 typeof null === 'object' 原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为 object 类型, null 的二进 ...
- 面向 B 端的产品经理
简评:越来越多人涌入产品经理这个岗位,但是面对不同的产品和客户群体,产品经理所需要的技能.知识和经验可能大相庭径. 近几年随着移动互联网的爆发性增长,几乎遍地都是产品经理了.华尔街日报 也曾报道称「产 ...
- 五：MyBatis学习总结(五)——实现关联表查询
一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...
- 移动端 实现ul横向滚动条
ul { display: flex; width: 100%; height: 3.333333rem; background: #fff; padding: 0.373333rem 0.32rem ...
- vue 中使用 screenfull.js 全屏插件
参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...
- Java之IO(九)其它字节流
转载请注明源出处:http://www.cnblogs.com/lighten/p/7063161.html 1.前言 之前的章节已经介绍了java的io包中所有成对(输入.输出对应)的字节流,本章介 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 弱网测试--使用fiddler进行弱网测试
弱网测试原理以及方法(一) 一.为什么要进行弱网测试? 按照移动特性,各种网络连接协议不同,导致通信的信号不同,速率也不同,影响应用的加载时间.可用性.稳定性 二.什么样的网络属于弱网? 低于2g速率 ...
- Linux下串口編程遇到的接收数据错误及原因（0x0d,0x11接收错误）
摘要:Linux下串口编程遇到的接收数据错误及原因 来源:https://dotblogs.com.tw/k/2012/07/24/73572 近日在调试串口的时候发现,另一设备向我ARM板的串口发送 ...
- Mahout实战---评估推荐程序
推荐程序的一般评测标准有MAE(平均绝对误差),Precision(查准率),recall(查全率) 针对Mahout实战---运行第一个推荐引擎 的推荐程序,将使用上面三个标准分别测量 MAE(平均 ...