Alami perbezaan antara jQuery dan AngularJS dan daya tarikan AngularJS_AngularJS

AngualrJS ialah rangka kerja aplikasi web yang sangat bertimbang rasa. Ia mempunyai dokumentasi dan contoh rasmi yang sangat baik selepas menguji projek TodoMVC yang terkenal dalam persekitaran sebenar, ia menonjol di antara sejumlah besar rangka kerja dan terdapat demonstrasi atau paparan yang sangat baik di mana-mana di Internet. Tetapi bagi pembangun yang tidak pernah terdedah kepada rangka kerja yang serupa dengan AngularJS dan yang hampir selalu menggunakan perpustakaan JavaScript seperti jQuery, agak sukar untuk beralih daripada pemikiran jQuery kepada pemikiran AngularJS. Sekurang-kurangnya ini berlaku untuk saya, jadi saya ingin berkongsi beberapa nota kajian dengan harapan dapat membantu beberapa pembangun.

Artikel ini menggunakan jQuery dan Angular untuk melaksanakan contoh yang sama, untuk mengalami perbezaan antara keduanya dan daya tarikan AngularJS.

Pertama sekali, sudah tentu, anda perlu merujuk fail jquery.js dan angular.js.

■ Gunakan jQuery untuk menulis acara klik mudah

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

Bagaimana jika kita mahu lebih banyak div menogol melalui acara klik yang sama?

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

Apakah keadaan di AngularJS?

■ Gunakan Angular untuk menulis acara klik mudah

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

Bagaimana jika kita mahu lebih banyak div menogol melalui acara klik yang sama?

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

Di atas, melalui contoh mudah untuk membandingkan perbezaan antara jQuery dan Angular, kita boleh mendapati bahawa: AngularJS bertindak balas kepada perubahan melalui pengisytiharan Berbanding dengan jQuery, AngularJS bertindak balas kepada perubahan pada kos yang lebih rendah dan lebih fleksibel.