[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 ...
随机推荐
- easyui页面上字段排序并与后台交互
在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...
- Android studio 安装的安装若干问题
1.在国内如何更新android sdk? 由于众所周知的某些原因,我们无法直接连接android sdk的更新服务更新sdk,所以可以通过国内的ftp站点把常用的sdk组件如android plat ...
- Python小白学习之路（六）—— 【元祖】【元祖相关功能】
元祖 tu = (111,'alex',(11,['aa','xhg',(78,43)],'aaa'),789,) 通过这个例子,我们看到元祖的特征: 是通过括号()括起来的 一般写元祖的时候,推荐子 ...
- 剑指offer五十之数组中重复的数字
一.题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- Postman—添加断言和检查点
前言 postman断言是JavaScript语言编写的,在postman客户端指定区域编写即可. 断言会在请求返回之后,运行,并根据断言的pass\fail情况体现在最终测试结果中. 一.断言步骤 ...
- 《LeetBook》leetcode题解(18) : 4Sum[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- ActiveMQ安全机制设置
一.设置后台管理密码a.ActiveMQ使用的是jetty服务器,找到D:\div\apache-activemq-5.11.1\conf\jetty.xml文件: <bean id=" ...
- SSL虚拟主机安全方案
SSL虚拟主机安全方案 随着虚拟主机技术的发展,功能越来越丰富,已经不仅仅只是满足个人网站的需要,越来越多的小型电子商务网站也采用了虚拟主机来建站,如何为这些商户提供经济.方便的SSL解决方案,成为虚 ...
- 分布式改造剧集三：Ehcache分布式改造
第三集:分布式Ehcache缓存改造 前言 好久没有写博客了,大有半途而废的趋势.忙不是借口,这个好习惯还是要继续坚持.前面我承诺的第一期的DIY分布式,是时候上终篇了---DIY分布式缓存. 探 ...