Experience the differences between jquery and Angularjs and Angularjs's charms _angularjs

Angualrjs is a very intimate Web application framework. It has very good official documentation and examples; After being tested in real-world TODOMVC project, it stands out in a massive framework, and there are good demos or demonstrations on the web. But for a developer who does not touch and Angularjs similar frameworks, and is almost always using a JavaScript library like jquery, it's hard to turn from jquery to Angularjs's idea. At least for me, so I want to share some of the learning notes and hope to help some developers.

This article uses jquery and angular two ways to implement the same example, to experience the difference between the two and the Angularjs charm.

First of all, you need to refer to 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 through the same click event?

--First to add the div in the page, and then add the corresponding code in JS
<button id= "Jquery-button" >jquery button</button> <div
" 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 kind of situation is it 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 through the same click event?

--we just add a div to the page and declare the
<div ng-app= "app" Ng-controller= "Appctrl as App" > <button by the Ng-hide property.
Ng-click= "App.toggle ()" >angular button</button>
<div ng-hide= "App.ishidden" >Angular content </div>
<div ng-hide= "App.ishidden" >angular content1</div>

Above, by using simple examples to compare the differences between jquery and angular, we can see that the ANGULARJS approach to change in a declarative manner is less costly and more flexible than the JQUERY,ANGULARJS response to change.