AngularJs ui-router多视图嵌套子视图

谁借莪１个温暖的怀抱￠ 2021-07-24 15:47 435阅读 0赞

1、通过.或parent的方式创建子路由
    2、在父路由的模板中添加容器标签并添加ui-view='x'设置子路由显示位置
    3、在子路由的views中'x@父路由名称',创建子路由视图
    4、子路由若要匹配顶级视图，在views中'顶级试图ui-view的名称@'

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

<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>
    	
    </head>
    
    <body>
    <div ng-controller='d1'>
    	<div ui-view=''></div>
    	<div ui-view='content'></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',
    			views:{ 
    			//@表示匹配''
    				'@':{ 
    					templateUrl:'angular/my.html'
    				},
    				'content':{ 
    					template:'欢迎回来'
    				}
    			}
    		})
    		.state('my.video',{ 
    			url:'/video',
    			views:{ 
    				//表示my的子视图
    				'son@my':{ 
    					templateUrl:'angular/video.html'
    				},
    				//表示子视图匹配顶级视图中的content
    				'content@':{ 
    					template:'欢迎子视图'
    				}
    
    			}
    		})
    		
    }])
    
    
    app.controller('main',['$scope',function($scope){ 
    
    }])
    
    app.controller('d1',['$scope','$state',function($scope,$state){ 
    
    	
    }])
    
    
    
    
    
    
    
    
    </script>
    
    </body>
    </html>

**父路由的my视图:**

**子路由的video视图**