私がjQueryのバックグラウンドを持っているならば「AngularJSで考える」？
命令的→宣言的
JQueryでは、セレクタを使って _ dom _ 要素を見つけ、それらにイベントハンドラをバインド/登録します。イベントがトリガーされると、その（必須）コードが実行されてDOMを更新または変更します。
AngularJSでは、DOM要素ではなく views について考えたいと思います。ビューはAngularJS ディレクティブ を含む（宣言型）HTMLです。ディレクティブは舞台裏でイベントハンドラを設定し、動的データバインディングを提供します。セレクタはめったに使用されないので、ID（およびいくつかの種類のクラス）の必要性は大幅に減少します。ビューは（スコープを介して） models に関連付けられています。ビューはモデルの投影です。イベントはモデル（つまり、データ、スコープのプロパティ）を変更し、それらのモデルを投影するビューは「自動的に」更新されます。
AngularJSでは、データを保持するjQueryで選択されたDOM要素ではなくモデルについて考えてください。ユーザーの見るものを操作するためにコールバックを登録するのではなく、ビューをそれらのモデルの射影として考えてください。
関心事の分離
jQueryは 目立たないJavaScript - 動作（JavaScript）を構造（HTML）から分離しています。
AngularJSは controllers とディレクティブ（それぞれが独自のコントローラーを持つことができ、そして/またはコンパイルとリンク関数を持つことができます）を使用してビュー/構造（HTML）から振る舞いを取り除きます。 Angularには、 services および filters もあり、アプリケーションの分離/整理に役立ちます。
https://stackoverflow.com/a/14346528/215945 も参照してください。
アプリケーション設計
AngularJSアプリケーションを設計するための1つのアプローチ：
- あなたのモデルについて考えてください。それらのモデル用のサービスまたは独自のJavaScriptオブジェクトを作成します。
- 自分のモデルをどのように提示したいか - あなたの見解について考えてみてください。動的データバインディングを取得するために必要なディレクティブを使用して、各ビュー用のHTMLテンプレートを作成します。
- 各ビューにコントローラを接続します（ng-view and routing、またはng-controllerを使用）。ビューにその仕事をさせるのに必要なモデルデータだけをコントローラに検索させます。コントローラはできるだけ薄くしてください。
プロトタイプの継承
JavaScriptのプロトタイプ継承がどのように機能するのかを知らなくても、jQueryを使って多くのことができます。 AngularJSアプリケーションを開発するときに、JavaScriptの継承について十分に理解していれば、一般的な落とし穴を避けることができます。推奨読書： AngularJSのスコープのプロトタイプ/プロトタイプ継承のニュアンスは何ですか？
Angular JS対jQuery
Angular JSとjQueryは、まったく異なるイデオロギーを採用しています。あなたがjQueryから来ているなら、あなたは違いのいくつかが驚くべきことに気付くかもしれません。 Angularはあなたを怒らせるかもしれません。
これは正常です、あなたはプッシュスルーする必要があります。 Angularはその価値があります。
大きな違い（TLDR）
jQueryはあなたにDOMの任意の部分を選択し、それらに特別な変更を加えるためのツールキットを提供します。あなたは少しずつ好きなことを何でもすることができます。
AngularJSは代わりにcompilerを提供します。
これが意味するのは、AngularJSがDOM全体を上から下に読み、それをコードとして、文字通りコンパイラへの命令として扱うということです。 DOMを横断する際に、AngularJSコンパイラに動作方法と実行方法を指示する特定のdirectives（コンパイラ指令）を探します。ディレクティブはJavaScriptでいっぱいの小さなオブジェクトで、属性、タグ、クラス、さらにはコメントに対しても一致します。
DOMの一部が特定のディレクティブと一致するとAngularコンパイラが判断すると、ディレクティブ関数を呼び出し、DOM要素、任意の属性、現在の$ scope（ローカル変数ストア）を渡します。そして他の有用なビット。これらの属性はDirectiveによって解釈されることができて、そしてそれがどのようにレンダリングするか、そしていつそれがそれ自身を再描画するべきであるかをそれに伝える表現を含むかもしれません。
その後、ディレクティブは、コントローラ、サービスなどのAngularコンポーネントを追加することができます。コンパイラの一番下に出てくるのは、完全に形成されたWebアプリケーションです。
これは、AngularがTemplate Drivenであることを意味します。あなたのテンプレートはJavaScriptを動かしますが、その逆ではありません。これは役割の根本的な逆転であり、ここ10年ほどで私たちが書いてきた控えめなJavaScriptの正反対です。これには慣れるまでに時間がかかることがあります。
これが過度に規範的で制限的であるように思われる場合、真実からそれ以上遠くなることはできません。 AngularJSはあなたのHTMLをコードとして扱うので、あなたはあなたのWebアプリケーションでHTMLレベルの細かさを得ます。すべてが可能であり、そして概念的な飛躍を少し行えば、ほとんどのことは驚くほど簡単です。
一見したところです。
最初に、AngularはjQueryを置き換えません
AngularとjQueryは異なることをします。 AngularJSは、Webアプリケーションを作成するための一連のツールを提供します。 jQueryは主にDOMを修正するためのツールを提供します。あなたのページにjQueryがある場合、AngularJSはそれを自動的に使います。そうでなければ、AngularJSにはjQuery Liteが同梱されています。これは切り詰められたものですが、まだ完全に使用可能なバージョンのjQueryです。
MiskoはjQueryが好きで、それを使っていることに反対しません。ただし、スコープ、テンプレート、ディレクティブを組み合わせて使用することで、ほとんどすべての作業を完了できることがわかります。また、コードはより離散的で構成可能なものになるため、可能な限りこのワークフローをお勧めします角度があります。
あなたがjQueryを使用するのであれば、あなたはそれをあちこちに振りかけてはいけません。 AngularJSのDOM操作の正しい場所はディレクティブです。これらについては後で詳しく説明します。
セレクターを使用した控えめなJavaScriptと宣言型テンプレート
jQueryは通常、控えめに適用されます。 JavaScriptコードはヘッダー（またはフッター）にリンクされています。ここが唯一の言及箇所です。セレクタを使ってページの一部を選び出し、それらの部分を修正するためのプラグインを書きます。
JavaScriptが制御されています。 HTMLは完全に独立した存在です。 JavaScriptがなくてもあなたのHTMLは意味的なままです。 Onclick属性はとても悪い習慣です。
AngularJSについて最初に気付くことの1つは、カスタム属性が至るところにあることです。あなたのHTMLはng属性で散らばってくるでしょう。それは本質的にステロイドのonClick属性です。これらは指令（コンパイラ指令）であり、テンプレートがモデルにフックされる主な方法の1つです。
あなたが初めてこれを見たとき、あなたは（私が最初にやったように）古い学校の邪魔なJavaScriptとしてAngularJSをオフに書きたくなるかもしれません。実際、AngularJSはこれらの規則に従って機能しません。 AngularJSでは、あなたのHTML5はテンプレートです。それはあなたのWebページを作成するためにAngularJSによってコンパイルされます。
これが最初の大きな違いです。 jQueryにとって、あなたのWebページは操作されるDOMです。 AngularJSにとって、あなたのHTMLはコンパイルされるべきコードです。 AngularJSはあなたのウェブページ全体を読み込み、内蔵のコンパイラを使って文字通りそれを新しいウェブページにコンパイルします。
あなたのテンプレートは宣言的であるべきです。その意味は単にそれを読むことによって明らかになるはずです。意味のある名前の付いたカスタム属性を使用します。意味のある名前で、新しいHTML要素を作ります。最小限のHTMLの知識とコーディングスキルのない設計者はあなたのAngularJSテンプレートを読んでそれが何をしているのか理解することができます。彼または彼女は修正を加えることができます。 これがAngularの方法です
テンプレートは運転席にあります。
AngularJSを起動してチュートリアルを実行するときに最初に質問した質問の1つは、"コードはどこにありますか？"です。。私はJavaScriptを書いていませんが、それでも私はこのような振る舞いをすべて持っています。答えは明らかです。 AngularJSはDOMをコンパイルするため、AngularJSはHTMLをコードとして扱います。多くの単純なケースでは、単にテンプレートを書いてAngularJSにそれをアプリケーションにコンパイルさせるだけで十分です。
あなたのテンプレートがあなたのアプリケーションを動かします。 _ dsl _ として扱われます。 AngularJSコンポーネントを書くと、AngularJSがそれらを引き込み、テンプレートの構造に基づいて適切なタイミングでそれらを使用できるようにします。これは標準の _ mvc _ パターンとは非常に異なります。テンプレートは単に出力用です。
たとえば、 _ xslt _ と Ruby on Railsのほうが似ています 。
これはコントロールの根本的な反転であり、慣れるまでに時間がかかります。
あなたのJavaScriptからあなたのアプリケーションを駆動しようとするのをやめなさい。テンプレートを使ってアプリケーションを動かし、AngularJSにコンポーネントの相互接続を任せます。これもAngularのやり方です。
セマンティックHTMLとセマンティックモデル
JQueryを使用すると、HTMLページに意味のある意味のあるコンテンツが含まれるはずです。 JavaScriptが（ユーザーまたは検索エンジンによって）オフにされている場合でも、コンテンツはアクセス可能なままです。
AngularJSはあなたのHTMLページをテンプレートとして扱うからです。コンテンツは通常、最終的にはAPIから取得されるモデルに格納されるため、テンプレートは意味的なものではありません。 AngularJSはDOMをモデルとコンパイルしてセマンティックWebページを作成します。
あなたのHTMLソースはもはやセマンティックではなく、代わりにあなたのAPIとコンパイルされたDOMはセマンティックです。
AngularJSでは、モデル内に存在するという意味で、HTMLは単なる表示用のテンプレートです。
この時点で、あなたはおそらく _ seo _ およびアクセシビリティに関してあらゆる種類の質問を持っているでしょう。ここに未解決の問題があります。ほとんどのスクリーンリーダーはJavaScriptを解析します。検索エンジンは AJAXed contentにインデックスを付けることもできます。それでも、プッシュステートURLを使用していて、適切なサイトマップを持っていることを確認する必要があります。問題の議論のためにここに見てください： https://stackoverflow.com/a/23245379/687677
懸念の分離（SOC）とMVC
懸念の分離 （SOC）は、SEO、アクセシビリティ、ブラウザの非互換性など、さまざまな理由で長年のWeb開発で成長したパターンです。それはこのように見えます：
- HTML - セマンティックな意味HTMLは独立しているべきです。
- CSS - スタイリング、CSSがなくてもページはまだ読み込み可能です。
- JavaScript - 振る舞い、スクリプトなしでコンテンツは残ります。
繰り返しになりますが、AngularJSは彼らのルールに従って行動しません。ストロークにおいて、AngularJSは受け取った知恵の10年を廃止し、その代わりにテンプレートがもはや意味論的でなく、少しでもないMVCパターンを実装します。
それはこのように見えます：
- モデル - あなたのモデルはあなたのセマンティックデータを含みます。モデルは通常 _ json _ オブジェクトです。モデルは$ scopeと呼ばれるオブジェクトの属性として存在します。テンプレートにアクセスできる便利なユーティリティ関数を$ scopeに格納することもできます。
- ビュー - あなたのビューはHTMLで書かれています。データはモデル内に存在するため、通常ビューは意味を持ちません。
- コントローラ - あなたのコントローラはモデルにビューをフックするJavaScript関数です。その機能は$ scopeを初期化することです。アプリケーションによっては、コントローラを作成する必要があるかもしれません。 1ページに多数のコントローラを配置できます。
MVCとSOCは同じスケールの反対側の端にはなく、完全に異なる軸上にあります。 SOCはAngularJSのコンテキストでは意味がありません。あなたはそれを忘れて先へ進む必要があります。
もし私と同じように、あなたがブラウザ戦争を経験していたら、あなたはこの考えをかなり不快に思うかもしれません。それを乗り越えなさい、それは価値があるでしょう、私は約束します。
プラグインとディレクティブ
プラグインはjQueryを拡張します。 AngularJS指令は、ブラウザの機能を拡張します。
JQueryでは、jQuery.prototypeに関数を追加してプラグインを定義します。それから、要素を選択してその結果についてプラグインを呼び出すことで、これらをDOMにフックします。アイデアはjQueryの機能を拡張することです。
たとえば、ページにカルーセルが必要な場合は、おそらくnav要素で囲まれた、番号の付いていない図のリストを定義できます。その後、ページ上のリストを選択するjQueryを作成し、それをスライド付きのアニメーションを実行するためのタイムアウト付きギャラリーとして再スタイルします。
AngularJSでは、ディレクティブを定義します。ディレクティブはJSONオブジェクトを返す関数です。このオブジェクトはAngularJSにどんなDOM要素を探すべきか、そしてそれらにどのような変更を加えるべきかを伝えます。ディレクティブは、ユーザーが作成した属性または要素を使用してテンプレートにフックされます。アイデアは新しい属性と要素でHTMLの能力を拡張することです。
AngularJSの方法は、ネイティブに見えるHTMLの機能を拡張することです。カスタム属性と要素で拡張された、HTMLのように見えるHTMLを書く必要があります。
カルーセルが必要な場合は、<carousel />エレメントを使用してから、テンプレートを取り込むディレクティブを定義して、その吸盤を機能させます。
たくさんの小さなディレクティブとコンフィギュレーションスイッチを持つ大きなプラグイン
JQueryの傾向はライトボックスのような大きな大きなプラグインを書くことです。それを次に私たちはたくさんの値とオプションを渡して設定します。
これはAngularJSの間違いです。
ドロップダウンの例を見てください。ドロップダウンプラグインを書くときには、クリックハンドラ、上下にあるシェブロンを追加する機能、展開された要素のクラスを変更する機能、メニューを隠す機能など、すべての便利な機能をコード化したいと思うかもしれません。
ちょっとした変更を加えたいと思うまで。
あなたがホバーに展開したいメニューがあるとしましょう。さて、私たちは問題を抱えています。私たちのプラグインは私たちのために私たちのクリックハンドラに配線されています、私たちはこの特定のケースでそれが異なって振る舞うようにするために設定オプションを追加する必要があるでしょう。
AngularJSでは、もっと小さなディレクティブを書きます。私たちのドロップダウン指示はばかげて小さいでしょう。それは折り畳まれた状態を維持し、fold（）、unfold（）またはtoggle（）へのメソッドを提供するかもしれません。これらのメソッドは単に状態を保持するブール値である$ scope.menu.visibleを更新します。
これで私たちのテンプレートにこれを結び付けることができます。
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
マウスオーバーで更新する必要がありますか？
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
テンプレートはアプリケーションを動かすので、HTMLレベルの細分性が得られます。私たちがケースバイケースの例外を作りたいのであれば、テンプレートはこれを容易にします。
クロージャー対$スコープ
JQueryプラグインはクロージャで作成されています。プライバシーはその閉鎖の範囲内で維持されます。その範囲内でスコープチェーンを維持するのはあなた次第です。あなたは本当にjQueryによってプラグインに渡されたDOMノードのセットに加えて、クロージャーで定義された任意のローカル変数とあなたが定義したすべてのグローバルにアクセスすることができます。これはプラグインがかなり自己完結していることを意味します。これは良いことですが、アプリケーション全体を作成するときに制限が生じる可能性があります。動的ページのセクション間でデータをやり取りするのは面倒です。
AngularJSには$ scopeオブジェクトがあります。これらはAngularJSによって作成および管理される特別なオブジェクトであり、そこにモデルを保存します。特定のディレクティブは新しい$スコープを生成します。これはデフォルトではJavaScriptのプロトタイプ継承を使用して、ラップしている$スコープから継承します。 $ scopeオブジェクトはコントローラとビューからアクセスできます。
これは賢い部分です。 $ scopeの継承の構造はDOMの構造にほぼ従っているため、要素は自分自身のスコープ、およびそれを含むすべてのスコープにシームレスにアクセスできます（グローバルスコープと同じではありません）。
これにより、データの受け渡しや適切なレベルでのデータの格納がはるかに簡単になります。ドロップダウンが展開されている場合は、ドロップダウン$スコープだけがそれを知る必要があります。ユーザーが自分の設定を更新した場合は、グローバル$スコープを更新することをお勧めします。ユーザー設定をリスニングしているネストされたスコープは自動的に警告されます。
これは複雑に聞こえるかもしれませんが、実際には一度リラックスすると飛ぶようなものです。 $ scopeオブジェクトを作成する必要はありません。AngularJSがテンプレート階層に基づいて正しく適切にインスタンス化して設定します。そしてAngularJSは依存性注入の魔法を使ってそれをあなたのコンポーネントで利用できるようにします（これについては後で詳しく説明します）。
手動DOM変更とデータバインディング
JQueryでは、DOMの変更をすべて手作業で行います。プログラム的に新しいDOM要素を構築します。 JSON配列があり、それをDOMに置きたい場合は、HTMLを生成してそれを挿入する関数を作成する必要があります。
AngularJSでもこれを行うことができますが、データバインディングを利用することをお勧めします。モデルを変更すると、DOMは自動的に更新されるテンプレートを介してDOMにバインドされるため、介入は不要です。
データバインディングは、属性または中括弧の構文を使用してテンプレートから行われるため、非常に簡単に行えます。それに関連した認知的なオーバーヘッドはほとんどないので、あなたはあなた自身がいつもそれをやっているのを見つけるでしょう。
<input ng-model="user.name" />
入力要素を$scope.user.nameにバインドします。入力を更新すると、現在のスコープ内の値が更新されます。その逆も同様です。
同様に：
<p>
{{user.name}}
</p>
段落にユーザー名を出力します。これはライブバインディングなので、$scope.user.nameの値が更新されると、テンプレートも更新されます。
いつものAjax
JQueryでは、Ajax呼び出しを行うのはかなり簡単ですが、それでもやはり2度考えることがあります。考えるべき複雑さが増し、維持するべきかなりの量のスクリプトがあります。
AngularJSでは、AjaxがデフォルトのGo-Toソリューションであり、ほとんど気付かれることなく常に発生します。 ng-includeを使ってテンプレートを含めることができます。最も簡単なカスタムディレクティブを使ってテンプレートを適用できます。 Ajax呼び出しをサービスにラップして、 GitHub service、または Flickr serviceを自分で作成すると、驚くほど簡単にアクセスできます。
サービスオブジェクトとヘルパー関数
JQueryで、APIからフィードを取得するなど、domに関連しない小さなタスクを実行したい場合は、クロージャー内でそれを実行するための小さな関数を書くことができます。これは有効な解決策ですが、そのフィードに頻繁にアクセスしたい場合はどうなりますか。そのコードを別のアプリケーションで再利用したい場合はどうなりますか？
AngularJSはサービスオブジェクトを提供します。
サービスは、機能とデータを含む単純なオブジェクトです。それらは常にシングルトンです。つまり、それらが1つ以上存在することはあり得ません。 Stack Overflow APIにアクセスしたいとしましょう。そうするためのメソッドを定義するStackOverflowServiceを書くかもしれません。
ショッピングカートがあるとしましょう。カートを管理し、商品を追加および削除するためのメソッドを含むShoppingCartServiceを定義します。このサービスはシングルトンであり、他のすべてのコンポーネントと共有されているため、必要なオブジェクトはすべてショッピングカートに書き込んでそこからデータを取得できます。いつも同じカートです。
サービスオブジェクトは自己完結型のAngularJSコンポーネントであり、必要に応じて使用および再利用できます。それらは関数とデータを含む単純なJSONオブジェクトです。これらは常にシングルトンなので、データをある場所のサービスに格納している場合は、同じサービスを要求するだけでそのデータを他の場所に取り出すことができます。
依存性注入 （DI）対インスタレーション - 別名スパゲーション解除
AngularJSはあなたのためのあなたの依存関係を管理します。あなたがオブジェクトが欲しいならば、単にそれを参照してください、そして、AngularJSはあなたのためにそれを得ます。
これを使い始めるまでは、これがどれほど大きな時間の恩恵であるかを説明するのは難しいです。 Angular JS DIのようなものはjQueryの中には存在しません。
DIは、アプリケーションを作成してそれを配線する代わりに、それぞれ文字列で識別されるコンポーネントのライブラリを定義することを意味します。
FlickrからJSONフィードを取得するためのメソッドを定義する「FlickrService」というコンポーネントがあるとします。さて、Flickrにアクセスできるコントローラを書きたいのなら、コントローラを宣言するときに名前で 'FlickrService'を参照するだけです。 AngularJSは、コンポーネントをインスタンス化し、それを私のコントローラで利用できるようにします。
たとえば、ここでサービスを定義します。
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
そのサービスを使いたいときは、このように名前で参照します。
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
AngularJSは、FlickrServiceオブジェクトがコントローラをインスタンス化するために必要であることを認識し、それを提供します。
これは物事を一緒に配線することを非常に容易にし、そしてスパゲッティ化の傾向をほとんど排除します。私たちはコンポーネントのフラットリストを持っています、そしてAngularJSはそれらを必要に応じて一つずつ私たちに渡します。
モジュラーサービスアーキテクチャ
jQueryは、コードをどのように編成する必要があるかについてはほとんど触れていません。 AngularJSには意見があります。
AngularJSは、コードを配置できるモジュールを提供します。たとえば、Flickrと対話するスクリプトを作成している場合は、Flickr関連のすべての機能をラップするFlickrモジュールを作成することをお勧めします。モジュールには他のモジュール（DI）を含めることができます。あなたのメインアプリケーションは通常モジュールです、そしてこれはあなたのアプリケーションが依存する他のすべてのモジュールを含むべきです。
Flickrをベースにした別のアプリケーションを作成したい場合は、単純なコードの再利用が可能です。Filickモジュールを追加するだけで、新しいアプリケーションのすべてのFlickr関連機能にアクセスできます。
モジュールはAngularJSコンポーネントを含みます。 モジュールをインクルードすると、そのモジュール内のすべてのコンポーネントが、一意の文字列で識別される単純なリストとして利用可能になります。その後、AngularJSの依存性注入メカニズムを使用して、これらのコンポーネントを互いに注入できます。
総括する
AngularJSとjQueryは敵ではありません。 AngularJS内でjQueryを非常にうまく使用することは可能です。 AngularJSをよく使用している場合（テンプレート、データバインディング、$ scope、ディレクティブなど）、必要な場合よりもlot少ないjQueryが必要です。
実現するための主なことはあなたのテンプレートがあなたのアプリケーションを動かすということです。すべてを実行する大きなプラグインを書くのをやめなさい。その代わりに、1つのことを行う小さなディレクティブを書いてから、それらを結び付けるための簡単なテンプレートを書いてください。
控えめなJavaScriptについては考えずに、代わりにHTML拡張子に関して考えてください。
私の小さな本
私はAngularJSにとても興奮しました、私はあなたがオンラインで読むことを非常に歓迎しているそれについての短い本を書きました http://nicholasjohnson.com/angular-book/ 。お役に立てば幸いです。
必要なパラダイムシフトについて教えてください。
命令型と宣言型
jQuery を使うと、DOMに何が必要かを段階的に指示できます。AngularJSで、どんな結果が欲しいかを説明しますが、それを行う方法は説明しません。もっと詳しく here 。また、Mark Rajcokの答えを調べてください。
クライアントサイドのWebアプリケーションを異なる方法で設計および設計する方法
AngularJSは MVC パターンを使用するクライアントサイドフレームワーク全体です（ グラフィカル表現 をご覧ください）。それは関心事の分離に大きく焦点を当てています。
最大の違いは何ですか？私は何をやるのをやめるべきではありません。代わりに何をしたり使ったりするべきですか？
jQuery はライブラリです
AngularJS は、MVC、 依存性注入 、データバインディングなど、たくさんのクールなものを組み合わせた、非常にテストしやすい美しいクライアントサイドフレームワークです。
テスト駆動開発を容易にする 懸念の分離 およびテスト（ 単体テスト およびエンドツーエンドのテスト）に焦点を当てています。
開始するための最良の方法は 彼らの素晴らしいチュートリアル を通過することです。あなたは数時間でステップを通過することができます。しかし、あなたが舞台裏の概念を習得したい場合は、それらはさらに読むための無数の参照を含みます。
サーバー側の考慮事項/制限はありますか？
純粋なjQueryを既に使用している既存のアプリケーションでそれを使用することができます。ただし、AngularJSの機能を十分に活用したい場合は、 RESTful アプローチを使用してサーバー側をコーディングすることを検討してください。
そうすることで、あなたがそれらの リソースファクトリ を利用することを可能にし、それはあなたのサーバサイドのRESTful API の抽象化を作り出し、サーバサイドコール（get、save、deleteなど）を作ります信じられないほど簡単です。
「パラダイムシフト」を説明するには、簡単な答えで十分です。
AngularJSはあなたがfind _要素のやり方を変える
jQuery では、通常は セレクタ を使用して要素を検索し、それらを関連付けます。$('#id .class').click(doStuff);
AngularJS では、 ディレクティブ を使用して要素に直接マークを付け、それらを関連付けます。<a ng-click="doStuff()">
AngularJSはセレクタを使って要素を見つける必要がない（あるいは欲しい） - AngularJSの jqLite と本格的な jQuery の主な違いは jqLiteはセレクタをサポートしていない 。
ですから、人々が「jQueryをまったく含まない」と言うとき、それは主に彼らがあなたにセレクタを使わせたくないからです。彼らはあなたが代わりにディレクティブを使うことを学ぶことを望みます。直接、選択しないでください！
jQuery
jQueryはgetElementByHerpDerpのような途方もなく長いJavaScriptコマンドとクロスブラウザを作ります。
AngularJS
AngularJSを使用すると、動的Webアプリケーションでうまく機能することを行う独自のHTMLタグ/属性を作成できます（HTMLは静的ページ用に設計されているため）。
編集する
「私はjQueryのバックグラウンドを持っています。AngularJSでどう思いますか？」 「HTMLの背景があります。JavaScriptでどう思いますか」と言ったようなものです。質問をしているという事実は、これら2つのリソースの基本的な目的を理解していない可能性が最も高いことを示しています。 「AngularJSはディレクティブを利用するのに対し、jQueryはCSSセレクタを使用してこれを実現するjQueryオブジェクトを作成する」などのリストではなく、基本的な違いを指摘するだけで質問に答えることにしました。 。この質問は長い答えを必要としません。
jQueryはブラウザでJavaScriptをプログラミングするのをより簡単にする方法です。より短い、クロスブラウザコマンドなど.
AngularJSはHTMLを拡張するので、アプリケーションを作成するためだけに<div>を配置する必要はありません。 HTMLを設計したもの（静的で教育的なWebページ）ではなく、実際にHTMLをアプリケーションに使用できるようにします。 JavaScriptを使用してこれをラウンドアバウト方式で実現しますが、基本的にはJavaScriptではなくHTMLの拡張です。
jQuery：DOM要素の ' _ dom _ のクエリ'と何かをすることについて多くのことを考えています。
AngularJS：モデルは真実であり、あなたはいつもそのANGLEから考える。
たとえば、DOMで何らかの形式で表示する予定のTHEサーバーからjQueryでデータを取得する場合は、 '1。 DOMのどこにこのデータを置きたいか、 '2'を探します。新しいノードを作成するか、単に innerHTML を設定することで、そこにUPDATE/APPENDしてください。その後、このビューを更新したいときは、 '3。 '場所を見つけて' 4。更新'。サーバーからデータを取得してフォーマットするという同じコンテキスト内で行われる検索と更新のサイクルはすべてAngularJSでは行われていません。
AngularJSを使用すると、自分のモデル（すでに慣れ親しんでいるJavaScriptオブジェクト）があり、そのモデルの値から（明らかに）モデルおよびビューについての情報がわかり、モデルに対する操作が自動的にビューに反映されます。それについて考える必要はありません。あなたはAngularJSで自分自身を見つけるでしょう、もはやDOMでものを見つけることはありません。
言い換えれば、jQueryでは、CSSセレクタについて考える必要があります。つまり、クラスや属性を持つdivやtdなどで、HTMLや色、値を取得することができます。 AngularJS、あなたはあなた自身がこのように考えているのを見つけるでしょう：私が扱っているモデルは何ですか、私はモデルの値をtrueに設定します。この値を反映するビューがチェックボックスなのか、td要素の中にあるのかを気にする必要はありません（jQueryでよく考えなければならない詳細事項）。
そしてAngularJSでDOMを操作すると、ディレクティブとフィルターを追加することになります。これは有効なHTML拡張機能と見なすことができます。
AngularJSでもう1つ経験することがあります。jQueryではjQuery関数を頻繁に呼び出します。AngularJSではAngularJSが関数を呼び出します。AngularJSは「操作方法を教えてくれます」が、その利点は価値があります。通常AngularJSが何を望んでいるのか、またはAngularJSがあなたがあなたの関数を提示することを要求する方法を学ぶことを意味し、それはそれに応じてそれを呼ぶでしょう。これはAngularJSをライブラリではなくフレームワークにするものの1つです。
それらはとてもいいですが長い答えです。
私の経験をまとめると：
- コントローラやプロバイダ（サービス、工場など）はデータモデルを変更するためのもので、HTMLではありません。
- HTMLとディレクティブはレイアウトとモデルへのバインディングを定義します。
- コントローラ間でデータを共有する必要がある場合は、サービスまたはファクトリを作成します。これらはアプリケーション全体で共有されるシングルトンです。
- HTMLウィジェットが必要な場合は、ディレクティブを作成してください。
- データがあり、HTMLを更新しようとしている場合は、停止してください。モデルを更新して、HTMLがモデルにバインドされていることを確認してください。
jQueryはDOM操作ライブラリです。
AngularJSはMV *フレームワークです。
実際、AngularJSは、数少ないJavaScript MV *フレームワークの1つです（多くのJavaScript MVCツールは依然としてカテゴリライブラリに属します）。
フレームワークなので、コードをホストし、何をいつ呼び出すべきかについての決定権を持ちます。
AngularJS自体には、その中にjQuery-liteエディションが含まれています。そのため、基本的なDOMの選択/操作については、実際にはjQueryライブラリを含める必要はありません（ネットワーク上で実行するために多くのバイトを節約できます）。
AngularJSには、DOM操作および再利用可能なUIコンポーネントの設計に関する「ディレクティブ」の概念があります。したがって、DOM操作に関連することを行う必要があると感じるときはいつでも使用する必要があります.
AngularJSにはある程度の学習曲線があります（jQuery以上:-)。
- > jQueryをバックグラウンドにしている開発者にとって、私の最初のアドバイスは「AngularJSのような豊富なフレームワークにジャンプする前に、JavaScriptをファーストクラス言語として学ぶこと」です。私は上記の事実を難しい方法で学んだ。
がんばろう。
彼らはリンゴとオレンジです。あなたはそれらを比較したくありません。それらは2つの異なるものです。 AngularJsにはすでにjQuery liteが組み込まれているため、本格的なjQueryバージョンを含めなくても基本的なDOM操作を実行できます。
jQueryはすべてDOM操作に関するものです。それはそうでなければあなたが対処しなければならないすべてのクロスブラウザの痛みを解決しますが、それはあなたがあなたのアプリをAngularJSのようなコンポーネントに分割することを可能にするフレームワークではありません。
AngularJsのいいところは、ディレクティブでDOM操作を分離/分離できることです。 ng-clickなど、すぐに使える組み込みディレクティブがあります。すべてのビューロジックまたはDOM操作を含む独自のカスタムディレクティブを作成できるので、ビジネスロジックの面倒を見るべきであるコントローラまたはサービスに混在するDOM操作コードを作成する必要がなくなります。
Angularはあなたのアプリを - コントローラ - サービス - ビュー - などに分類します。
そしてもう一つ、ディレクティブがあります。これはあなたがどんなDOM要素にも付けることができる属性であり、あなたのjQueryがAngularJsコンポーネントと衝突することやそのアーキテクチャとめちゃくちゃになることを心配することなく、その中のjQueryを使うことができます。
私が参加したミートアップから聞いたところ、Angularの創設者の一人は、DOM操作を切り離すために一生懸命働いていたので、それらを元に戻そうとしないでください。
AngularJS：Misko Hevery＆Igor MinarのオリジナルクリエイターをフィーチャーしたPodcast JavaScript Jabber：エピソード＃32を聴いてください。彼らは他のJavaScriptの背景、特にjQueryからAngularJSに来ることがどのようなものかについて多くのことを話します。
ポッドキャストで指摘された点の1つは、あなたの質問に関して多くのことを私のためにクリックしてくれました：
_ misko _ ：[...] Angularでほとんど考えられなかったことの1つは、逃げることができるように、どのようにエスケープハッチをたくさん用意するかです。これを回避する方法を考え出す。私たちにとって、答えは「指令」と呼ばれるものです。 そして、ディレクティブを使えば、基本的に通常の小さなjQuery JavaScriptになります。あなたが望むことは何でもできます。
_ igor _ ：ディレクティブは、テンプレート内でこの特定の要素またはこのCSSに遭遇したときにそれを通知するコンパイラへの命令であると考えてください。このようなコードを保持し、そのコードは担当しますDOMツリーの要素とその要素の下にあるすべての要素.
エピソード全体の写しは、上記のリンクから入手できます。
だから、直接あなたの質問に答えるために：AngularJSは非常に説得力があり、真のMV *フレームワークです。しかし、ディレクティブの中で、あなたが知っていて本当に気に入っている本当に素晴らしいことをすべてjQueryでやることはできます。 「jQueryで今までしたことをどのように行うのですか」という問題ではありません。 「jQueryで以前に行ったことのすべてをAngularJSに追加するにはどうすればよいですか」という問題です。
それは本当に2つの非常に異なる心の状態です。
私が最初にJavaScriptプログラミングに真剣に取り組んだのは Node.js およびAngularJSだったので、この質問は興味深いと思います。私はjQueryを学んだことは一度もありません。そして、私は何も学ぶ必要がないので、それは良いことだと思います。実際、私は自分の問題に対するjQueryによる解決策を積極的に避けており、その代わりに、単にそれらを解決するための "AngularJSの方法"を探しています。したがって、私はこの質問に対する私の答えが本質的に「jQueryを学んだことがない人のように考える」ことに煮詰まり、jQueryを直接組み込もうとする誘惑を避けることになると思います。
AngularJSとjQuery：
AngularJとJQueryは、JQLiteの機能を除いて、すべてのレベルでまったく異なります。AngularJのコア機能を学び始めると、それがわかります（以下で説明します）。
AngularJsは、独立したクライアントサイドアプリケーションの構築を提供するクライアントサイドフレームワークです。 JQueryはDOMを中心としたクライアントサイドのライブラリです。
AngularJsクールな原則 - あなたがあなたのUIにいくつかの変更が欲しいならモデルデータ変更の観点から考えてください。データを変更すると、UIは自動的に再描画されます。それがほとんど必要とされない限り、そしてそれがAngular Directivesを通して扱われるべきでない限り、あなたはDOMを毎回遊ぶ必要はありません。
この質問に答えるために、私はAngularJSとの最初のエンタープライズアプリケーションに関する私の経験を共有したいと思います。これらは、jQueryの考え方を変え始めるところでAngularが提供する最も優れた機能であり、ライブラリではなくフレームワークのようにAngularが得られます。
双方向のデータバインディングは素晴らしいです。 私はすべての機能を持つグリッドを持っていたUPDATE、DELTE、INSERT。 ng-repeatを使用してグリッドのモデルをバインドするデータオブジェクトがあります。削除と挿入のために単純なJavaScriptコードを1行書くだけで済みます。グリッドモデルが即座に変わると、gridは自動的に更新されます。更新機能はリアルタイムです。コードはありません。あなたは素晴らしい気分だよ！
再利用可能な指令はスーパーです。 1箇所に指令を記述して、アプリケーション全体で使用します。ああ、神様！！！ページング、正規表現、検証などにこれらのディレクティブを使用しました。本当にクールです！
ルーティングは強力です： どのように使用するかは実装次第ですが、リクエストをルーティングしてHTMLとコントローラを指定するには、ほんの数行のコードで済みます（JavaScript）。
コントローラは素晴らしいです。 コントローラは独自のHTMLの面倒を見ますが、この分離は一般的な機能にも同様に有効です。マスターHTMLのボタンをクリックして同じ関数を呼び出したい場合は、各コントローラに同じ関数名を書いて個々のコードを書いてください。
プラグイン： アプリにオーバーレイを表示するなど、他にも似たような機能がたくさんあります。そのためにコードを書く必要はなく、単にwc-overlayとして利用可能なオーバーレイプラグインを使用すれば、これは自動的にすべての XMLHttpRequest （XHR）リクエストを処理します。
理想的な RESTful architecture： 完全なフレームワークであることはAngularJSをRESTfulアーキテクチャで動作させるのに最適です。 REST CRUD APIを呼び出すのはとても簡単です。
サービス ：サービスを使用して一般的なコードを記述し、コントローラ内のコードを少なくします。サービスは、コントローラ間で共通の機能を共有するために使用できます。
拡張性 ：Angularは、Angularディレクティブを使用してHTMLディレクティブを拡張しました。 html内に式を書き、実行時にそれらを評価します。独自のディレクティブとサービスを作成して、追加の作業なしで別のプロジェクトで使用します。
JavaScript MV *の初心者であり、純粋にアプリケーションアーキテクチャ（サーバー/クライアント側の問題ではない）に焦点を当てているので、次のリソースをお勧めします（まだ言及されていないことに驚いています）： JavaScript Design Patterns 、Addy Osmaniによる、異なるJavaScriptデザインパターンの紹介として。この回答で使用されている用語は、上記のリンクされたドキュメントから取られています。私は、受け入れられた答えで本当にうまく言い表されたことを繰り返すつもりはありません。代わりに、この回答は、AngularJS（および他のライブラリ）を強化する理論的背景にリンクしています。
私と同じように、AngularJS（または Ember.js 、Durandal、およびその他のMV *フレームワーク）は、さまざまなJavaScriptデザインパターンの多くを組み立てる1つの複雑なフレームワークであることがすぐにわかります。
（1）ネイティブJavaScriptコードと（2）1つのグローバルフレームワークに飛び込む前に、これらのパターンごとに個別の小さなライブラリ。これにより、フレームワークがどの重要な問題に取り組んでいるかをよりよく理解することができました（個人的に問題に直面しているため）。
例えば：
- JavaScriptオブジェクト指向プログラミング （これはGoogle検索リンクです）。これはライブラリではありませんが、アプリケーションプログラミングの前提条件です。 プロトタイプ、コンストラクター、シングルトンおよびデコレーターパターンのネイティブ実装を教えてくれました
- jQuery / アンダースコアファサードパターン（DOMを操作するためのWYSIWYGのように）
- Prototype.js forprototype/constructor/mixin pattern
- RequireJS / Curl.jsモジュールパターン/ AMD
- KnockoutJSobservable、パブリッシュ/サブスクライブパターンの場合
注意：このリストは完全ではなく、「最高のライブラリ」でもありません。それらはたまたま私が使用したライブラリです。これらのライブラリには、より多くのパターンも含まれています。言及されているものは、主な焦点またはオリジナルの意図にすぎません。このリストから何かが足りないと感じたら、コメントでそれを言及してください、そして私はそれを喜んで追加します。
実際、AngularJSを使用しているのであれば、もうjQueryは必要ありません。 AngularJS自体には、バインディングとディレクティブがあります。これは、jQueryでできることのほとんどに代わる非常に優れた「置き換え」です。
私は通常AngularJSと Cordova を使ってモバイルアプリケーションを開発しています。私が必要としたjQueryからの唯一のものはSelectorです。
グーグルでは、私はそこにスタンドアロンのjQueryセレクタモジュールがあることがわかります。それはシズルです。
そして、私は（Sizzleを使って）jQuery Selectorの力でAngularJSを使ってウェブサイトをすぐに始めるのを手助けする小さなコードスニペットを作ることにしました。
私はここで私のコードを共有しました： https://github.com/huytd/Sizzular