AngularJs ui-router多视图嵌套

比眉伴天荒 2021-07-24 16:23 344阅读 0赞

1、定义多个容器标签,且每一个加上ui-view='自定义名称'
    2、定义路由,只有url、views属性
    	views:{
    		ui-view的名称1:{template/templateUrl},
    		ui-view的名称2:{template/templateUrl},
    		ui-view的名称3:{template/templateUrl},
    		...
    	}
    3、当进入路由时,页面中的容器标签将会显示对应的views中的内容

代码示例:  
**主页面:**

<html ng-app="app" ng-controller="main">
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    	
    	<script src="js/libs/angular.js"></script>
    	<script src="js/libs/angular.route.min.js"></script>
    	<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
     <style>
    	.{ 
    		padding: 0px;
    		margin:0px;
    	}
    	li{ 
    		list-style: none;
    	}
    	div[ui-view=top]{ 
    		background-color: red;
    	}
    	div[ui-view=left]{ 
    		background-color: yellow;
    		float: left;
    	}
    	div[ui-view=right]{ 
    		background-color: blue;
    		position: absolute;
    		left:200px;
    		right: 0px;
    	}
    
     </style>
    	
    </head>
    
    <body>
    <div ng-controller='d1'>
    	<div ui-view='top'></div>
    	<div ui-view='left'></div>
    	<div ui-view='right'></div>
    </div>
    
    
    
    <script>
    var app=angular.module('app',['ui.router']);
    
    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
    
    		//将'/hd'设置为默认页,打开页面自动跳转
    		$urlRouterProvider.otherwise('/my');
    
    		//创建路由
    		$stateProvider
    		.state('my',{ 
    			url:'/my',
    			//影响多个视图,当进入my这个路由时,会将views中的模板放到对应位置
    			views:{ 
    				top:{ 
    					templateUrl:'angular/top.html'
    				},
    				left:{ 
    					templateUrl:'angular/menu.html'
    				},
    				right:{ 
    					templateUrl:'angular/about.html'
    				}
    
    			}
    		})
    		.state('video',{ 
    			url:'/video',
    			//影响多个视图,当进入my这个路由时,会将views中的模板放到对应位置
    			views:{ 
    				top:{ 
    					templateUrl:'angular/top.html'
    				},
    				left:{ 
    					templateUrl:'angular/menu.html'
    				},
    				right:{ 
    					templateUrl:'angular/video_list.html'
    				}
    
    			}
    		})
    		
    }])
    
    
    app.controller('main',['$scope',function($scope){ 
    
    }])
    
    app.controller('d1',['$scope','$state',function($scope,$state){ 
    
    	
    }])
    </script>
    
    </body>
    </html>

**top模板:**

**menu模板:**

页面效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223110756185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/ea123f1e931549f8aa85a2f0183da8dd.png