文档章节

AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

小熊一乐
 小熊一乐
发布于 2017/07/27 09:19
字数 818
阅读 19
收藏 0

这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的

以下内容仅供参考,请慎重使用学习

1.AngularJS路由嵌套

Angularjs本身自带路由模块,可以满足通过不同的 URL 访问不同的内容,当然实际应用为在单页面点击不同按钮等加载不同页面

之前有关于angular-route路由的介绍,但是只能一层路由嵌套,如果需要多重嵌套就是不够用了

UI-Router作为AngularUI为开发者提供的其中实用的一个模块,根据URL状态组织和控制界面UI的渲染,不是仅仅只改变路由(传统AngularJS应用实用的方式)

该模块为开发者提供了很多最视图(view)额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用,UI-Router也可以极佳地驾驭。

 1//首页代码

<!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="../../framework/angular-1-4-6.min.js"></script> 7 <script src="../../framework/angular-ui-router.min.js" type="text/javascript" charset="utf-8"></script> 8 <script src="f"></script> 9 </head> 10 <body ng-app="myApp"> 11 <h1>首页</h1> 12 <div> 13 <span><a ui-sref="mainTab" href="">mian</a></span> 14 <span><a ui-sref="mainTab2" href="">mia1</a></span> 15 </div> 16 <div ui-view=""></div> 17 <script type="text/javascript"> 18 //main主页的模块myApp依赖模块ui.router 19 var app=angular.module('myApp',['ui.router']); 20 app.config(["$stateProvider", "$urlRouterProvider",function($stateProvider,$urlRouterProvider){ 21 //默认路由到mainTab 22 $urlRouterProvider.when('', '/mainTab'); 23 $stateProvider.state('mainTab', { 24 url: '/mainTab', 25 templateUrl: 'mainTab.html' 26 //mainTab.tab1 即mainTab/tab1 二级嵌套 27 }).state('mainTab.tab1', { 28 url: '/tab1', 29 templateUrl: 'tab1.html' 30 }).state('mainTab.tab2', { 31 url: '/tab2', 32 templateUrl: 'tab2.html' 33 }).state('mainTab.tab3', { 34 url: '/tab3', 35 templateUrl: 'tab3.html' 36 }).state('mainTab2', { 37 url: '/mainTab2', 38 templateUrl: 'mainTab2.html' 39 //mainTab.tab1 即mainTab/tab1 二级嵌套 40 }).state('mainTab2.tab11', { 41 url: '/tab11', 42 templateUrl: 'tab11.html' 43 }); 44 45 46 }]); 47 </script> 48 </body> 49 50 </html>
 1 //第二层加载页面代码,二层嵌套  2 <!DOCTYPE html>
 3 <html>
 4 <head lang="en">
 5     <meta charset="UTF-8">
 6     <title></title>
 7 </head>
 8 <body >
 9 </body >
10         <div>
11             <p>maintab</p>
12         <span><a ui-sref=".tab1" href="">tab 1</a></span>
13         <span><a ui-sref=".tab2" href="">tab 2</a></span>
14         <span><a ui-sref=".tab3" href="">tab 3</a></span>
15     </div>
16     <div>
17         <div ui-view=""></div>
18     </div>
19 </html>
 1 //第三层页面嵌套,其实只是显示内容  2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8     <body>
 9         <p>tab1</p>
10     </body>
11 </html>

2.注意和angular自带route的不同

1.自带的文件模块为angular-route.js——多重嵌套的为ui-router.min.js

2.一个为<div ng-view="">——另一个是<div ui-view=""></div>

3.多层嵌套的写法

 1 //一层嵌套 .state('mainTab'
 2 
 3 $stateProvider.state('mainTab', {  4                 url: '/mainTab',  5                 templateUrl: 'mainTab.html'
 6                 //mainTab.tab1 即mainTab/tab1 二级嵌套
 7  })
8 //二层嵌套 state('mainTab.tab1', (注意是.tab1) 9 .state('mainTab.tab1', { 10 url: '/tab1', 11 templateUrl: 'tab1.html' 12 })

4.点击a标签的写法

1 //ui-sref="mainTab" (ui-sref) 2 <span><a ui-sref="mainTab" href="">mian</a></span>
3 <span><a ui-sref="mainTab2" href="">mia1</a></span>

二层嵌套的为:

1 //ui-sref=".tab1" (名称前带".") 2 <span><a ui-sref=".tab1" href="">tab 1</a></span>
3 <span><a ui-sref=".tab2" href="">tab 2</a></span>
4 <span><a ui-sref=".tab3" href="">tab 3</a></span>

© 著作权归作者所有

小熊一乐
粉丝 0
博文 23
码字总数 42672
作品 0
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.7K
1
第220天:Angular---路由

内容介绍,为什么要使用前端路由? 在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之...

半指温柔乐
2018/05/05
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
angularjs和ajax的结合使用 (三)

转眼九月份了,忙忙碌碌 发现今年还没开过张,写一篇吧。 15年在空闲时就倒腾过angularjs那玩意儿 ,觉得还是挺好的,李金龙那厚厚的一本书,只不过没有系统化应用。最主要的是原来有一个东西...

assassinx
2018/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
4
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部