[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 ...
随机推荐
- webpack快速入门——实战技巧：优雅打包第三方类库
下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...
- [ActionScript 3.0] UDP通信
package com.controls.socket { import flash.events.DatagramSocketDataEvent; import flash.events.Event ...
- PHP之旅3 php数组以及遍历数组 以及each() list() foreach()
php的数组的定义 <?php //php中定义数组时可以通过索引直接进行赋值: $mArr[0]="哈哈"; $mArr[1]=70; $mArr[2]='haha'; e ...
- spring中的监视器，过滤器，拦截器
1.监视器 (1)首先监视器是观察者模式的实现,在我之前的博客中有关于监视器模式的解释.监视器相当于观察者 (2)我们在springMvc中最常见的监视器 ContextLoaderlistener ...
- 【mNOIP模拟赛Day 1】 T2 数颜色
题目传送门:https://www.luogu.org/problemnew/show/P3939 题外话:写完这题后本地跑了下极限数据,用时1.5s,于是马上用fread+fwrite优化至0.3s ...
- chrome下uploadify导致页面崩溃
解决方法在初始化uploadify之前用timeout来延迟加载 $(function(){ setTimeout(function(){ $('#file_upload'). ...
- ★ phpStudy安装SSL证书实现https链接
[准备] (1)phpstudy下载:http://phpstudy.php.cn/ (2)phpstudy集成环境下正常运行的网站 (3)避免意外请先备份(复制)好httpd.conf配置文件 ...
- TapTap推广统计逻辑
当我们在Taptap上访问某款游戏时,比如https://www.taptap.com/app/34762,taptap会记录下这次访问,它是怎么做的呢. 首先,用记事本打开这个网址,在head部分看 ...
- (转) MySQL分区与传统的分库分表
传统的分库分表 原文:http://blog.csdn.net/kobejayandy/article/details/54799579 传统的分库分表都是通过应用层逻辑实现的,对于数据库层面来说,都 ...
- C# 对象相等性判断和同一性判断
在日常开发中经常需要编写代码比较不同的对象.例如,有时需要将对象都放到一个集合中,并编写代码对集合中的对象进行排序.搜索或者比较. System.Object类有两个Equals方法,如下: 1.实例 ...