Erleben Sie die Unterschiede zwischen jQuery und AngularJS und den Charme von AngularJS_AngularJS

AngualrJS ist ein sehr rücksichtsvolles Webanwendungs-Framework. Es verfügt über eine sehr gute offizielle Dokumentation und Beispiele; nachdem das berühmte TodoMVC-Projekt in einer realen Umgebung getestet wurde, sticht es unter einer großen Anzahl von Frameworks heraus und es gibt überall im Internet sehr gute Demonstrationen oder Darstellungen. Aber für einen Entwickler, der noch nie mit einem AngularJS-ähnlichen Framework in Berührung gekommen ist und fast immer JavaScript-Bibliotheken wie jQuery verwendet, ist es etwas schwierig, vom jQuery-Denken zum AngularJS-Denken zu wechseln. Zumindest ist dies bei mir der Fall, daher möchte ich einige Studiennotizen teilen, in der Hoffnung, einigen Entwicklern zu helfen.

Dieser Artikel verwendet jQuery und Angular, um dieselbe Instanz zu implementieren, um die Unterschiede zwischen den beiden und den Charme von AngularJS kennenzulernen.

Zunächst müssen Sie natürlich auf die Dateien jquery.js und angle.js verweisen.

■ Verwenden Sie jQuery, um ein einfaches Klickereignis zu schreiben

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

Was ist, wenn wir möchten, dass mehr Divs durch dasselbe Klickereignis wechseln?

--首先要在页面中添加div，然后在js中添加相应的代码
<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();
})
})

Wie ist die Situation in AngularJS?

■ Verwenden Sie Angular, um ein einfaches Klickereignis zu schreiben

<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;
}
})

Was ist, wenn wir möchten, dass mehr Divs durch dasselbe Klickereignis wechseln?

--我们只要在页面中添加一个div,通过ng-hide属性来声明
<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> 

Oben können wir anhand eines einfachen Beispiels zum Vergleich der Unterschiede zwischen jQuery und Angular Folgendes feststellen: AngularJS reagiert auf Änderungen durch Deklarationen. Im Vergleich zu jQuery reagiert AngularJS zu geringeren Kosten und ist flexibler.