jQueryでのクライアント側アプリケーションの開発に精通しているとしましょう。しかし、AngularJSの使用を開始したいと思います。必要なパラダイムシフトについて説明できますか？回答の組み立てに役立つと思われるいくつかの質問を次に示します。
私はとの詳細な比較を探していないよjQueryとAngularJS。
回答:
jQueryでは、ページを設計してから動的にします。これは、jQueryが拡張用に設計されており、その単純な前提から信じられないほど成長したためです。
ただし、AngularJSでは、アーキテクチャを念頭に置いて、ゼロから始める必要があります。「このDOMの一部があり、それをXにしたい」と考えるのではなく、達成したいことから始め、次にアプリケーションの設計に取り掛かり、最後にビューの設計に取り掛かります。
同様に、jQueryがX、Y、Zを実行するという考えから始めないでください。そのため、モデルとコントローラー用にAngularJSを追加するだけです。これは、始めたばかりの場合は本当に魅力的です。そのため、少なくとも「Angular Way」に慣れるまでは、新しいAngularJS開発者がjQueryをまったく使用しないことを常にお勧めします。
私は多くの開発者をここで見たことがあります。メーリングリストでは、150行または200行のコードのjQueryプラグインを使用してこれらの精巧なソリューションを作成し、それら$applyを混乱と複雑なコールバックとsのコレクションでAngularJSに接着します。しかし、彼らは最終的にそれを機能させます！問題は、ほとんどの場合、jQueryプラグインがコードの一部でAngularJSで書き換えられる可能性があり、突然すべてが理解可能で簡単になるということです。
肝心なのはこれです：解決するとき、最初に「AngularJSで考える」; 解決策が思いつかない場合は、コミュニティに質問してください。そのすべての後に簡単な解決策がない場合、その後、 jQueryのために達すること自由に感じ。ただし、jQueryを松葉杖にしないでください。そうしないと、AngularJSを習得することはできません。
最初に、単一ページのアプリケーションがアプリケーションであることを知ってください。それらはウェブページではありません。したがって、クライアント側の開発者のように考えることに加えて、サーバー側の開発者のように考える必要があります。アプリケーションを個別の拡張可能なテスト可能なコンポーネントに分割する方法について考える必要があります。
それでは、どうやってそれを行うのですか？どのように「AngularJSで考える」のですか？jQueryとは対照的に、いくつかの一般的な原則を次に示します。
jQueryでは、プログラムによってビューを変更します。ドロップダウンメニューを次のulように定義できます。
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>jQueryでは、アプリケーションロジックで、次のようにアクティブ化します。
$('.main-menu').dropdownMenu();ビューを見るだけでは、ここに機能があるかどうかはすぐにはわかりません。小さなアプリケーションの場合は、それで十分です。しかし、重要なアプリケーションの場合、物事はすぐに混乱し、保守が難しくなります。
ただし、AngularJSでは、ビューはビューベースの機能の公式記録です。私たちのul宣言は、代わりに次のようになります。
<ul class="main-menu" dropdown-menu>
...
</ul>これら2つは同じことを行いますが、AngularJSバージョンでは、テンプレートを見ている人は何が起こるかを知っています。開発チームの新しいメンバーが参加するときはいつでも、彼女はこれを見て、それを操作するという指令があることを知ることができますdropdownMenu。彼女は正しい答えを直感したり、コードをふるいにかけたりする必要はありません。その見方は、何が起こるはずだったかを教えてくれました。ずっときれい。
AngularJSを初めて使用する開発者は、次のような質問をよくします。特定の種類のリンクをすべて見つけて、そこにディレクティブを追加するにはどうすればよいですか。私たちが返信するとき、開発者は常に驚かされます。あなたはそうではありません。しかし、これを行わない理由は、これはjQueryの半分、AngularJSの半分のようなものであり、良くないからです。ここでの問題は、開発者がAngularJSのコンテキストで「jQueryを実行」しようとしていることです。それはうまくいきません。ビューは公式記録です。ディレクティブの外では（これについては以下で詳しく説明します）、DOMを変更することは決してありません。また、ディレクティブはビューに適用されるため、意図は明確です。
覚えておいてください。設計せずにマークアップしてください。設計してから設計する必要があります。
これは、AngularJSの最も優れた機能の1つであり、前のセクションで説明した種類のDOM操作を実行するための多くの必要性を排除します。AngularJSは自動的にビューを更新するので、更新する必要はありません！jQueryでは、イベントに応答してからコンテンツを更新します。何かのようなもの：
$.ajax({
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('<li>Data Received!</li>');
}
});次のようなビューの場合：
<ul class="messages" id="log">
</ul>懸念の混合は別として、前述の意図を示すという同じ問題があります。しかし、より重要なのは、DOMノードを手動で参照して更新する必要があったことです。ログエントリを削除する場合は、DOMに対してもコーディングする必要があります。DOMとは別にロジックをどのようにテストしますか？また、プレゼンテーションを変更したい場合はどうなりますか？
これは少し乱雑で、ささいな弱点です。しかし、AngularJSでは、これを行うことができます：
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});そして、ビューは次のようになります。
<ul class="messages">
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>しかし、それについては、私たちの見解は次のようになります：
<div class="messages">
<div class="alert" ng-repeat="entry in log">
{{ entry.msg }}
</div>
</div>そして今、順序付けられていないリストを使用する代わりに、Bootstrapアラートボックスを使用しています。そして、コントローラのコードを変更する必要はありませんでした！しかし、もっと重要なのは、どんなにどこかどのようにログが更新され、ビューがあまりにも変化します。自動的に。きちんと！
ここでは示していませんが、データバインディングは双方向です。したがって、これらのログメッセージは、次のようにしても、ビューで編集できます<input ng-model="entry.msg" />。そして、多くの喜びがありました。
jQueryでは、DOMはモデルのようなものです。しかし、AngularJSでは、ビューから完全に独立して、任意の方法で管理できる独立したモデルレイヤーがあります。これは、上記のデータバインディングに役立ち、懸念事項の分離を維持し、はるかに優れたテスト容易性をもたらします。この点については他の回答でも触れたので、そのままにしておきます。
そして、上記のすべてがこの包括的なテーマに結びついています。あなたの見解は、（ほとんどの場合）起こりそうなことの公式記録として機能します。モデルはデータを表します。再利用可能なタスクを実行するためのサービス層があります。DOM操作を行い、ディレクティブでビューを拡張します。そして、あなたはそれをコントローラーと一緒に接着します。これは他の回答でも述べられており、私が追加する唯一のものは、以下の別のセクションで説明するテスト容易性に関するものです。
懸念の分離を支援するのが依存性注入（DI）です。サーバー側の言語（JavaからPHPまで）を使用している場合は、おそらくこの概念にすでに精通していますが、jQueryを使用しているクライアント側の人であれば、この概念は愚かなものから不必要なもの、流行に敏感なものまでさまざまです。 。しかし、そうではありません。:-)
広い観点から見ると、DIはコンポーネントを非常に自由に宣言し、他のコンポーネントからそのインスタンスを要求するだけで許可されることを意味します。読み込み順序、ファイルの場所、またはそのようなものについて知っている必要はありません。力はすぐには見えないかもしれませんが、私は1つの（一般的な）例を提供します：テストです。
アプリケーションで、REST APIを介してサーバー側ストレージを実装し、アプリケーションの状態に応じてローカルストレージも実装するサービスが必要だとします。当社のコントローラにテストを実行しているとき、私たちは、サーバーと通信する必要がありますする必要はありません-私たちがテストしているコントローラをすべての後に、。元のコンポーネントと同じ名前のモックサービスを追加するだけで、インジェクターはコントローラーが偽のサービスを自動的に取得するようにします。
テストと言えば...
これは実際にはアーキテクチャーのセクション3の一部ですが、非常に重要なので、それを独自のトップレベルセクションとして配置します。
あなたが見たり、使用したり、書いたりした多くのjQueryプラグインのうち、どれがそれに付随するテストスイートを持っていましたか？jQueryはそれをあまり受け入れられないため、それほど多くありません。しかし、AngularJSはそうです。
jQueryでテストする唯一の方法は、多くの場合、テストがDOM操作を実行できるサンプル/デモページを使用してコンポーネントを個別に作成することです。それでは、私たちは個別のコンポーネントを開発し、する必要があり、その後私たちのアプリケーションに統合します。なんと不便なことでしょう。ほとんどの場合、jQueryで開発するときは、テスト駆動型開発ではなく反復型を選択します。そして、誰が私たちを責めることができますか？
しかし、懸念事項が分かれているため、AngularJSでテスト駆動開発を繰り返し行うことができます。たとえば、現在のルートが何であるかをメニューに示す非常に単純なディレクティブが必要だとします。アプリケーションのビューで必要なものを宣言できます。
<a href="/hello" when-active>Hello</a>さて、これで、存在しないwhen-activeディレクティブのテストを書くことができます：
it( 'should add "active" when the route changes', inject(function() {
var elm = $compile( '<a href="https://stackoverflow.com/hello" when-active>Hello</a>' )( $scope );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();
}));そして、テストを実行すると、テストが失敗したことを確認できます。ここで、ディレクティブを作成します。
.directive( 'whenActive', function ( $location ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
scope.$on( '$routeChangeSuccess', function () {
if ( $location.path() == element.attr( 'href' ) ) {
element.addClass( 'active' );
}
else {
element.removeClass( 'active' );
}
});
}
};
});これでテストに合格し、メニューは要求どおりに実行されます。私たちの開発は、反復的でテスト主導型です。邪悪なクール。
「ディレクティブではDOM操作のみを行う」とよく耳にします。これは必需品です。敬意をもって扱いましょう！
しかし、もう少し詳しく見てみましょう...
いくつかのディレクティブはすでにビューにあるものを装飾するだけです（と考えてくださいngClass）。そのため、すぐにDOM操作を行ってから、基本的に行われる場合があります。ただし、ディレクティブが「ウィジェット」のようなものであり、テンプレートがある場合は、懸念の分離も尊重する必要があります。つまり、テンプレートも、リンクおよびコントローラー機能での実装から大部分は独立している必要があります。
AngularJSには、これを非常に簡単にするためのツールセット全体が付属しています。ngClass我々は動的にクラスを更新することができます。ngModel双方向のデータバインディングを許可します。ngShowそしてngHide、プログラムの要素を表示または非表示。その他多数-自分で書いたものを含めます。つまり、DOMを操作しなくても、あらゆる種類の素晴らしい機能を実行できます。DOM操作が少ないほど、ディレクティブのテストが容易になり、スタイルを設定しやすくなり、将来変更しやすくなり、再利用と配布が容易になります。
一連のjQueryをスローする場所としてディレクティブを使用するAngularJSを初めて使用する多くの開発者がいます。言い換えれば、彼らは「コントローラーでDOM操作を行うことができないので、そのコードをディレクティブに入れる」と考えています。それは確かにはるかに良いですが、それでもしばしば間違っています。
我々はディレクティブでそれを置く場合でも、セクション3にプログラムされたロガーを考えて、我々はまだそれを「アンギュラウェイ」をやりたいです。それはまだ任意のDOM操作を取りません！DOMの操作が必要になる場合はたくさんありますが、それはあなたが思っているよりもずっとまれです！アプリケーションのどこかでDOM操作を行う前に、本当に必要かどうかを自問してください。もっと良い方法があるかもしれません。
これは、私が最も頻繁に見るパターンを示す簡単な例です。切り替え可能なボタンが必要です。（注：この例は少し工夫されており、まったく同じ方法で解決されるより複雑なケースを表すためにskoshの冗長です。）
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});これにはいくつか問題があります：
angular.element、jQueryを持たないプロジェクトにドロップしてもコンポーネントは機能します。angular.element）はロードされている場合は常に jQuery を使用します。したがって、使用する必要はありません$-使用できますangular.element。$- elementに渡され、そのlink関数が考えすでに可能 jQueryの要素！このディレクティブは（非常に複雑な場合でも）次のように書き換えることができます。
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !scope.on;
};
}
};
});繰り返しになりますが、テンプレートの要素はテンプレートに含まれているため、必要なスタイルに合わせてロジックを変更する必要がなく、ユーザー（またはユーザー）が簡単にテンプレートを交換できます。再利用性-ブーム！
そして、テストのような他のすべての利点はまだあります-それは簡単です！テンプレートの内容に関係なく、ディレクティブの内部APIは変更されないため、リファクタリングは簡単です。ディレクティブに手を加えることなく、テンプレートを好きなだけ変更できます。そして、何を変更しても、テストは成功します。
w00t！
では、ディレクティブがjQueryのような関数のコレクションだけではない場合、それらは何ですか？ディレクティブは実際にはHTMLの拡張です。HTMLが必要な処理を行わない場合は、それを行うためのディレクティブを記述して、HTMLの一部であるかのように使用します。
AngularJSは箱の外に何かをしていない場合は、別の言い方をすれば、チームは右とに収まるように、それを達成する方法を考えてngClick、ngClassら。
jQueryも使用しないでください。それも含めないでください。それはあなたを引き留めます。そして、jQueryで解決する方法をすでに知っていると思う問題に遭遇した場合、に到達する前に$、AngularJSの範囲内でそれを行う方法について考えてみてください。わからない場合は質問してください。20回のうち19回は、jQueryを必要とせず、jQueryの結果で解決するための最善の方法は、より多くの作業を必要とします。
jQueryでは、セレクターを使用してDOM要素を検索し、それらにイベントハンドラーをバインド/登録します。イベントがトリガーされると、その（命令型）コードが実行され、DOMを更新/変更します。
AngularJS では、DOM要素ではなくビューについて考える必要があります。ビューは、AngularJS ディレクティブを含む（宣言的な）HTMLです。ディレクティブは、バックグラウンドでイベントハンドラーをセットアップし、動的なデータバインディングを提供します。セレクターはめったに使用されないため、ID（およびいくつかのタイプのクラス）の必要性は大幅に減少します。ビューは、（スコープを介して）モデルに関連付けられています。ビューはモデルの投影です。イベントはモデル（つまり、データ、スコーププロパティ）を変更し、それらのモデルを投影するビューは「自動的に」更新されます。
AngularJSでは、データを保持するjQueryが選択したDOM要素ではなく、モデルについて考えてください。ビューは、ユーザーの表示を操作するためのコールバックを登録するのではなく、それらのモデルの投影と考えてください。
jQueryは控えめなJavaScriptを採用-動作（JavaScript）は構造（HTML）から分離されています。
AngularJSは、コントローラーとディレクティブ（それぞれに独自のコントローラー、および/またはコンパイルとリンク関数を含めることができます）を使用して、ビュー/構造（HTML）から動作を削除します。Angularには、アプリケーションの分離/整理に役立つサービスとフィルターもあります。
https://stackoverflow.com/a/14346528/215945も参照してください
AngularJSアプリケーションを設計する1つのアプローチ：
JavaScriptプロトタイプの継承がどのように機能するかを知らなくても、jQueryで多くのことができます。AngularJSアプリケーションを開発する場合、JavaScriptの継承をよく理解していれば、いくつかの一般的な落とし穴を回避できます。推奨読書：AngularJSのスコーププロトタイプ/プロトタイプ継承のニュアンスは何ですか？
onそして、whenjQueryのコレクションオブジェクトのメンバー上で動作して、高次機能です。
onでしょうか？命令的。
AngularJSとjQueryは非常に異なるイデオロギーを採用しています。jQueryを使用している場合は、驚くべき違いが見つかることがあります。Angularはあなたを怒らせるかもしれません。
これは正常な状態です。プッシュする必要があります。Angularはそれだけの価値があります。
jQueryは、DOMの任意のビットを選択し、それらにアドホックな変更を加えるためのツールキットを提供します。好きなことはほとんど何でもできます。
AngularJSは代わりにコンパイラを提供します。
つまり、AngularJSはDOM全体を上から下に読み取り、それをコードとして、文字通りコンパイラーへの指示として扱います。DOMを通過するときに、特定のディレクティブを探します、AngularJSコンパイラーに動作方法と実行方法を指示（コンパイラーディレクティブ）をます。ディレクティブはJavaScriptでいっぱいの小さなオブジェクトで、属性、タグ、クラス、さらにはコメントと照合できます。
Angularコンパイラは、DOMの一部が特定のディレクティブと一致すると判断すると、ディレクティブ関数を呼び出し、DOM要素、属性、現在の$ scope（ローカル変数ストア）、およびその他の有用なビットを渡します。これらの属性には、ディレクティブで解釈できる式を含めることができます。この式は、レンダリングの方法と、いつ再描画するかを指示します。
次に、ディレクティブはコントローラー、サービスなどの追加のAngularコンポーネントを取り込むことができます。コンパイラーの下部に表示されるのは、完全に形成されたWebアプリケーションであり、配線されてすぐに使用できます。
これは、Angularがテンプレート駆動であることを意味します。テンプレートはJavaScriptを駆動しますが、その逆ではありません。これは役割が根本的に逆転したものであり、過去10年間ほど私たちが書いてきた控えめなJavaScriptとは正反対です。これには慣れるまでに時間がかかる場合があります。
これが過度に規範的で制限的であるように聞こえる場合は、真実から遠く離れているものはありません。AngularJSはHTMLをコードとして扱うため、WebアプリケーションでHTMLレベルの細分性が得られます。すべてが可能であり、いくつかの概念的な飛躍をすれば、ほとんどのことは驚くほど簡単です。
要点に取り掛かりましょう。
AngularとjQueryは異なる動作をします。AngularJSは、Webアプリケーションを作成するための一連のツールを提供します。jQueryは主にDOMを変更するためのツールを提供します。ページにjQueryが存在する場合、AngularJSはそれを自動的に使用します。そうでない場合、AngularJSにはjQuery Liteが同梱されています。これは削減されていますが、jQueryの完全に使用可能なバージョンです。
MiskoはjQueryが好きで、jQueryの使用に反対しません。ただし、進むにつれて、スコープ、テンプレート、およびディレクティブの組み合わせを使用してほぼすべての作業を実行できることがわかります。コードはより離散的で構成可能であり、さらに多くのことができるため、可能な限りこのワークフローを優先する必要があります。角度。
jQueryを使用する場合、それをあちこちに散らばってはいけません。AngularJSでのDOM操作の正しい場所はディレクティブです。これらについては後で詳しく説明します。
jQueryは通常、控えめに適用されます。JavaScriptコードはヘッダー（またはフッター）でリンクされており、ここに記載されているのはここだけです。セレクターを使用してページの一部を選択し、それらの部分を変更するプラグインを作成します。
JavaScriptが制御しています。HTMLは完全に独立した存在です。JavaScriptがなくても、HTMLはセマンティックのままです。Onclick属性は非常に悪い習慣です。
AngularJSについて最初に気づくのは、カスタム属性がどこにでもあるということです。HTMLはng属性で散らかされます。これらは本質的にステロイドのonClick属性です。これらはディレクティブ（コンパイラディレクティブ）であり、テンプレートをモデルにフックする主な方法の1つです。
これを初めて目にしたとき、AngularJSを（私が最初にしたように）古い学校の邪魔なJavaScriptとして書きたくなるかもしれません。実際、AngularJSはこれらのルールに従っていません。AngularJSでは、HTML5はテンプレートです。AngularJSによってコンパイルされ、Webページが生成されます。
これが最初の大きな違いです。jQueryにとって、あなたのWebページは操作されるDOMです。AngularJSにとって、HTMLはコンパイルされるコードです。AngularJSはWebページ全体を読み取り、組み込みコンパイラを使用して文字通りそれを新しいWebページにコンパイルします。
テンプレートは宣言型である必要があります。それを読むだけでその意味が明確になるはずです。わかりやすい名前のカスタム属性を使用します。ここでも、意味のある名前で新しいHTML要素を作成します。最小限のHTML知識を持ち、コーディングスキルがないデザイナーは、AngularJSテンプレートを読んで、それが何をしているかを理解できます。彼または彼女は変更を加えることができます。これがAngularの方法です。
AngularJSを起動してチュートリアルを実行するときに私が最初に尋ねた質問の1つは、「コードはどこにありますか？」です。。私はJavaScriptを作成していませんが、それでもこのような振る舞いをしています。答えは明白です。AngularJSはDOMをコンパイルするため、AngularJSはHTMLをコードとして扱います。多くの単純なケースでは、多くの場合、テンプレートを作成して、AngularJSにそれをアプリケーションにコンパイルさせるだけで十分です。
テンプレートがアプリケーションを動かします。DSLとして扱われます。AngularJSコンポーネントを作成すると、AngularJSがコンポーネントを取り込んで、テンプレートの構造に基づいて適切なタイミングで使用できるようにします。これは、テンプレートが出力専用である標準のMVCパターンとは大きく異なります。
たとえばRuby on RailsよりもXSLTに似ています。
これは、慣れが必要な制御の根本的な逆転です。
JavaScriptからアプリケーションを駆動しようとするのをやめます。テンプレートでアプリケーションを駆動し、AngularJSでコンポーネントの相互接続を処理します。これもまた角度的な方法です。
jQueryでは、HTMLページに意味のある意味のあるコンテンツを含める必要があります。JavaScriptが（ユーザーまたは検索エンジンによって）オフにされている場合、コンテンツは引き続きアクセス可能です。
AngularJSはHTMLページをテンプレートとして扱うからです。コンテンツは通常、最終的にAPIから取得されるモデルに格納されるため、テンプレートはセマンティックである必要はありません。AngularJSは、モデルを使用してDOMをコンパイルし、セマンティックWebページを生成します。
HTMLソースはセマンティックではなくなり、代わりにAPIとコンパイルされたDOMはセマンティックになります。
AngularJSでは、モデルに存在することを意味し、HTMLは単なるテンプレートであり、表示専用です。
この時点で、SEOとアクセシビリティに関してあらゆる種類の質問がありそうです。ここには未解決の問題があります。ほとんどのスクリーンリーダーがJavaScriptを解析するようになります。検索エンジンはAJAX処理されたコンテンツをインデックスに登録することもできます。それでも、pushstate URLを使用していて、適切なサイトマップがあることを確認する必要があります。この問題の説明については、こちらをご覧ください：https : //stackoverflow.com/a/23245379/687677
懸念の分離（SOC）は、SEO、アクセシビリティ、ブラウザの非互換性など、さまざまな理由で長年のWeb開発で成長してきたパターンです。次のようになります。
繰り返しになりますが、AngularJSは彼らのルールに従っていません。脳卒中では、AngularJSは、受け取った知恵の十年を廃止し、代わりにテンプレートがもはやない少しでも、セマンティックであるMVCパターンを実装します。
次のようになります。
MVCとSOCは同じスケールの反対側ではなく、完全に異なる軸上にあります。AngularJSのコンテキストではSOCは意味がありません。それを忘れて先に進む必要があります。
私のように、ブラウザ戦争を生き抜いたとしたら、この考えはかなり不快なものになるかもしれません。それを乗り越えて、それはそれの価値があるでしょう、私は約束します。
プラグインは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によって作成および維持される特別なオブジェクトです。特定のディレクティブは、新しい$ scopeを生成します。これは、デフォルトでは、JavaScriptプロトタイプの継承を使用して、そのラッピング$ scopeから継承します。$ scopeオブジェクトには、コントローラーとビューからアクセスできます。
これは賢い部分です。$ scope継承の構造はDOMの構造にほぼ準拠しているため、要素は独自のスコープとそれに含まれるスコープに、グローバル$ scope（グローバルスコープとは異なります）までシームレスにアクセスできます。
これにより、データを渡しやすくなり、適切なレベルでデータを保存できるようになります。ドロップダウンが展開されている場合、それについて知る必要があるのはドロップダウン$ scopeだけです。ユーザーが設定を更新する場合、グローバル$ scopeを更新することができ、ユーザー設定をリッスンしているネストされたスコープには自動的にアラートが送信されます。
これは複雑に聞こえるかもしれませんが、実際にリラックスすると、まるで飛行のようになります。$ scopeオブジェクトを作成する必要はありません。AngularJSは、テンプレート階層に基づいて、適切かつ適切にインスタンス化および構成します。次に、AngularJSは、依存性注入の魔法を使用してコンポーネントで使用できるようにします（これについては後で詳しく説明します）。
jQueryでは、すべてのDOM変更を手動で行います。プログラムで新しいDOM要素を作成します。JSON配列があり、それをDOMに配置する場合は、HTMLを生成して挿入する関数を記述する必要があります。
AngularJSでもこれを行うことができますが、データバインディングを利用することをお勧めします。モデルを変更します。DOMはテンプレートを介してモデルにバインドされるため、DOMは自動的に更新されるため、介入は必要ありません。
データバインディングはテンプレートから、属性または中かっこ構文を使用して行われるため、非常に簡単です。それに関連付けられている認知のオーバーヘッドがほとんどないので、あなたはいつもそれをやっていることに気付くでしょう。
<input ng-model="user.name" />入力要素をにバインドします$scope.user.name。入力を更新すると、現在のスコープの値が更新され、その逆も同様です。
同様に：
<p>
{{user.name}}
</p>ユーザー名を段落に出力します。これはライブバインディングなので、$scope.user.name値が更新されると、テンプレートも更新されます。
jQueryでは、Ajax呼び出しを行うのはかなり簡単ですが、それでも、よく考えてしまうかもしれません。考慮すべき追加の複雑さ、および維持すべきスクリプトのかなりのチャンクがあります。
AngularJSでは、Ajaxがデフォルトの主要ソリューションであり、ほとんど気付かれることなく、常に発生します。ng-includeを使用してテンプレートを含めることができます。最も単純なカスタムディレクティブを使用してテンプレートを適用できます。Ajax呼び出しをサービスにラップして、GitHubサービス、または驚くほど簡単にアクセスできるFlickrサービスを自分で作成できます。
jQueryでは、APIからのフィードのプルなど、domに関連しない小さなタスクを実行したい場合、クロージャーでそれを行うための小さな関数を作成する場合があります。これは有効な解決策ですが、そのフィードに頻繁にアクセスしたい場合はどうでしょうか。そのコードを別のアプリケーションで再利用したい場合はどうなりますか？
AngularJSはサービスオブジェクトを提供します。
サービスは、関数とデータを含む単純なオブジェクトです。それらは常にシングルトンです。つまり、それらが複数になることはありません。Stack Overflow APIにアクセスしたいとしますStackOverflowService。そのためのメソッドを定義するを作成します。
ショッピングカートがあるとします。カートを維持し、アイテムを追加および削除するためのメソッドを含むShoppingCartServiceを定義する場合があります。サービスはシングルトンであり、他のすべてのコンポーネントによって共有されるため、ショッピングカートに書き込み、そこからデータをプルする必要があるオブジェクト。それは常に同じカートです。
サービスオブジェクトは自己完結型のAngularJSコンポーネントであり、必要に応じて使用および再利用できます。これらは、関数とデータを含む単純なJSONオブジェクトです。これらは常にシングルトンであるため、1つの場所のサービスにデータを格納すると、同じサービスを要求するだけで、そのデータを別の場所に取り出すことができます。
AngularJSが依存関係を管理します。オブジェクトが必要な場合は、それを参照するだけで、AngularJSが取得します。
あなたがこれを使い始めるまで、これがどれほどの大規模な恩恵であるかを説明するのは難しいです。AngularJS 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は必要に応じて1つずつコンポーネントを渡します。
jQueryは、コードをどのように編成する必要があるかについてほとんど言及していません。AngularJSには意見があります。
AngularJSは、コードを配置できるモジュールを提供します。たとえば、Flickrと通信するスクリプトを作成している場合は、Flickrモジュールを作成して、Flickr関連のすべての関数をラップすることができます。モジュールには他のモジュール（DI）を含めることができます。通常、メインアプリケーションはモジュールです。これには、アプリケーションが依存する他のすべてのモジュールが含まれます。
簡単なコードの再利用が可能です。Flickrに基づいて別のアプリケーションを作成したい場合は、Flickrモジュールと出来上がりを含めるだけで、新しいアプリケーションのすべてのFlickr関連機能にアクセスできます。
モジュールにはAngularJSコンポーネントが含まれています。モジュールを含めると、そのモジュール内のすべてのコンポーネントが、一意の文字列で識別される単純なリストとして使用できるようになります。次に、AngularJSの依存性注入メカニズムを使用して、これらのコンポーネントを相互に注入できます。
AngularJSとjQueryは敵ではありません。AngularJS内でjQueryを非常にうまく使用できます。AngularJSをうまく使用している場合（テンプレート、データバインディング、$ scope、ディレクティブなど）、必要なjQueryよりもはるかに少ないjQuery が必要であることがわかります。
理解すべき主なことは、テンプレートがアプリケーションを駆動することです。すべてを実行する大きなプラグインの作成をやめます。代わりに、1つのことを行う小さなディレクティブを記述してから、それらを結び付ける単純なテンプレートを記述します。
控えめなJavaScriptについては考えずに、HTML拡張機能の観点から考えてください。
私はAngularJSにとても興奮しました。オンラインでhttp://nicholasjohnson.com/angular-book/を読んで、大歓迎です。お役に立てれば幸いです。
必要なパラダイムシフトについて説明できますか？
命令型と宣言型
jQueryを使用するには、ステップバイステップを発生する必要があるかDOMを教えてください。AngularJSあなたが何をしたいの結果を説明、それをしませんか。詳細はこちら。また、Mark Rajcokの回答もご覧ください。
クライアント側のWebアプリを異なる方法で設計および設計するにはどうすればよいですか？
AngularJSは、MVCパターンを使用する完全なクライアント側フレームワークです（グラフィック表現を確認してください）。関心事の分離に大きく焦点を当てています。
最大の違いは何ですか？何をする/使うのをやめるべきか; 代わりに何をする/使用する必要がありますか？
jQueryはライブラリです
AngularJSは、MVC、依存関係の注入、データバインディングなどの優れた機能を多数組み合わせた、非常にテストしやすい美しいクライアント側フレームワークです。
これは、関心の分離とテスト（単体テストとエンドツーエンドテスト）に焦点を当てており、テスト駆動開発を容易にします。
開始する最良の方法は、彼らの素晴らしいチュートリアルを通過することです。数時間で手順を実行できます。ただし、舞台裏のコンセプトをマスターしたい場合は、参考資料が無数に含まれています。
サーバー側の考慮事項/制限はありますか？
純粋なjQueryをすでに使用している既存のアプリケーションで使用できます。ただし、AngularJSの機能を十分に活用したい場合は、RESTfulアプローチを使用してサーバー側をコーディングすることを検討してください。
そうすることで、リソースファクトリを活用できるようになります。これにより、サーバー側のRESTful APIの抽象化が作成され、サーバー側の呼び出し（取得、保存、削除など）が非常に簡単になります。
「パラダイムシフト」を説明するために、私は短い答えで十分だと思います。
でjQueryを、あなたは一般的に使用セレクタ要素を見つけること、そしてそれらをワイヤー：
$('#id .class').click(doStuff);
でAngularJS、使用するディレクティブを直接要素をマークするために、それらを配線します。
<a ng-click="doStuff()">
AngularJSでは、セレクターを使用して要素を検索する必要はありません（または必要ありません）。AngularJSのjqLiteと本格的なjQueryの主な違いは、jqLiteがセレクターをサポートしていないことです。
したがって、「jQueryをまったく含めない」と言われるのは、主にセレクタを使用したくないためです。代わりにディレクティブを使用する方法を学習してほしい。直接、選択しないでください！
jQueryは、getElementByHerpDerp短いブラウザやクロスブラウザのような途方もなく長いJavaScriptコマンドを作成します。
AngularJSを使用すると、動的なWebアプリケーションで適切に機能する独自のHTMLタグ/属性を作成できます（HTMLは静的なページ用に設計されているため）。
「私はjQueryの背景を持っているので、AngularJSではどう思いますか？」「HTMLの背景があります。JavaScriptでどう思いますか？」あなたが質問をしているという事実は、これらの2つのリソースの基本的な目的を理解していない可能性が高いことを示しています。これが、「AngularJSはディレクティブを使用するのに対し、jQueryはCSSセレクターを使用してこれを行うjQueryオブジェクトを作成するなど...」とリストを調べるのではなく、基本的な違いを指摘するだけで質問に答えることを選んだ理由です。 。この質問は長い回答を必要としません。
jQueryは、ブラウザーでのJavaScriptのプログラミングを容易にする方法です。より短い、クロスブラウザーコマンドなど
AngularJSはHTMLを拡張<div>するため、アプリケーションを作成するためだけにすべてを配置する必要はありません。HTMLは、静的で教育的なWebページである目的のために設計されたものではなく、実際にアプリケーションで機能します。JavaScriptを使用してこれを遠回りで実現しますが、基本的にはJavaScriptではなくHTMLの拡張です。
$(".myclass")非常に一般的であり、PO-JavascriptよりもjQueryの方が少し簡単です。
jQuery：DOM要素の「DOMのクエリ」と、何かをすることについて多くのことを考えています。
AngularJS：モデルは真実であり、あなたはいつもその角度から考えます。
たとえば、DOMで何らかの形式で表示する予定のサーバーからデータを取得する場合、jQueryでは '1。DOMでこのデータを配置する場所を検索します。新しいノードを作成するか、そのinnerHTMLを設定するだけで、そこに更新/追加します。次に、このビューを更新する場合は、 '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が関数を提示してそれに応じてそれを呼び出す必要がある方法を学習することを意味します。これは、AngularJSをライブラリではなくフレームワークにする理由の1つです。
それらは非常に良いですが、長い回答です。
私の経験を要約すると：
jQueryはDOM操作ライブラリです。
AngularJSはMV *フレームワークです。
実際、AngularJSは数少ないJavaScript MV *フレームワークの1つです（まだ多くのJavaScript MVCツールがカテゴリーライブラリーに該当します）。
フレームワークであり、コードをホストし、何をいつ呼び出すかについての決定権を所有します。
AngularJS自体にはjQuery-liteエディションが含まれています。したがって、いくつかの基本的なDOM選択/操作では、jQueryライブラリを含める必要はありません（ネットワークで実行するために多くのバイトを節約します）。
AngularJSには、DOM操作と再利用可能なUIコンポーネントの設計のための「ディレクティブ」の概念があるため、DOM操作に関連するものを行う必要があると感じたときはいつでもそれを使用する必要があります（ディレクティブは、AngularJSを使用しながらjQueryコードを記述する必要がある場所のみです）。
AngularJSには学習曲線が必要です（jQuery以外:-)。
-> jQueryのバックグラウンドから来た開発者にとって、私の最初のアドバイスは、「AngularJSのような豊富なフレームワークにジャンプする前に、JavaScriptをファーストクラス言語として学習すること」です。上記の事実を一生懸命学びました。
幸運を。
リンゴとオレンジです。それらを比較する必要はありません。それらは2つの異なるものです。AngularJsにはすでにjQuery liteが組み込まれており、本格的なjQueryバージョンを含めなくても基本的なDOM操作を実行できます。
jQueryはすべてDOM操作に関するものです。クロスブラウザーの問題をすべて解決します。解決しないと対処する必要がありますが、アプリをAngularJSのようなコンポーネントに分割できるフレームワークではありません。
AngularJの良い点は、ディレクティブでDOM操作を分離/分離できることです。ng-clickなど、すぐに使用できる組み込みディレクティブがあります。すべてのビューロジックまたはDOM操作を含む独自のカスタムディレクティブを作成して、ビジネスロジックを処理するコントローラーまたはサービスにDOM操作コードが混在することを防ぐことができます。
Angularはあなたのアプリを-Controllers-Services-Views-などに分解します
もう1つあります。それがディレクティブです。これは、任意のDOM要素にアタッチできる属性であり、jQueryがAngularJsコンポーネントと競合したり、そのアーキテクチャーを台無しにしたりする心配をせずに、その内部でjQueryを使用することができます。
私が参加したミートアップから聞いたところ、Angularの創設者の1人は、DOM操作を分離するために本当に一生懸命働いたので、それらを元に戻そうとしないでください。
ポッドキャストのJavaScript Jabber：Episode＃32を聞いて、AngularJSのオリジナルクリエイターであるMisko HeveryとIgor Minarを紹介します。他の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はある程度それを舞台裏で使用しています）。
AngularJSとjQuery：
AngularJsとJQueryは、JQLite機能を除いてすべてのレベルで完全に異なり、AngularJsのコア機能の学習を開始すると表示されます（以下で説明します）。
AngularJsは、独立したクライアント側アプリケーションの構築を提供するクライアント側フレームワークです。JQueryは、DOMを操作するクライアント側のライブラリです。
AngularJs Cool Principle-UIにいくつかの変更が必要な場合は、モデルデータ変更の観点から考えてください。データを変更すると、UIが再レンダリングされます。DOMをほとんど必要としない限り、毎回DOMを操作する必要はありません。また、DOMはAngular Directivesを介して処理する必要があります。
この質問に答えるために、AngularJSを使用した最初のエンタープライズアプリケーションでの経験を共有したいと思います。これらは、AngularがjQueryの考え方を変え始めたときに提供する最も優れた機能であり、Angularをライブラリーではなくフレームワークのようなものにしています。
双方向のデータバインディングはすばらしいです。 グリッドには、すべての機能UPDATE、DELTE、INSERTがありました。ng-repeatを使用してグリッドのモデルをバインドするデータオブジェクトがあります。削除と挿入のための単純なJavaScriptコードを1行書くだけでよいのです。グリッドモデルが瞬時に変更されると、グリッドは自動的に更新されます。更新機能はリアルタイムであり、コードはありません。あなたは素晴らしい気分です!!!
再利用可能なディレクティブは非常に優れ ています。ディレクティブを1か所に記述し、アプリケーション全体で使用できます。ああ、神様！！！これらのディレクティブをページング、正規表現、検証などに使用しました。
ルーティングは強力です： 使用方法は実装次第ですが、リクエストをルーティングしてHTMLとコントローラー（JavaScript）を指定するには、ほんの数行のコードが必要です
コントローラーは素晴らしいです： コントローラーは独自のHTMLを処理しますが、この分離は一般的な機能でもうまく機能します。マスターHTMLのボタンをクリックして同じ関数を呼び出す場合は、各コントローラーに同じ関数名を記述し、個別のコードを記述します。
プラグイン： アプリにオーバーレイを表示するなど、他にも多くの同様の機能があります。そのためのコードを記述する必要はありません。wc-overlayとして利用可能なオーバーレイプラグインを使用するだけで、すべてのXMLHttpRequest（XHR）リクエストが自動的に処理されます。
RESTfulアーキテクチャに最適： 完全なフレームワークであるため、AngularJSはRESTfulアーキテクチャでの作業に最適です。REST CRUD APIを呼び出すのは非常に簡単で、
サービス：サービスを使用して一般的なコードを記述し、コントローラーのコードを少なくします。サービスを使用して、コントローラー間で共通の機能を共有できます。
拡張性：Angularは、角度ディレクティブを使用してHTMLディレクティブを拡張しました。HTML内に式を記述し、実行時に評価します。独自のディレクティブとサービスを作成し、余計な手間をかけずにそれらを別のプロジェクトで使用します。
JavaScript MV *の初心者であり、純粋にアプリケーションアーキテクチャ（サーバー/クライアント側の問題ではない）に焦点を合わせているので、次のリソースをお勧めします（まだ驚かされていませんが）。JavaScript デザインパターン、Addy Osmani著、さまざまなJavaScriptデザインパターンの紹介として。この回答で使用される用語は、上記のリンクされたドキュメントから取得されます。私は、受け入れられた答えで本当によく言われたことを繰り返すつもりはありません。代わりに、この回答は、AngularJS（およびその他のライブラリ）を強化する理論的な背景にリンクしています。
私と同じように、AngularJS（またはEmber.js、Durandal、およびその他のMV *フレームワーク）は、さまざまなJavaScriptデザインパターンの多くを組み合わせる1つの複雑なフレームワークであることをすぐに理解できます。
また、1つのグローバルフレームワークに飛び込む前に、（1）ネイティブJavaScriptコードと（2）これらのパターンのそれぞれについて個別に小さなライブラリをテストする方が簡単だとわかりました。これにより、フレームワークが対応する重要な問題をよりよく理解できました（個人的に問題に直面しているため）。
例えば：
注意：このリストは完全ではなく、「最高のライブラリ」でもありません。それらはたまたま私が使用したライブラリーです。これらのライブラリーにはさらに多くのパターンが含まれており、言及されているものはそれらの主な焦点または元の意図にすぎません。このリストに何か不足していると思われる場合は、コメントでその旨をお知らせください。喜んで追加します。
実際、AngularJSを使用している場合は、jQueryはもう必要ありません。AngularJS自体にはバインディングとディレクティブがあります。これは、jQueryで実行できるほとんどのことに対して非常に優れた「置き換え」です。
私は通常、AngularJSとCordovaを使用してモバイルアプリケーションを開発しています。私が必要としたjQueryの唯一のものはセレクタです。
グーグルで見ると、スタンドアロンのjQueryセレクターモジュールがあることがわかります。シズルです。
そして、私は、AngularJSを使用してjQuery Selector（Sizzleを使用）の機能を備えたWebサイトをすばやく開始するのに役立つ小さなコードスニペットを作成することにしました。
ここでコードを共有しました：https : //github.com/huytd/Sizzular