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

Posted BeginWeb—熊一乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>



以上是关于AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 创建另一个模块并将其作为依赖项添加到 first

AngularJs中,如何在render完成之后,执行Js脚本

AngularJS 作用域与数据绑定机制

angularJS初学篇-1添加随笔

如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]

盘点开发人员的十佳AngularJS框架