标签：
用angularjs做简单的tab切换：
页面部分
<div>
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<ion-content class="ion-content">
<p>JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
</p>
</ion-content>
</script>
<script type="text/ng-template" id="two.tpl.html">
<ion-content class="ion-content">
<p>AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足： 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如： 使用双大括号{{}}语法进行数据绑定； 使用DOM控制结构来实现迭代或者隐藏DOM片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的DOM元素上； 能将HTML分组成可重用的组件。
</p>
</ion-content>
</script>
<script type="text/ng-template" id="three.tpl.html">
<ion-content class="ion-content">
<p>RequireJS的目标是鼓励代码的模块化，它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。 RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录</p>
</ion-content>
</script>
</div>
css样式部分
ul {
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
li {
float: left;
border-bottom-width: 0;
height:40px;
line-height:40px;
background-color:#2071B8;
color: #696969;
text-align:center;
width:33.3%;
color:#fff;
}
#mainView {
clear: both;
padding: 0 1em;
}
.active {
background-color: #175189;
color: #fff;
}
.ion-content{
margin-top:40px;
padding:15px;
}
.ion-content p{
color: #3E9AD2;
line-height:30px;
}
angularjs部分
angular.module(‘TabsApp‘, [‘ionic‘])
.controller(‘TabsCtrl‘, [‘$scope‘, function ($scope) {
$scope.tabs = [{
title: ‘jquery‘,
url: ‘one.tpl.html‘
}, {
title: ‘angularjs‘,
url: ‘two.tpl.html‘
}, {
title: ‘requirejs‘,
url: ‘three.tpl.html‘
}];
$scope.currentTab = ‘one.tpl.html‘;
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
标签：
原文地址：http://www.cnblogs.com/zzp5980/p/4598737.html
