Make a simple tab switch with ANGULARJS

Make a simple tab switch with ANGULARJS:

Page section

<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 is another excellent JavaScript library following prototype. It is a lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 and subsequent versions will no longer support Ie6/7/8 browser. jquery makes it easier for users to work with HTML (an application under the standard Universal Markup Language), events, animate, and easily provide Ajax interactivity to the site. One of the big advantages of jquery is that its documentation is full, and the various applications are very detailed, as well as a number of mature plugins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, no more inserting a bunch of JS in the HTML to invoke the command, only need to define the ID.
jquery is a multi-browser-compatible JavaScript library, with the core idea of write Less,do more (write less and do more). Published in January 2006 by American John Resig in New York's BarCamp, jquery attracted a number of JavaScript gurus from around the world and was developed by Dave Methvin's team. Today, jquery has become the most popular JavaScript library, with more than 55% of the world's top 10,000 most visited sites using jquery. jquery is free, open source, and uses the MIT license Agreement. jquery's syntax is designed to make it easier for developers to manipulate document objects, select DOM elements, animate, event handling, use Ajax, and other features. In addition, JQuery provides APIs for developers to write plugins. Its modular approach makes it easy for developers to develop powerful static or dynamic Web pages.
JQuery, as implies, is JavaScript and query, which is a library of auxiliary JavaScript development.
</p>
</ion-content>
</script>

<script type= "text/ng-template" id= "two.tpl.html";
<ion-content class= "ion-content";
<p >angularjs is designed to overcome the lack of HTML in building applications. HTML is a good declarative language for static text presentation design, but it seems weak to build a Web application. So I did some work (you can also think of it as a gimmick) to get the browser to do what I want. In general, we solve the problem of static Web page technology in building dynamic applications through the following technologies: Class Library-Class library is a collection of functions that can help you write Web applications. It's your code that dominates, and it's up to you to decide when to use the class library. Class libraries are: The framework-framework of jquery is a special, already implemented Web application, and you just need to populate it with specific business logic. The framework here is the dominant one, and it is used to invoke your code based on the specific application logic. The framework is: Knockout, Sproutcore and so on. The
Angularjs uses a different approach, and it tries to make up for the drawbacks of HTML itself in building applications. Angularjs allows the browser to recognize the new syntax by using the structure we call Identifiers (directives). For example: Use double curly braces {{}}} syntax for data binding, use DOM control structure to iterate or hide dom fragments, support validation of forms and forms, associate logical code to related DOM elements, and make HTML components reusable.
</p>
</ion-content>
</script>

<script type= "Text/ng-template" id= "three.tpl.html" >
<ion-content class= "Ion-content" >
The goal of <p>requirejs is to encourage modularity of the code, which uses a script loading step that differs from the traditional label. It can be used to speed up and optimize code, but its main purpose is to modularize the code. It encourages the use of a module ID instead of a URL address when using a script. Requirejs loads all the code with an address relative to BaseURL. The top-level label of the page contains a special property data-main,require.js use to start the script loading process, while BaseURL is typically set to a directory that is consistent with that property </p>
</ion-content>
</script>
</div>

CSS Styles Section

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 part

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;
}
}]);

Make a simple tab switch with ANGULARJS