Experience the differences between jQuery and AngularJS and the charm of AngularJS _ AngularJS-js tutorial

AngualrJS is a very considerate web application framework. This article uses jQuery and Angular to implement the same instance, in this way, you can experience the differences between the two and the charm of AngularJS 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

JQuery Button
I am jquery content
$(function(){$("#jquery-button").click(function(){$('#jquery-content').toggle();})}) 

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

-- First, add p to the page, and then add the corresponding code in js.JQuery Button
I am jquery content
I am jquery content1
$ (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

Angular Button
Angular content
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 p to implement toggle through the same click event?

-- We only need to add a p to the page and declare it through the ng-hide attribute.
Angular Button
Angular content
Angular content1
 

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.