Experience the differences between jQuery and AngularJS and the fascinating aspects of AngularJS

AngualrJS is a very thoughtful web application framework. It has good official documentation and examples; After testing the famous TodoMVC project in the real environment, it stands out among the numerous frameworks. And there are great demonstrations and demonstrations all over the Internet. But for a developer who has no experience with a framework similar to AngularJS and uses almost all of the JavaScript libraries like jQuery, it can be a bit difficult to move from jQuery to AngularJS. At least for me, so I'd like to share some study notes in the hope of helping a few developers.

This article implements the same example in both jQuery and Angular to experience the differences between the two and the charm of AngularJS.

First, of course, you need to refer to 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 div to implement toggle with one click event?

-- The first thing to do is add to the page div And then in js Add the corresponding code in 
<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();
})
})

How about 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 div to implement toggle with one click event?

-- We just add it to the page 1 a div, through ng-hide Property 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>
</div> 

By comparing the differences between jQuery and Angular through simple examples above, we can find that AngularJS is cheaper and more flexible than jQuery in dealing with change by means of declarations.