jQueryとAngularJSの違いとAngularJS_AngularJSの魅力を体験-jsチュートリアル-php.cn

jQueryとAngularJSの違いとAngularJS_AngularJSの魅力を体験

WBOY

リリース： 2016-05-16 15:16:30

オリジナル

1239 人が閲覧しました

AngualrJS は、非常に配慮された Web アプリケーションフレームワークです。非常に優れた公式ドキュメントとサンプルがあり、有名な TodoMVC プロジェクトを実際の環境でテストした結果、数多くのフレームワークの中でも際立っており、非常に優れたデモや展示がインターネット上のいたるところにあります。しかし、AngularJS に似たフレームワークに触れたことがなく、ほぼ常に jQuery などの JavaScript ライブラリを使用している開発者にとって、jQuery の考え方から AngularJS の考え方に切り替えるのは少し難しいです。少なくとも私にはこれが当てはまります。そのため、一部の開発者を助けることを願って、いくつかの研究メモを共有したいと思います。

この記事では、jQuery と Angular を使用して同じインスタンスを実装し、2 つの違いと AngularJS の魅力を体験します。

まず第一に、もちろん、jquery.js ファイルと angular.js ファイルを参照する必要があります。

■ jQuery を使用して単純なクリックイベントを作成する

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

ログイン後にコピー

同じクリックイベントをさらに多くの div で切り替えたい場合はどうすればよいでしょうか?

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

ログイン後にコピー

AngularJS ではどのような状況ですか?

■ Angular を使用して単純なクリックイベントを作成します

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

ログイン後にコピー

同じクリックイベントをさらに多くの div で切り替えたい場合はどうすればよいでしょうか?

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

ログイン後にコピー

上記では、jQuery と Angular の違いを比較する簡単な例を通して、次のことがわかります。 AngularJS は宣言を通じて変更に応答します。 jQuery と比較して、AngularJS はより低コストで変更に応答します。