Angular-ui-router进阶二之嵌套视图与多个视图组合使用

最新推荐文章于 2020-09-28 20:24:21 发布

VIctor_Ye

最新推荐文章于 2020-09-28 20:24:21 发布

阅读量4.7k

点赞数 3

分类专栏： AngularJS 文章标签： ui-router示例 ui-router嵌套视图 Nested Views 多个视图组合

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

版权

AngularJS 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

ui-router嵌套视图

嵌套视图是ui-router不同于ng-route的最大区别之一，也是ui-router受到大众青睐的主要原因。接下来跟小编直接上手做一下简单的嵌套视图（Nested Views）。

上面是本次示例的布局，有导航栏、侧边栏、视图1及其子孙视图。

这个是整个示例的布局：

文件结构：

首先是首页demo2.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="nestedViews/app2.js"></script>
	</head>
	<body ng-app="TrialApp" ng-controller="MainController">
		<header>
			<h1>Nav Bar</h1>
		</header>
		
		<nav>
			<h3>Side Bar</h3><br />
			<a ui-sref="1">Page 1</a><br /> 
			<a ui-sref="2">Page 2</a><br />
	
			<button ng-click="goTo()">State Change</button>
		</nav>
		
		<div ui-view>
           
		</div>
		
		<footer>
			Copyright Nobody
		</footer>		
	</body>
</html>

以及css文件index.css:

/* index */
header {
	background-color: black;
	color: white;
	text-align: center;
	padding: 5px;
}

nav {
	line-height: 30px;
	background-color: #eeeeee;
	height: 600px;
	width: 20%;
	float: left;
	padding: 0px;
	text-align: center;
}

div {
	background-color: gainsboro;
	width: 80%;
	height: 600px;
	float: right;
	padding: 0px;
}


footer {
	background-color: black;
	color: white;
	clear: both;
	text-align: center;
	padding: 5px;
}
/* Page 1 */
.P1 {
	background-color: papayawhip;
	width: 100%;
	height: 100%;
}
/* Page 1.1 */
.P1_1 {
	background-color: whitesmoke;
	width: 80%;
	height: 80%;
}
/* Page 1.1.1 */
.P1_1_1 {
	background-color: lightgrey;
	width: 80%;
	height: 80%;
}
/* Page 2 */

.P2 {
	background-color: powderblue;
	width: 100%;
	height: 100%;
}

app2.js代码：

'use strict';
// Define `TrialApp` module
var app = angular.module('TrialApp', ['ui.router']);
// Define routers
app.config(function($stateProvider) {
	$stateProvider
	    .state('home', {
		    url: '/home',
		    templateUrl: 'demo2.html',
		    controller: 'MainController'
	    })
	    .state('1', { 
	    	url: '/Page1',
	    	templateUrl:'nestedViews/htmls/1/Page1.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go('1.1');
	    		}
	    	}
	    })
	    .state('1.1', {
	    	url: '/Page1.1',
	    	templateUrl: 'nestedViews/htmls/1/childViews/Page1.1.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go('1.1.1');
	    		}
	    	}
	    })
	    .state('1.1.1', {
	    	url: '/Page1.1.1',
	    	templateUrl: 'nestedViews/htmls/1/childViews/Page1.1.1.html',
	    })
	    .state('2', {
	    	url: '/Page2',
	    	templateUrl: 'nestedViews/htmls/2/Page2.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go();
	    		}
	    	}
	    })
});
app.controller('MainController', function() {
     alert("Welcome to nested view demo!");
});

上述代码中，设置了嵌套视图，状态1-->状态1.1-->状态1.1.1，子视图状态名前必须加上其上一层视图的状态名加‘.’，例如father.child。多级嵌套也是如此，方便辨认。

Page1.html代码：

<div class="P1">
    <h3>View 1</h3>
	<button ng-click="change()">ChildViews</button>
	<ui-view id="view1"></ui-view>
</div>

在Page1页面中，需要设置ui-view，这是为了给其子视图显示的地方。

Page1.1.html代码：

<div class="P1_1">
    <h3>ChildView 1.1</h3>
	<button ng-click="change()">ChildViews</button>
	<ui-view id="view1.1"></ui-view>
</div>

在Page1.1页面中，也需要同Page1一样设置ui-view，给其子视图显示。

Page1.1.1.html代码：

<div class="P1_1_1">
    <h3>GrandchildView 1.1.1</h3>
</div>

Page2.html代码：

<div class="P2">
	<h3>View 2</h3>
	<button>ChildViews</button>
	<ui-view id="view2"></ui-view>
</div>

Page2 也是一样为了给之后的子视图显示，设置了ui-view。好了下面显示以下效果：

ui-router嵌套视图与多个视图组合使用（详情可以参考Angular-ui-router进阶一之多个视图）

这是组合使用的布局：

文件结构：

这是更新的demo2.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="nestedViews/app2.js"></script>
	</head>
	<body ng-app="TrialApp" ng-controller="MainController">
		<header>
			<h1>Nav Bar</h1>
		</header>
		
		<nav>
			<h3>Side Bar</h3><br />
			<a ui-sref="1">Page 1</a><br /> 
			<a ui-sref="2">Page 2</a><br />
			<a ui-sref="3">Page 3</a><br />			
		</nav>
		
		<div ui-view>
           
		</div>
		
		<footer>
			Copyright Nobody
		</footer>		
	</body>
