說到frameset叹括，一些老的前端工程師肯定不陌生，是一種用于實現(xiàn)框架式布局的標簽宵荒，但是在Html5中將這個標簽廢棄掉了汁雷。那么，在如今Html5大行天下的時代报咳，我們又如何去實現(xiàn)框架式布局呢侠讯？
本片文章，我們將介紹一下如何在H5中實現(xiàn)框架式布局暑刃，這邊我們需要借助AngularJs框架(多這個框架不熟悉的厢漩，建議先去學習一下基礎再來看這篇文章)，在AngularJs中實現(xiàn)了一個叫ng-router的路由框架岩臣，它式用于實現(xiàn)H5頁面跳轉的袁翁，但是他的跳轉與我們想要的框架式布局不同，它實現(xiàn)的式整個頁面的跳轉婿脸，而不是頁面內局部內容的跳轉粱胜。
這邊我們要引入本片文章的核心AngularUI提供的ui-router,AngularUI是國外牛人基于AngularJs的拓展，他提供了很多的module可以方面我們使用狐树，這邊我們使用ui-router這個Module可以實現(xiàn)我們需要的框架式布局焙压。
下面，我們來看一下源碼：
1.創(chuàng)建index.html,他是web app的入口頁面
...
<script src="frameworks/angular.js"></script>
<script src="frameworks/angular-ui-router.js"></script>
<script src="js/app.js"></script>
...
<body ng-app="app">
<nav style="background-color: grey">
<a href="#" ui-sref="page1">Page1</a>
<a href="#" ui-sref="page2">Page2</a>
<a href="#" ui-sref="page3">Page3</a>
</nav>
<div ui-view=""></div>
</body>
1.首先需要導入angularJs與ui-router兩個庫抑钟，請自行下載涯曲，app.js在后面講解。
2.body 帶有ng-app在塔，告訴angularJs幻件，body包起來的代碼是angular需要維護的代碼塊(angular基礎知識)
3.ui-sref為告訴ui-router根據(jù)當前狀態(tài)加載頁面。
4.ui-view蛔溃，ui-router實現(xiàn)框架式布局的占位符绰沥，可以定義名字
2.創(chuàng)建page1~2
<!-- Page1 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div>
<div style="width: 20%; float: left">
<ul>
<li><a href="#" ui-sref=".tab1">Tab1</a></li>
<li><a href="#" ui-sref=".tab2">Tab2</a></li>
</ul>
</div>
<div style="float: left; width: 80%" ui-view=""></div>
</div>
</body>
</html>
<!-- Page2 -->
<!--<h1 style="background-color: green">This is page2</h1>-->
<div style="background-color: green">
<div ui-view="content1"></div>
<div ui-view="content2"></div>
</div>
3.創(chuàng)建page1對應的兩個tab
<!-- page1_tab1.html -->
<div style="height: 400px;background-color: cadetblue">This is Tab1 in Page1</div>
<!-- page1_tab2.html -->
<div style="height: 400px;background-color: darkolivegreen">This is Tab1 in Page2</div>
4.關鍵的app.js
var app = angular.module("app", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/page1");
$stateProvider
.state("page1",{
url:"/page1",
templateUrl:"tmpls/page1.html"
})
.state("page2", {
url:"/page2",
// templateUrl:"tmpls/page2.html"
views:{
'':{
templateUrl:"tmpls/page2.html"
},
'content1@page2':{
template:'我是content1'
},
'content2@page2':{
template:'我是content2'
}
}
})
.state("page3",{
url:"/page3",
template:"This is page3"
})
.state("page1.tab1", {
url:"/page1_tab1",
templateUrl:"tmpls/page1_tab1.html"
})
.state("page1.tab2", {
url:"/page1_tab2",
templateUrl:"tmpls/page1_tab2.html"
});;
});
1.$urlRouterProvider有兩個方法
? when():兩個參數(shù)篱蝇，第一個是希望匹配的路徑，第二個是沒有匹配到時希望重定向的路徑徽曲。
? otherwise():這個方法時沒有匹配到時重定向的路徑零截，類似于switch-case中的default
2.$stateProvider.state,記錄的時各種狀態(tài)跳轉信息，類似與switch-case
3.views主要用于布局中有多個ui-view的情況秃臣，可以對不同的ui-view使用特定的templateUrl等涧衙，絕對view使用‘@’符號來區(qū)別，比如content2@page2表明content2的ui-view使用了page2狀態(tài)的模板奥此。
4.當模板是html時弧哎，使用templateUrl；當模板就是一段文本時稚虎，使用template
至此傻铣，功能就已經實現(xiàn)了，當然還可以使用動畫來改變頁面切換的效果祥绞，大家可以嘗試一下非洲。
