[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 ...
随机推荐
- [Swift实际操作]七、常见概念-(4)范围CGRect的使用详解
本文将为你演示区域对象CGRect的使用.你可以将区域对象,看作是点对象和尺寸对象的组合 首先导入需要使用到底界面工具框架 import UIKit 然后初始化一个区域对象,它的原点位于(0,0),宽 ...
- Swinject 源码框架(三）：Object Scopes
Object Scopes 指定了生成的实例在系统中是如何被共享的. 如何指定 scope container.register(Animal.self) { _ in Cat() } .inObje ...
- 调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标
最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的.真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整 ...
- 【12】JMicro微服务-Zookeeper
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到11小节 1. CuratorFramework支持 JMicro目前基于Zookeeper实现统 ...
- leetcode-917-仅仅反转字母
题目描述: 给定一个字符串 S,返回 “反转后的” 字符串,其中不是字母的字符都保留在原地,而所有字母的位置发生反转. 示例 1: 输入:"ab-cd" 输出:"dc-b ...
- Swift循环遍历集合方法
第一种方式:for-in循环 OC延续了C语言的for循环,在Swift中被彻底改造,我们无法再使用传统形式的for循环了 遍历数组和字典: //遍历数组 let iosArray = [&quo ...
- Jasmine入门（下）
上一篇 Jasmine入门(上) 介绍了Jasmine以及一些基本的用法,本篇我们继续研究Jasmine的其他一些特性及其用法(注:本篇中的例子均来自于官方文档). Spy Spy用来追踪函数的调用历 ...
- 有关Hadoop的六大误解
迄今为止,Hadoop和大数据实际上是同义词.然而随着大数据的炒作不断升温,出现了很多对Hadoop如何应用于大数据的误解. Hadoop是一种用于存储和分析大型数据集开源软件框架,可处理分布在多个现 ...
- Git-基本操作(图文)
场景一: 已经用git add 命令把文件加入到暂存区了,这个时候想退回怎么办? 添加文件到暂存区 :git add . 将单个文件撤回到工作区:git rm --cached [文件路径] 将目录撤 ...
- LINUX 实现端口转发 - 安装使用rinetd
网上查找安装rinetd 安装时候问题如下一致,找到此文,方解决. 源地址 系统环境:centos 5.4 系统需要gcc组件 yum -y install gcc* 安装完毕以后 首先下载wget ...