AngularJs ui-router多视图嵌套

最新推荐文章于 2020-12-25 15:05:41 发布

神奇大叔

最新推荐文章于 2020-12-25 15:05:41 发布

阅读量177

点赞数

分类专栏： Angular.js 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104456375

版权

Angular.js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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模板:

<style>
	li a{
		margin-left:10px;
	}
</style>

<li><a href="" ui-sref='my'>我的</a><a href="" ui-sref='video'>视频</a></li>

menu模板:

<li><a href="">我的订单</a></li>
<li><a href="">修改头像</a></li>
<li><a href="">问题反馈</a></li>

页面效果:
在这里插入图片描述

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs ui-router多视图嵌套

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

扫一扫