版权声明:本文为博主原创文章,未经博主允许不得转载
阅读本文前,推荐阅读 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模板渲染到指定视图中了。
视图命名
大家可以注意到,当我们指定视图名的时候,往往要在路由定义中及html页面中的ui-view=“”中命名,并一一对应,有时候会出现视图名中有
@的情况,如body@content,这是有嵌套关系的标志,具体情况将会在下一篇文章(Angular-ui-router进阶二之嵌套视图和多个视图组合使用)中讨论。