ANGULARJS implements the MVVM tab sample code _ANGULARJS

Before implementing the ANGULARJS implementation of the MVVM tab, first move out of our common jquery implementations.

1, jquery implementation of simple and Rough tab effect

var nav = $ (". Tabs");//tab toggle
var box = $ (". box");//Container
nav.on ("click", Function () {//click event
 var this_index=$ ( This). index ();
 $ (this). AddClass ("active"). Siblings (). Removeclass ("active");
 Box.eq (This_index). Show (). siblings (). Hide ();
});

Here only give the JS core, HTML and CSS do not repeat.

The above code, simple and brutal implementation of the tab effect, with the Click event to getelem.index(), the index and container string control display hidden.

2, ANGULARJS Implementation of a simple tab effect

HTML section

 <section ng-app="myApp">
  <div class="tabs tabs-style" ng-controller="TabController as tab">
   <nav>
   <ul>
    <li ng-class="{'current':tab.isSet(1)}">
    <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
    <li ng-class="{'current':tab.isSet(2)}">
    <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
    <li ng-class="{'current':tab.isSet(3)}">
    <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
    <li ng-class="{'current':tab.isSet(4)}">
    <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
    <li ng-class="{'current':tab.isSet(5)}">
    <a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li>
   </ul>
   </nav>
   <div class="content">
   <section id="section-1" ng-show="tab.isSet(1)">
    <p>1</p>
   </section>
   <section id="section-2" ng-show="tab.isSet(2)">
    <p>2</p>
   </section>
   <section id="section-3" ng-show="tab.isSet(3)">
    <p>3</p>
   </section>
   <section id="section-4" ng-show="tab.isSet(4)">
    <p>4</p>
   </section>
   <section id="section-5" ng-show="tab.isSet(5)">
    <p>5</p>
   </section>
   </div>
  </div>
 </section>

