データバインディング
あなたはウェブページの作成に取り掛かり、動的データがあると思われるときはいつでも{{データバインディング}}を配置し続けます。その後、Angularは$ scopeハンドラーを提供します。これは、（静的に、またはWebサーバーへの呼び出しを通じて）入力できます。
これはデータバインディングをよく理解しています。あなたはそれを理解したと思います。
DOM操作
データ操作を伴わない単純なDOM操作（例：マウスホバーでの色の変更、クリックで要素を非表示/表示）の場合、jQueryまたは古い学校のjsで十分でよりクリーンです。これは、angularのmvcのモデルがページ上のデータを反映するものであると想定しているため、色、表示/非表示などのcssプロパティはモデルに影響を与えません。
「シンプル」なDOM操作がよりクリーンであるという点については、ここで説明できますが、ごくまれに、本当に「シンプル」でなければなりません。DOMの操作は、データバインディングと同様に、Angularが本当に輝く領域の1つだと思います。これを理解することは、Angularがその見方をどのように考慮するかを理解するのにも役立ちます。
まず、Angularの方法を、DOM操作に対するバニラjsアプローチと比較します。従来、HTMLは何も「実行」していないと考え、そのように記述していました。したがって、「onclick」などのインラインjsは、「do」を行わないHTMLのコンテキストに「doing」を配置するため、不適切な方法です。Angularはその概念を逆転させています。ビューを書いているとき、HTMLは多くのことを「実行」できると考えています。この機能は角度ディレクティブで抽象化されていますが、それらがすでに存在する場合、またはそれらを記述している場合は、「方法」を実行する方法を考慮する必要はありません。角度はあなたが使用できるようにします。これは、すべてのビューロジックが本当にビューに含まれていることも意味します。あなたのjavascriptファイルにはありません。繰り返しになりますが、Javascriptファイルに記述されたディレクティブはHTMLの機能を向上させていると見なすことができるため、DOMに（いわば）操作することを心配させます。簡単な例で説明します。
これは、使用したいマークアップです。直感的な名前を付けました。
<div rotate-on-click="45"></div>
最初に、カスタムのAngular Directiveを介してこの機能をHTMLに提供している場合は、すでに完了しているとコメントします。それは新鮮な空気の息吹です。その詳細については後で説明します。
jQueryによる実装
ここでライブデモ（クリック）。
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
Angularによる実装
ここでライブデモ（クリック）。
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
とても軽く、とてもきれいで、それは単純な操作です！私の意見では、特に機能が抽象化され、DOM操作がDOMで宣言されている方法に関して、あらゆる点で角度アプローチが勝っています。機能はhtml属性を介して要素にフックされているため、セレクターを介してDOMをクエリする必要はありません。2つのクロージャーがあり、1つはディレクティブファクトリ用のクロージャーで、ディレクティブのすべての使用法で変数が共有されます、およびlink関数（またはcompile関数）でのディレクティブの使用ごとに1つのクロージャ。
双方向のデータバインディングとDOM操作用のディレクティブは、Angularをすばらしいものにするほんの始まりにすぎません。Angularは、すべてのコードがモジュール化され、再利用可能で、簡単にテストできることを促進し、単一ページのアプリルーティングシステムも含みます。jQueryは一般的に必要とされる便利な/ブラウザー間のメソッドのライブラリーですが、Angularはフル機能のフレームワークであることに注意することが重要です単一ページのアプリを作成するためのであることです。角度スクリプトには、jQueryの独自の「ライト」バージョンが実際に含まれているため、最も重要なメソッドのいくつかを使用できます。したがって、jQueryを使用してAngular ISを（軽く）使用すると主張することもできますが、Angularはアプリの作成プロセスに役立つ「魔法」をはるかに提供します。
これは、より関連する情報の優れた投稿です。jQueryのバックグラウンドがある場合、どうすれば「AngularJSで考える」ことができますか？
一般的な違い。
上記のポイントは、OPの特定の懸念を対象としています。その他の重要な違いについても概説します。各トピックについても追加の読み物を行うことをお勧めします。
AngularとjQueryを合理的に比較することはできません。
Angularはフレームワーク、jQueryはライブラリです。フレームワークには場所があり、ライブラリには場所があります。ただし、優れたフレームワークがアプリケーションを作成する上で、ライブラリよりも強力であることは間違いありません。それがまさにフレームワークのポイントです。単純なJSでコードを記述してもかまいません。一般的な関数のライブラリを追加したり、フレームワークを追加して、ほとんどのことを実行するために必要なコードを大幅に削減したりすることもできます。したがって、より適切な質問は次のとおりです。
フレームワークを使用する理由
優れたフレームワークは、モジュール式（したがって再利用可能）、DRY、読み取り可能、高性能、安全なコードを設計するのに役立ちます。jQueryはフレームワークではないため、これらの点では役に立ちません。jQueryスパゲッティコードの典型的な壁を見てきました。これはjQueryのせいではありません-コードの設計方法を知らない開発者のせいです。ただし、開発者がコードの設計方法を知っていた場合、先ほど説明した基盤（アーキテクチャなど）を提供するために、ある種の最小限の「フレームワーク」を作成するか、何かを追加します。たとえば、 RequireJSを追加して、優れたコードを作成するためのフレームワークの一部として機能させることができます。
ここでは、最新のフレームワークが提供しているいくつかのものを示します。
- テンプレート
- データバインディング
- ルーティング（単一ページアプリ）
- クリーンでモジュール式の再利用可能なアーキテクチャ
- 安心
- 便利な追加機能/機能
Angularについてさらに説明する前に、Angularが唯一の種類ではないことを指摘しておきます。たとえば、DurandalはjQuery、Knockout、およびRequireJSの上に構築されたフレームワークです。繰り返しますが、jQuery自体では、Knockout、RequireJS、およびそれらの上に構築されたフレームワーク全体が提供できるものを提供できません。それは比較できないだけです。
惑星を破壊する必要があり、デススターがある場合は、デススターを使用します。
Angular（再考）。
フレームワークが何を提供するかについての以前のポイントに基づいて、Angularがフレームワークを提供する方法を賞賛し、これがjQueryだけよりも事実上優れているという理由を明らかにしたいと思います。
DOM参照。
上記の例では、機能を提供するためにjQueryがDOMにフックする必要があるのは絶対に不可避です。つまり、ビュー（html）は機能（「イメージスライダー」などの識別子でラベル付けされているため）に関係し、JavaScriptはその機能の提供に関係しています。Angularは抽象化によってその概念を排除します。Angularで適切に記述されたコードは、ビューが独自の動作を宣言できることを意味します。時計を表示したい場合：
<clock></clock>
できました。
はい、それを意味のあるものにするためにJavaScriptにアクセスする必要がありますが、jQueryアプローチとは逆の方法でこれを実行しています。私たちのAngularディレクティブ（それ自体が小さな世界にあります）は、htmlを「拡張」し、htmlはそれ自体に機能をフックします。
MVWアーキテクチャ/モジュール/依存性注入
Angularは、コードを構造化する簡単な方法を提供します。ビューのものはビュー（html）に属し、拡張ビュー機能はディレクティブに属し、他のロジック（ajax呼び出しなど）および関数はサービスに属し、サービスとロジックのビューへの接続はコントローラーに属します。サービスの構成や変更などの処理に役立つ他の角度コンポーネントもあります。作成した機能は、アプリケーション全体で依存性注入を処理するインジェクターサブシステムを介して、必要な場所で自動的に利用できます。アプリケーション（モジュール）を作成するとき、それを他の再利用可能なモジュールに分割し、それぞれに独自の再利用可能なコンポーネントを追加してから、それらをより大きなプロジェクトに含めます。Angularで問題を解決したら、将来の再利用のために便利で構造化された方法で自動的に解決し、次のプロジェクトに簡単に組み込むことができます。あこれらすべての大きなボーナスは、コードのテストがはるかに簡単になることです。
Angularで物事を「機能させる」ことは簡単ではありません。
よかった。前述のjQueryスパゲッティコードは、何かが「機能する」ようになり、次に進んだ開発者の結果です。あなたは悪いAngularコードを書くことができますが、Angularはそれについてあなたと戦うので、そうすることははるかに困難です。つまり、それが提供するクリーンなアーキテクチャを（少なくともある程度）利用する必要があります。言い換えると、Angularで不良コードを書くのは難しいですが、クリーンなコードを書く方が便利です。
Angularは完璧にはほど遠いです。Web開発の世界は常に成長し、変化しており、問題を解決するための新しい、より良い方法があります。たとえば、FacebookのReactとFluxには、Angularに比べていくつかの大きな利点がありますが、欠点もあります。完璧なものはありませんが、Angularは今までも今も、そして今も素晴らしいです。jQueryがかつてウェブの世界を前進させるのを助けたように、Angularもそうです。