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

来源：互联网发布：淘宝网磨刀机沙轮编辑：程序博客网时间：2024/05/06 14:30

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

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

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.router19         var app=angular.module('myApp',['ui.router']);20         app.config(["$stateProvider", "$urlRouterProvider",function($stateProvider,$urlRouterProvider){21             //默认路由到mainTab22             $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>

阅读全文

0 0