Angular-ui-router進階二之巢狀檢視與多個檢視組合使用

阿新 • • 發佈：2019-01-19

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。好了下面顯示以下效果：

這是組合使用的佈局：

檔案結構：

這是更新的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: {
	    		'[email protected]' : {
	    			templateUrl:'nestedViews/htmls/3/A.html'
	    		},
	    		'[email protected]' : {
	    			templateUrl:'nestedViews/htmls/3/B.html'
	    		}
	    	}
	    })

//在相同的A和B檢視中，切換html模板
.state('3.child1', {
	    url: '/child1',
	    views: {
	    		'[email protected]': {
	    			template: '<h3><strong>A:</strong>View has been changed!</h3>'
	    		},
	    		'[email protected]': {
	    			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程式碼中：

[email protected]代表的是，在狀態“3”所對應的html模板（Page3.html）中<div ui-view='A'>的地方；

[email protected]代表的是，在狀態“3”所對應的html模板（Page3.html）中<div ui-view='B'>的地方。

其實就是指明一個地點，就像上海市黃浦區，@前面市指定檢視名，也是就是ui-view的名字，@後面則指定狀態名所對應的html模板。後者相當於一個大範圍，比如說城市，後者則是這個大範圍裡面某一個精確的地方，城市當中的某一個區。

那如果@前面沒有東西，那就對應的是<div ui-view></div>，而倘若@後面沒有東西，那就是預設根html模板，如果根模板中沒有A、B檢視，就不會顯示任何效果。下面是效果展示：

下一期將會討論ui-router傳參的各種方法，敬請期待！

Angular-ui-router進階二之巢狀檢視與多個檢視組合使用

ui-router巢狀檢視巢狀檢視是ui-router不同於ng-route的最大區別之一，也是ui-router受到大眾青睞的主要原因。接下來跟小編直接上手做一下簡單的巢狀檢視（Nested Views）。上面是本次示例的佈局，有導航欄、側邊欄、檢視1及其子孫檢

mongodb進階二之mongodb聚合

上篇我們說了mongodb的高階查詢：http://blog.csdn.net/stronglyh/article/details/46817789 這篇說說mongodb的聚合一：mongodb中有很多聚合框架，從而實現文件的變換和組合，主要有一下構件構件類別

openresty 前端開發進階二之https後端

在對接一些第三方系統的時候，經常會遇到https的問題，好比如做微信公眾號的開發，介面基本都是https的，這個時候，很多人試著用http的那種方式來訪問https，結果報錯了，誤以為lua不支援https，其實不是的，只需要配置一個證書即可，證書可以通過瀏覽器

ui-router中路由的二級巢狀

關於ui-router中巢狀路由中的問題 1.首先我們的頁面層次為其中Main.html是我們的主頁，我們要在main.html中對路由進行統一的管理。 main.html頁面中有一個ui-view在這裡將填充PageTab.html，同時被填充的P

android進階-----解決scrollview巢狀listview的問題

在android開發中，經常會碰到在ScrollView中巢狀ListView的介面的開發，在ScrollView中巢狀ListView會帶來幾個問題，經過反覆的實踐，總結出完美解決的辦法如下： 1.繼承ListView 複寫其中的方法 @Override public void onMeasu

C語言及程式設計進階例程-2 一個程式，多個檔案

演示：建立多檔案的專案main.c#include <stdio.h> int max(int x,int y); int main( ) { int a,b,c; printf("輸入兩數："); scanf("%d %d", &a, &b

spark讀取多個資料夾(巢狀)下的多個檔案

在正常呼叫過程中，難免需要對多個資料夾下的多個檔案進行讀取，然而之前只是明確了Spark具備讀取多個檔案的能力。針對多個資料夾下的多個檔案，以前的做法是先進行資料夾的遍歷，然後再進行各個資料夾目錄的讀取。今天在做測試的時候，居然發現spark原生就支援這樣的能力。

Redis進階實踐之二如何在Linux系統上安裝安裝Redis

進行 redis-cli windows 也會 www. 有關目標 onf 名稱原文:Redis進階實踐之二如何在Linux系統上安裝安裝Redis一、引言上一篇文章寫了“如何安裝VMware Pro虛擬機”和在虛擬機上安裝Linux操作系統。那是第一步，有

Python函數之進階二

python 返回值引用 rst pos 容器類對象 print pan 一、函數名的本質函數名本質上就是函數的內存地址。 1、可以被當做值或變量引用 def func(): print(111) print(func) #<function fun

mysql進階(二十二)MySQL錯誤之Incorrect string value: '\xE7\x81\xAB\xE7\x8B\x90...中文字元輸入錯誤

MySQL錯誤之Incorrect string value: '\xE7\x81\xAB\xE7\x8B\x90...' for column 'tout' at row 1中文字元輸入錯誤在實驗過程中需要將輸出引數寫入資料庫，在寫的過程中執行到lab_

mysql進階(二十二)MySQL錯誤之Incorrect string value: '\xE7\x81\xAB\xE7\x8B\x90...中文字元輸入錯誤

MySQL錯誤之Incorrect string value: '\xE7\x81\xAB\xE7\x8B\x90...' for column 'tout' at row 1中文字元輸入錯誤在實驗過程中需要將輸出引數寫入資料庫，在寫的過程中執行到lab_dynam

（十二）vue.js元件——進階篇之元件通訊（3）

(1)概述所謂元件間的通訊，實際上就是指在各個元件間，進行引數或者資訊的相互傳遞。比如我們前面學的通過props給子元件傳參，實際上這就是父元件向子元件進行單向的通訊。 (2)元件間通訊的幾種方式 1.父到子的通訊父到子的通訊使用我們前面使用的props即可

Redis進階實踐之十二 Redis的Cluster叢集動態擴容

一、引言　　上一篇文章我們一步一步的教大家搭建了Redis的Cluster叢集環境，形成了3個主節點和3個從節點的Cluster的環境。當然，大家可以使用 Cluster info 命令檢視Cluster叢集的狀態，也可以使用Cluster Nodes 命令來詳細瞭

AngularJS進階二十九 AngularJS專案開發技巧之localStorage儲存

AngularJS專案開發技巧之localStorage儲存注: localStorage深度學習緒

python進階—OpenCV之影象處理（二）

文章目錄影象形態變換影象的腐蝕影象的膨脹影象的開操作影象的閉操作影象的形態學梯度影象的頂帽操作影象的黑帽操作影象的梯度（Image Gradients） So

2、Angular-Ui Router 巢狀狀態和巢狀檢視

Methods for Nesting States巢狀狀態的方法States can be nested within each other. There are several ways of nesting states:狀態可以相互巢狀，巢狀狀態有幾種方法:Using

Data binding 入坑筆記二進階篇之雙向繫結

上一篇介紹了Data binding的基礎用法，你可能會想這也太基礎了，只支援前置資料的繫結，一旦資料變化了UI都監聽不到。不要著急，這一篇就來講到databinding的雙向繫結用法。 0.舉個例子我們用一個輸入控制元件EditText和一個

Jenkins進階系列之——09配置Linux系統ssh免密碼登陸

dom pub tar finger cnblogs pan 改變 art home ssh認證的完整描述:https://www.ibm.com/developerworks/cn/linux/security/openssh/part1/ 說明：點我去查看今天我們只說

Oracle進階學習之創建數據庫

oracle 用戶表空間實例名寫在前面： Oracle在創建用戶的時候默認使用的表空間為User，我們一般不建議這樣做，因為默認表空間的大小是固定的，如果我們創建的所有用戶都使用默認的表空間會導致表空間空間不足，會導致指向User表空間的所有用戶無法正常使用，聽起來是多麽可怕的一件

Vue 進階教程之：詳解 v-model

com 方式事件變化復習簡寫 mage fine 需要分享 Vue 官網教程上關於 v-model 的講解不是十分的詳細，寫這篇文章的目的就是詳細的剖析一下，並介紹 Vue 2.2 v-model改進的地方，然後穿插的再說點 Vue 的小知識。在 Vue 中，

Angular-ui-router進階二之巢狀檢視與多個檢視組合使用

ui-router巢狀檢視

檢視命名（相對命名與絕對命名）

相關推薦