Before implementing the mvvm-style tab of Angularjs, we first move out our commonly used jquery implementation.
1. jquery achieves simple and crude tab effect
var nav = $(".tabs");//tab switch 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();});Only the core part of js is given here, and html and css are not detailed.
The above code simply and roughly implements the tab effect, and uses the click event to obtain elem.index() , string the index and container together to control the display and hide it.
2. angularjs implements a simple tab effect
Html part
<section ng-app="myApp"> <div 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> </nav> <div> <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> </section> CSS part (To facilitate us to use Less syntax, 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 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 figure below:
Through the above code, we can find that the core of the implementation is ng-class and ng-click and ng-show directives built in angularjs.
In simple terms: the controller defines current data. The default value of the data is 1. ng-click customizes the function of the click event and changes the current data. ng-class obtains current value binding condition and adds a current style to the currently selected index. The container also obtains current data in controller and displays it hidden through ng-show control.
3. angularjs achieves a slightly complex mobile tab effect
html part
<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>//A mobile touch event library for angularjs<div ng-app='myApp' ng-controller="myController"> <div> <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div> </div> <div> <div style="left:{{ 25*activeIndex}}%"></div> </div> <div ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()"> <div style="left:{{ -100*activeIndex}}%"> <div ng-repeat="item in [1,2,3,4]" > <br /><br /><br /><br /><br /> <h1>Tab{{item}} </h1></div> </div> </div> </div> </div> </div> </div>CSS part
*{ 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 effects are as follows:
Okay, today we will give these two examples. You can quickly understand the children's shoes you have learned about angularjs by looking at the code directly. Children's shoes that you have never understood can also learn about mvvm's black magic and its code organization structure through these two examples.
4. What is better about the mvvm mode of angularjs than the dom operation of jquery?
1. From a macro perspective, one is to operate data and process data, and the other is to operate dom and ui interaction.
The process of a general web project can be summarized into three processes: 1) You want to obtain the data on the interface 2) Exchange data in the background 3) After obtaining the data, re-render the interface. In this process, how do you implement data exchange with the backend? jquery's ajax. If the data exchange API assumes more than 20, how many $.get or $.ajax do you need to write to include it all? Moreover, all API links are not in the same place, which is quite troublesome to manage. And angularjs just configure route .
After obtaining the data, how do you manage this data and how do you render the data to the interface?
How to manage various events? jquery itself is characterized by event triggering. Many times, it is when you write a process for triggering events->processing data. Obviously, once there are more functions, the code will be intertwined like noodles. There are many traditional jquery front-ends around me for two or three years. I have not studied in-depth research on event delegation, dom operations, browser rendering processes, plug-in component packaging, etc., so you can imagine how bad the code quality is. In fact, jquery is a class library, not a development framework. jq is a further encapsulation of js native APIs, allowing you to perform dom operations, animation operations and ajax more happily. It is precisely because it is too flexible that it is easier to write difficult-to-maintain code.
2. Performance: DOM operation is slow, and the DOM object itself is also a js object. So strictly speaking, it is not that operating this object is slow, but that after operating this object, some browser behaviors will be triggered, such as layout and painting.
Summarize
As web products become more and more complex, hierarchical architecture is essential. Therefore, two-way binding is used as an antidote, combined with the MVC framework that has been popular for a long time, the MVVM artifact was derived. The blogger firmly believes that mvvm will be the ultimate solution for the front-end. From DOM operation to data operation, it takes a process to adapt, but as long as the result is good, these efforts are worth it. In this process, it is also an improvement to your professional abilities. Come on, my friends! ! !