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

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

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

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>

转载于:https://www.cnblogs.com/mibear/p/AngularJS-ui-router.html

[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程相关推荐

php路由类默认模块,微擎入口路由及其模块入口路由 - YangJunwei
一.微擎入口路由微擎有2个入口文件 /web/index.php?c=site&a=entry /app/index.php?c=entry 路由变量 $controller = $_GPC ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
Vue中路由嵌套（子路由）
路由的嵌套就是点击一个路由地址后,继续点击,进入到另外一个路由地址下,即第二个路由就是第一个路由的子路由. 根据我们前面学习的VueRouter的知识,可以直接写出代码来实现: 一般写法 <!D ...
vue刷新页面如何保证路由不变_vue 刷新之后嵌套路由不变重新渲染页面的方法...
vue 刷新之后嵌套路由不变重新渲染页面的方法解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
利用angular4和nodejs-express构建一个简单的网站（六）—用户模块和路由分析
上一节解决了用户注册和登录数据部分的内容.这一节开始分析用户模块.用户路由.## 用户管理模块UserModule分析 ## UserModule主要代码如下: import { NgModule } ...
管理台权限模块 - 完整路由权限及按钮权限
这篇文章主要讲的是动态路由添加,下篇我们再仔细说明一下按钮权限的做法, 本文基础框架在element-ui 及element-admin-template基础上进行的二次开发动态路由权限: 首先这里 ...
视频教程-AngularJS基础入门视频课程-AngularJS
AngularJS基础入门视频课程南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从事软件 ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...

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

[AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程相关推荐

最新文章

热门文章