Angular-ui-router进阶一之多个视图

最新推荐文章于 2024-05-10 09:57:52 发布

VIctor_Ye

最新推荐文章于 2024-05-10 09:57:52 发布

阅读量2.1k

点赞数 3

分类专栏： AngularJS 文章标签：多个视图 views url 体验

本文链接：https://blog.csdn.net/victoryzn/article/details/74315843

版权

AngularJS 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

阅读本文前，推荐阅读 Angular-ui-router 入门：http://blog.csdn.net/victoryzn/article/details/74289442

----------------------------------------------------------------------------------------------------------------------------------------

本文将基于上一篇 Angular-ui-router 入门的示例来讲一讲ui-router的多个视图（Multiple ui-views）。

在此之前，上一篇文章讲述了如何使用ui-router的一些基本功能，也通过简单的示例。众所周知，ui-router除了拥有ng-route所没有的嵌套视图功能外，

还有一个非常强大的特性就是在一个状态内设置多个命名视图。我们先来做个示例来体验一下这一特性，小试牛刀：

简单示例

首先设置以下路由：

'use strict';
// Define `TrialApp` module
var app = angular.module('TrialApp', ['ui.router']);
// Define routers
app.config(function($stateProvider) {
	$stateProvider
	    .state('B', { 
	    	url: '/B',
	    	views: {
	    		'A': {
	    			template: '<h2>A视图</h2>'
               }, 
	    		'B': {
	    			template: '<h2>B视图</h2>'
	    		}
	    	}
	    })
});
app.controller('mainController', function() {

});

在ui-router中设置了一个state ‘B’, 定义了url（必须定义不然无法显示）以及views参数。

注意：这时，如果views参数外面再定义template、templateUrl、templateProvider均不会返回页面。只有views参数面设置才有效。

以下是HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>index</title>
		<link href="css/index.css" rel="stylesheet" />
		<script src="js/lib/angular/angular.min.js"></script>
		<script src="js/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
	        <script src="app.js"></script>
	</head>
	<body ng-app="TrialApp" ng-controller="mainController" style="background-color: lavender;">
		<h1>index页面</h1>
		<div style="width: 20%; float: left;background-color: lightgoldenrodyellow;text-align: center;">
			<a ui-sref='C1'>C1</a><br />
			<a ui-sref='C2'>C2</a><br />
			<a ui-sref='C3'>C3</a><br />
			<a ui-sref='B'>B</a><br />
		</div>
		<div style="width: 80%; float: right;background-color: antiquewhite;height: 70px;">
			<h1>路由区域</h1>
		</div>
		<div style="width: 80%; float: right;height: 265px;background-color:white">
			<div ui-view="A" style="width: 50%; background-color:white;"></div>
			<div ui-view="B" style="width: 50%;"></div>
		</div>	
	</body>
</html>

以下是效果图：

这里不用ui-sref或$state.go()就可以把html模板渲染到指定视图中了。