CSS Section (here for our conveniencelesssyntax, children's shoes can customize CSS to achieve personalized effects)

* {margin:0;
padding:0;
 Body {background: #e7ecea;
 font-weight:600;
 font-family: ' Raleway ', Arial, Sans-serif;
Text-align:center;
 } A {color: #2CC185;
 Text-decoration:none;

 Outline:none;
 &:hover {color: #74777b;
 }}. tabs {position:relative;
 width:100%;

 margin:30px Auto 0 auto;
  NAV {ul position:relative;
  Display:flex;
  max-width:1200px;
  margin:0 Auto;
  List-style:none;
  Flex-flow:row Wrap;

  Justify-content:center;

   Li {flex:1;
   &.current a {color: #74777b;
  }}} a {display:block;
  position:relative;
  Overflow:hidden;

  line-height:2.5;
  span {vertical-align:middle;
  Font-size:1.5em; 

 }}. content {position:relative;
 Section {/* display:none; * * margin:0 auto;

 max-width:1200px;
  &.content-current {/* display:block; */} p {Color:rgba (40,44,42, 0.4);
  margin:0;
  Padding:1.75em 0;
  font-weight:900;
  Font-size:5em;
 Line-height:1;
}
 }}. Tabs-style {nav {/* BACKGROUND:RGBA (255,255,255,0.4);/ul Li {a {overflow:visible;
  border-bottom:1px solid Rgba (0,0,0,0.2);
  -webkit-transition:color 0.2s;
  Transition:color 0.2s;
  } ul li.current a{&:after, &:before {content: ';
  Position:absolute;
  top:100%;
  left:50%;
  width:0;
  height:0;
  Border:solid Transparent;
  } &:after {margin-left: -10px;
  border-width:10px;
  Border-top-color: #e7ecea;
  } &:before {margin-left: -11px;
  border-width:11px;
  Border-top-color:rgba (0,0,0,0.2); }
 }
 }
}

JS part

Angular.module (' myApp ', [])
 . Controller (' Tabcontroller ', function () {
 this.current = 1;

 this.setcurrent = function (tab) {
 this.current = tab;
 }

 ; This.isset = function (tab) {return
 this.current = = tab;};}
);

The final effect is shown in the following illustration:

Through the above code, we can find that the core of the implementation is ANGULARJS built-inng-classandng-click,ng-showdirective.

In layman's terms: Controller defines current this data defaults to 1, gives theng-clickclick event Custom Function, changes thecurrentdata, andng-classcurrentadds a style to the currently selected index by the value binding conditioncurrentobtained, The container also obtainscontrollerdata from thecurrentng-showcontrol display hidden.

3, ANGULARJS implementation of a slightly more complex mobile-side tab effect

HTML section

<script src= "Http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js" ></script>
<script src= " Http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js "></script>
//angularjs, a mobile end Touch event Library

<div ng-app= ' myApp ' ng-controller= "Mycontroller" >
 <div class= "Type-tabs" >
  <div Ng-repeat= "item in [1,2,3,4]" ng-click= "Changeindex ($index)" >Tab{{item}}</div>
 </div>
 < Div class= "Guid-bar" >
  <div class= "guid-bar-content" style= "left:{{25*activeindex}}%" ></div>
 </div>
 <div class= "tab-content" ng-swipe-right= "Swiperight ()" ng-swipe-left= "Swipeleft ()" >
  <div class= "Tab-content-inner" style= "left:{{ -100*activeindex}}%" >
  <div class= " Tab-content-item "ng-repeat=" item in [1,2,3,4] ">
   <br/><br/><br/><br/>-



			

CSS Section

*{
 padding:0;
 margin:0;
 font-family: ' Arial ';
type-tabs{
 width:100%;
 height:40px
}
. Type-tabs div{
 float:left;
 width:25%;
 line-height:40px;
 Text-align:center;
 Cursor:pointer;
 User-select:none; 
 -webkit-user-select:none

}
. guid-bar{
 position:relative;
 Margin-top: -3px
}
. guid-bar-content{
 width:25%;
 height:3px;
 Background-color: #345;
 Position:absolute;
 left:50%;
 Transition:all 400ms ease;
tab-content{
 width:100%;
 height:500px;
 Background-color: #ccc;
 Overflow:hidden
}
. tab-content-inner{
 width:400%;
 position:relative;
 Transition:all 400ms;
tab-content-item{
 width:25%;
 Float:left;
 Text-align:center;
}

JS part

var myapp=angular.module (' myApp ', [' Ngtouch ']);
Myapp.controller (' Mycontroller ', function ($scope) {
 $scope. activeindex=0;
 $scope. Changeindex=function (index) {
  $scope. activeindex=index;
 };
 $scope. Swipeleft=function () {
  $scope. activeindex=++ $scope. Activeindex;
  $scope. Check ();
 };
 $scope. Swiperight=function () {
  $scope. activeindex=--$scope. Activeindex;
  $scope. Check ();
 };
 $scope. Check=function () {
  if ($scope. activeindex>3)
  $scope. activeindex=0;
  if ($scope. activeindex<0)
  $scope. Activeindex=3
 }
})

The effect is as follows:

OK, today we give these two examples, to Angularjs know the children's shoes, directly look at the code should be able to understand quickly. The children's shoes, which have not been understood, can also be used to understand the black magic of MVVM and its code structure through these two examples.

4. Where is the MVVM mode of the ANGULARJS better than the DOM operation of jquery?

1. From the macroscopic point of view, one is to manipulate data, one is to manipulate Dom and UI interaction.

General Web project process can be summed up to three processes: 1 you want to get the interface of data 2, background Exchange data 3, after obtaining the data, the interface is rendered again. In this process, you and the background data exchange how to achieve? jquery Ajax Bar, if the data Exchange API assumes more than 20, then $.get or $.ajax How many can you write to include all? And all API links are not in one place, and management is rather cumbersome. and Angularjs as long asroutethe configuration is OK.
After getting the data, how do you manage the data, rendering the data to the interface?

How do I manage various events? jquery itself, the event trigger, is a lot of times when you're writing a process that triggers events-> process data. Obviously, a lot of functions, the code will be the same as the noodles, interwoven together. There are no less than two or three years of traditional jquery front-end, event delegates, Dom operations, browser rendering process, plug-in component packaging, and so did not go into the in-depth study, we can imagine how bad the quality of the code. In fact, jquery is a class library, not a development framework, JQ is a further encapsulation of the JS native API, making you more enjoyable for DOM operations, animation operations, and Ajax, because he is too flexible, so it is easier to write code difficult to maintain.

2, Performance aspects: DOM operation slow, DOM object itself is a JS object, so strictly speaking, is not the operation of the object slow, but said that the operation of the object, will trigger some browser behavior, such as layout (layout) and drawing (paint).

Summarize

As Web products become more complex, layered architecture is essential, so two-way binding as an antidote, combined with the early popular MVC framework, derived MVVM this artifact. Bloggers believe that MVVM will be the ultimate solution to the front end. It takes a process to adapt from DOM operations to data operations, but as long as the results are good, the effort is worth it. In this process, it is also a kind of promotion to your professional ability. Come on, little friends,!!!.