Experience the differences between jQuery and AngularJS and the charm of AngularJS, jqueryangularjs

Experience the differences between jQuery and AngularJS and the charm of AngularJS, jqueryangularjs

AngualrJS is a very considerate web application framework. It has good official documents and examples. After testing the famous TodoMVC project in the real environment, it stands out in a massive number of frameworks, and it is well demonstrated or displayed everywhere on the Internet. However, for developers who have never touched a framework similar to AngularJS and are still using JavaScript class libraries such as jQuery, it is a little difficult to change from jQuery to AngularJS. At least for me, so I want to share some study notes to help some developers.

This article uses jQuery and Angular to implement the same instance, so as to experience the differences between the two and the charm of AngularJS.

First of all, you must reference the jquery. js and angular. js files.

■ Use jQuery to write a simple click event

<button id="jquery-button">JQuery Button</button><div id="jquery-content">I am jquery content</div>$(function(){$("#jquery-button").click(function(){$('#jquery-content').toggle();})}) 

What if we want more divs to implement toggle through the same click event?

-- First, add a div to the page, then add the corresponding code <button id = "jquery-button"> JQuery Button </button> <div id = "jquery-content"> I am jquery content </ div> <div id = "jquery-content1"> I am jquery content1 </div> $ (function () {$ ("# jquery-button "). click (function () {$ ('# jquery-content '). toggle (); $ ('# jquery-content1 '). toggle ();})})

What is the situation in AngularJS?

■ Use Angular to write a simple click event

<div ng-app="app" ng-controller="AppCtrl as app"><button ng-click="app.toggle()">Angular Button</button><div ng-hide="app.isHidden">Angular content</div></div>var app = angular.module("app",[]);app.controller("AppCtrl", function(){var app = this;app.isHidden = false;app.toggle = function(){app.isHidden = !app.isHidden;}})

What if we want more divs to implement toggle through the same click event?

-- We only need to add a div in the page, use the ng-hide attribute to declare <div ng-app = "app" ng-controller = "AppCtrl as app"> <button ng-click = "app. toggle () "> Angular Button </button> <div ng-hide =" app. isHidden "> Angular content </div> <div ng-hide =" app. isHidden "> Angular content1 </div>

We can use a simple example to compare the differences between jQuery and Angular. We can find that AngularJS responds to changes through declaration. Compared with jQuery, angularJS has lower and more flexible costs to cope with changes.

Articles you may be interested in:

• Write KindEditor, UEidtor, and jQuery commands in Angularjs
• Differences between jQuery and AngularJS
• Comparison and analysis of the difference between $ http. post and jQuery. post in AngularJS
• Jquery operates angularjs objects
• Use JQUERY paging control in ANGULARJS
• Method summary for Jquery and angularjs to obtain the value selected in the check box