著作權聲明：本文為博主原創文章，未經博主允許不得轉載 推薦閱讀：http://write.blog.csdn.net/postedit/74315843 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>
/* 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` modulevar app = angular.module('TrialApp', ['ui.router']);// Define routersapp.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>
/* 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` modulevar app = angular.module('TrialApp', ['ui.router']);// Define routersapp.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
下一期將會討論ui-router傳參的各種方法，敬請期待。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
