Découvrez les différences entre jQuery et AngularJS et le charme d'AngularJS_AngularJS

AngualrJS est un framework d'application Web très attentionné. Il possède une très bonne documentation officielle et des exemples ; après avoir testé le célèbre projet TodoMVC dans un environnement réel, il se démarque parmi un grand nombre de frameworks et il existe de très bonnes démonstrations ou affichages partout sur Internet ; Mais pour un développeur qui n’a jamais été exposé à un framework similaire à AngularJS et qui utilise presque toujours des bibliothèques JavaScript comme jQuery, il est un peu difficile de passer de la pensée jQuery à la pensée AngularJS. Au moins c'est le cas pour moi, je souhaite donc partager quelques notes d'étude dans l'espoir d'aider certains développeurs.

Cet article utilise jQuery et Angular pour implémenter la même instance, afin de découvrir les différences entre les deux et le charme d'AngularJS.

Tout d'abord, bien sûr, vous devez référencer les fichiers jquery.js et angulaire.js.

■ Utilisez jQuery pour écrire un simple événement de clic

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

Et si nous voulons que davantage de divs passent par le même événement de clic ?

--首先要在页面中添加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();
})
})

Quelle est la situation dans AngularJS ?

■ Utilisez Angular pour écrire un simple événement de clic

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

Et si nous voulons que davantage de divs passent par le même événement de clic ?

--我们只要在页面中添加一个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> 

Ci-dessus, à travers un exemple simple pour comparer les différences entre jQuery et Angular, nous pouvons constater que : AngularJS répond aux changements via des déclarations. Par rapport à jQuery, AngularJS répond aux changements à moindre coût et est plus flexible.