AngularJs笔记-- ui-router替换framese
说到frameset，一些老的前端工程师肯定不陌生，是一种用于实现框架式布局的标签，但是在Html5中将这个标签废弃掉了。那么，在如今Html5大行天下的时代，我们又如何去实现框架式布局呢？
本片文章，我们将介绍一下如何在H5中实现框架式布局，这边我们需要借助AngularJs框架(多这个框架不熟悉的，建议先去学习一下基础再来看这篇文章)，在AngularJs中实现了一个叫ng-router的路由框架，它式用于实现H5页面跳转的，但是他的跳转与我们想要的框架式布局不同，它实现的式整个页面的跳转，而不是页面内局部内容的跳转。
这边我们要引入本片文章的核心AngularUI提供的ui-router,AngularUI是国外牛人基于AngularJs的拓展，他提供了很多的module可以方面我们使用，这边我们使用ui-router这个Module可以实现我们需要的框架式布局。
下面，我们来看一下源码：
1.创建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根据当前状态加载页面。
4.ui-view，ui-router实现框架式布局的占位符，可以定义名字
2.创建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.创建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():两个参数，第一个是希望匹配的路径，第二个是没有匹配到时希望重定向的路径。
otherwise():这个方法时没有匹配到时重定向的路径，类似于switch-case中的default
2.$stateProvider.state,记录的时各种状态跳转信息，类似与switch-case
3.views主要用于布局中有多个ui-view的情况，可以对不同的ui-view使用特定的templateUrl等，绝对view使用‘@’符号来区别，比如content2@page2表明content2的ui-view使用了page2状态的模板。
4.当模板是html时，使用templateUrl；当模板就是一段文本时，使用template
至此，功能就已经实现了，当然还可以使用动画来改变页面切换的效果，大家可以尝试一下。
