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

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

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“路由”嵌套学习资料教程的更多相关文章

  1. [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...

  2. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  3. AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER

    深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人 ...

  4. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  5. AngularJS html5Mode与ASP.NET MVC路由

    AngularJS html5Mode与ASP.NET MVC路由共存 前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门 ...

  6. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  7. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  8. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  9. VueJs(10)---vue-router（动态路由，嵌套式路由，编程式路由）

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

随机推荐

  1. java的几种定时任务

    本篇博文主要是讲述2.x 版本的quartz下的实现方案,1.x 版本的实现方式大致原理一致,但是具体的实现方式有些不一致,具体体现在获取  scheduler 这个类的方式上有些不同,这里不作过多的 ...

  2. 【bzoj3224】【Tyvj 1728】 普通平衡树 树状数组

    您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入$x$数2. 删除$x$数(若有多个相同的数,因只删除一个)3. 查询$x$数的排名(若有多个相同的数,因输出最小 ...

  3. POJ 2371

    #include<iostream> #include<stdio.h> #include<string> using namespace std; int com ...

  4. Window Screen对象

    window.screen 对象包含有关用户屏幕的信息. window.screen对象在编写时可以不使用 window 这个前缀.一些属性: screen.availWidth // 可用的屏幕宽度 ...

  5. 用expect解决批量Linux集群机器间SSH免密码访问

    转自:http://blog.csdn.net/aichaoguy/article/details/11693269#!/bin/bash #check whether package 'expect ...

  6. Linux Cluster环境下批量分发执行补丁

    转自:http://blog.csdn.net/napolunyishi/article/details/18219867 这两天做了一个需求,因为上一个版本的/tmp空间默认只分配了5G,而升级程序 ...

  7. [转] 在linux下使用Terminator

    Ubuntu自带的终端是gnome-terminal,虽然能用但是不能支持屏幕分割和选择复制等功能,于是换用terminator作为默认终端. 安装 sudo apt-get install term ...

  8. 【jQuery源码】工具函数

    //扩展工具函数 jQuery.extend({ // Unique for each copy of jQuery on the page expando: "jQuery" + ...

  9. OpenGL12-shader(GLSL)着色语言3-（属性参数)(代码已上传)

    上一个例程中,使用了uniform 类型的变量,uniform可以理解为全局变量,这一节中使用 的是attribute类型的变量,翻译过来就是属性,他是与顶点绑定的,就意味着一个顶点可以 有很多个属性 ...

  10. C#对json数据的解析

    一,基础知识 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...