[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
2024-09-28 22:55:06
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的
以下内容仅供参考,请慎重使用学习
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>
最新文章
- CAD打印线条太粗、线条颜色设置
- Koch曲线
- bzoj1201: [HNOI2005]数三角形
- PHP中的正则表达式函数preg_
- Linux清空内存缓存
- SpringMVC09异常处理和类型转化器
- ios面试汇总
- PHP中用到的一些字符串函数
- linux网络编程1 最简单的socket编程
- Hadoop启动方式
- yaf框架刚开始遇到的问题
- [BZOJ 4916]神犇和蒟蒻
- eclipse中js报错简单快捷的解决方式
- Linux 小知识翻译 - 「虚拟化技术 续」
- mybatis-查询过程
- (原)关于udp的socket发送数据耗时的问题探讨
- C# 一般处理程序下载文件
- LintCode: Happy Number
- 数据规整化:pandas 求合并数据集(交集并集等)
- CloudSetuper
热门文章
- webpack快速入门——webpack3.X 快速上手一个Demo
- js面试题-数组去重
- 从您的帐户中删除 App 及 iTunes Connect 开发人员帮助
- J07-Java IO流总结七 《 InputStreamReader和OutputStreamWriter 》
- Android IntentFilter匹配规则
- Disconf 学习系列之Disconf 的模块架构图
- web前端html快速入门
- Oracle数据库 中的基础的一些语法结构
- Deep Residual Learning for Image Recognition(残差网络)
- GDI+中发生一般性错误的解决办法(转)