</html>

在index.css文件中加上以下代码：

/* Page 3 */
.P3 {
	background-color: mintcream;
	width: 100%;
	height: %;
}
section {
	background-color: lightgreen;
	height: 539px;
	width: 20%;
	float: left;
	padding: 0px;
	text-align: center;
}
#A{
	width: 80%;
	height: 269px;
	background-color: antiquewhite;
}
#B{
	width: 80%;
	height: 269px;
}
.A {
	width: 100%;
	height: 50px;
	background-color: antiquewhite;
}
.B{
	width: 100%;
	height: 50px;
}

app2.js代码:

'use strict';
// Define `TrialApp` module
var app = angular.module('TrialApp', ['ui.router']);
// Define routers
app.config(function($stateProvider) {
	$stateProvider
	    .state('home', {
		    url: '/home',
		    templateUrl: 'demo2.html',
		    controller: 'MainController'
	    })
	    .state('1', { 
	    	url: '/Page1',
	    	templateUrl:'nestedViews/htmls/1/Page1.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go('1.1');
	    		}
	    	}
	    })
	    .state('1.1', {
	    	url: '/Page1.1',
	    	templateUrl: 'nestedViews/htmls/1/childViews/Page1.1.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go('1.1.1');
	    		}
	    	}
	    })
	    .state('1.1.1', {
	    	url: '/Page1.1.1',
	    	templateUrl: 'nestedViews/htmls/1/childViews/Page1.1.1.html',
	    })
	    .state('2', {
	    	url: '/Page2',
	    	templateUrl: 'nestedViews/htmls/2/Page2.html',
	    	controller: function($scope, $state) {
	    		$scope.change = function() {
	    			$state.go();
	    		}
	    	}
	    })
	    .state('3', {
	    	url: '/Page3',
	    	templateUrl: 'nestedViews/htmls/3/Page3.html',
	    	}
	    })
	    .state('3.child', {

	    	views: {
	    		'A' : {
	    			templateUrl:'nestedViews/htmls/3/A.html'
	    		},
	    		'B' : {
	    			templateUrl:'nestedViews/htmls/3/B.html'
	    		}
	    	}
	    })
});
app.controller('MainController', function() {
     //alert("Welcome to nested view demo!");
});

Page3.html代码：

<div class="P3">
    <h3>View 3</h3>
    <section class"side">
		<a ui-sref="3.child">Multiple Views</a>	
	</section>
	<div ui-view="A" id="A"></div>
	<div ui-view="B" id="B"></div>
</div>

A.html代码：

<div class="A">
	<h3>Page A</h3>
</div>

B.html代码：

<div class="B">
	<h3>Page B</h3>
</div>

演示效果：

视图命名（相对命名与绝对命名）

上述示例中，我们演示了views属性中，视图的相对命名。那什么是绝对命名呢？

一般，只要视图名只要包含”@“符号的就属于绝对命名。

相对命名：相对于父视图

绝对命名：指定相对于哪个视图

从原理来看，views属性中的每个视图都以”视图名@状态名“ 命名。我们动手来理解一下视图命名的奥妙。

我们修改下app2.js的代码：

.state('3.child', {
            url:'/child',
	    	views: {
	    		'A@3' : {
	    			templateUrl:'nestedViews/htmls/3/A.html'
	    		},
	    		'B@3' : {
	    			templateUrl:'nestedViews/htmls/3/B.html'
	    		}
	    	}
	    })

//在相同的A和B视图中，切换html模板
.state('3.child1', {
	    url: '/child1',
	    views: {
	    		'A@3': {
	    			template: '<h3><strong>A:</strong>View has been changed!</h3>'
	    		},
	    		'B@3': {
	    			template: '<h3><strong>B:</strong>View has been changed!</h3>'
	    		}
	    	}
	    })

Page3.html代码：（增加了一个状态”3.child1“，为了在多个同级视图情况下，切换html模板）

<div class="P3">
    <h3>View 3</h3>
    <section class"side">
		<a ui-sref="3.child">Multiple Views</a><br />
		<a ui-sref="3.child1">Change Views</a>
	</section>
	<div ui-view="A" id="A"></div>
	<div ui-view="B" id="B"></div>
</div>

上述app2.js代码中：

A@3代表的是，在状态“3”所对应的html模板（Page3.html）中<div ui-view='A'>的地方；

B@3代表的是，在状态“3”所对应的html模板（Page3.html）中<div ui-view='B'>的地方。

其实就是指明一个地点，就像上海市黄浦区，@前面市指定视图名，也是就是ui-view的名字，@后面则指定状态名所对应的html模板。后者相当于一个大范围，比如说城市，后者则是这个大范围里面某一个精确的地方，城市当中的某一个区。

那如果@前面没有东西，那就对应的是<div ui-view></div>，而倘若@后面没有东西，那就是默认根html模板，如果根模板中没有A、B视图，就不会显示任何效果。下面是效果展示：

更多详情可以参考：http://blog.csdn.net/zhang_red/article/details/72532308