jQuery では、ページを設計してから動的にします。これは、jQuery が拡張用に設計されており、その単純な前提から信じられないほど成長したためです。
しかし、AngularJS では、アーキテクチャを念頭に置いてゼロから始める必要があります。「DOM のこの部分があり、それを X にしたい」と考えることから始めるのではなく、達成したいことから始めて、アプリケーションの設計に取り掛かり、最後にビューの設計に取り掛かる必要があります。
同様に、jQuery が X、Y、および Z を実行するという考えから始めないでください。そのため、モデルとコントローラー用にその上に AngularJS を追加します。始めたばかりの場合、これは本当に魅力的です。そのため、新しい AngularJS 開発者は、少なくとも「Angular のやり方」に慣れるまでは、jQuery をまったく使用しないことを常にお勧めします。
ここやメーリング リストで、多くの開発者が 150 行または 200 行のコードの jQuery プラグインを使用してこれらの精巧なソリューションを作成しているのを見てきました$apply。しかし、彼らは最終的にそれを機能させます！問題は、ほとんどの場合、AngularJS で jQuery プラグインをコードの一部で書き直すことができ、突然すべてがわかりやすく簡単になることです。
要点は次のとおりです。解決するときは、まず「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="/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 でプログラムしたロガーを考えてみてください。それをディレクティブに入れても、「Angular Way」でやりたいと思います。それでもDOM 操作は必要ありません。DOM の操作が必要になることはよくありますが、思ったよりもめったにありません。アプリケーションの任意の場所でDOM 操作を行う前に、本当に必要かどうか自問してください。もっと良い方法があるかもしれません。
これは、私が最も頻繁に目にするパターンを示す簡単な例です。切り替え可能なボタンが必要です。(注: この例は、まったく同じ方法で解決されるより複雑なケースを表すために少し不自然で、冗長です。)
.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渡される要素は、すでにjQuery 要素になっています。linkこのディレクティブは (非常に複雑な場合でも!) より簡単に次のように書き換えることができます。
.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 の一部であるかのように使用します。
ngClick別の言い方をすれば、AngularJS がすぐに使用できるものではない場合、チームがそれをどのように達成して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 におけるスコープ プロトタイプ/プロトタイプ継承のニュアンスは何ですか?
必要なパラダイムシフトについて説明できますか?
命令型と宣言型
jQueryを使用すると、必要な処理を段階的に DOM に伝えることができます。AngularJSを使用すると、必要な結果を記述できますが、それを行う方法は記述できません。詳細はこちら。また、Mark Rajcok の回答もご覧ください。
クライアント側の Web アプリを別の方法で設計および設計するにはどうすればよいですか?
AngularJS は、MVCパターンを使用する完全なクライアント側フレームワークです (グラフィカルな表現を確認してください)。関心の分離に重点を置いています。
最大の違いは何ですか？何をする/使うのをやめる必要がありますか; 代わりに何を/使用し始めるべきですか?
jQueryはライブラリです
AngularJSは美しいクライアント側フレームワークであり、高度にテスト可能であり、MVC、依存性注入、データ バインディングなどの多数の優れた機能を組み合わせています。
テスト駆動型開発を容易にする、関心事とテスト (単体テストとエンドツーエンド テスト) の分離に焦点を当てています。
開始する最良の方法は、素晴らしいチュートリアルを読むことです。数時間で手順を実行できます。ただし、舞台裏の概念を習得したい場合は、さらに読むための無数のリファレンスが含まれています.
サーバー側の考慮事項/制限はありますか?
すでに純粋な jQuery を使用している既存のアプリケーションで使用できます。ただし、AngularJS の機能を十分に活用したい場合は、RESTfulアプローチを使用してサーバー側をコーディングすることを検討してください。
これにより、サーバー側のRESTful APIの抽象化が作成され、サーバー側の呼び出し (取得、保存、削除など) が非常に簡単になります。
To describe the "paradigm shift", I think a short answer can suffice.
In jQuery, you typically use selectors to find elements, and then wire them up:
$('#id .class').click(doStuff);
In AngularJS, you use directives to mark the elements directly, to wire them up:
<a ng-click="doStuff()">
AngularJS doesn't need (or want) you to find elements using selectors - the primary difference between AngularJS's jqLite versus full-blown jQuery is that jqLite does not support selectors.
So when people say "don't include jQuery at all", it's mainly because they don't want you to use selectors; they want you to learn to use directives instead. Direct, not select!
jQuery は、getElementByHerpDerp短いブラウザーやクロスブラウザーのような途方もなく長い JavaScript コマンドを作成します。
AngularJS を使用すると、動的 Web アプリケーションでうまく機能する独自の HTML タグ/属性を作成できます (HTML は静的ページ用に設計されているため)。
「私は jQuery のバックグラウンドを持っていますが、AngularJS についてどう思いますか?」「私は HTML のバックグラウンドを持っていますが、JavaScript ではどのように考えますか?」と言っているようなものです。この質問をしているという事実は、これら 2 つのリソースの基本的な目的を理解していない可能性が高いことを示しています。これが、「AngularJS はディレクティブを使用するのに対し、jQuery は CSS セレクターを使用して、あれやこれやなどを行う jQuery オブジェクトを作成する」というリストを調べるのではなく、根本的な違いを指摘することで質問に答えることにした理由です。 . この質問には、長い回答は必要ありません。
jQuery は、ブラウザーでの JavaScript のプログラミングを容易にする方法です。より短い、クロスブラウザー コマンドなど。
<div>AngularJS は HTML を拡張するため、アプリケーションを作成するためだけにあちこちに配置する必要はありません。これにより、HTML は、静的な教育 Web ページ向けに設計されたものではなく、実際にアプリケーション向けに機能します。これは JavaScript を使用して遠回しに行われますが、基本的には JavaScript ではなく HTML の拡張です。
それらはいくつかの非常に素晴らしいですが、長い答えです。
私の経験を要約すると：
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 を学ぶこと」です。私は上記の事実を苦労して学びました。
幸運を。
JavaScript プログラミングに初めて真剣に触れたのはNode.jsと AngularJSだったので、この質問は興味深いと思います。私は jQuery を学んだことはありませんが、それは良いことだと思います。実際、私は自分の問題に対する jQuery ソリューションを積極的に避けており、代わりに、問題を解決するための「AngularJS の方法」だけを探しています。したがって、この質問に対する私の答えは、本質的に「jQuery を学んだことのない人のように考えてください」ということになると思います。
AngularJS と jQuery:
AngularJs と JQuery は、JQLite の機能を除いてすべてのレベルで完全に異なります。AngularJs のコア機能を学習し始めると、それがわかります (以下で説明します)。
AngularJs は、独立したクライアント側アプリケーションの構築を提供するクライアント側フレームワークです。JQuery は、DOM を操作するクライアント側のライブラリです。
AngularJs Cool Principle - UI を変更したい場合は、モデル データの変更の観点から考えてください。データを変更すると、UI が再レンダリングされます。DOM がほとんど必要とされない限り、毎回 DOM をいじる必要はありません。これも Angular ディレクティブを介して処理する必要があります。
この質問に答えるために、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 の呼び出しは非常に簡単で、
Services : サービスを使用して一般的なコードを記述し、コントローラーのコードを減らします。サービスを使用して、コントローラー間で共通の機能を共有できます。
拡張性: Angular は、Angular ディレクティブを使用して HTML ディレクティブを拡張しました。html 内に式を記述し、実行時に評価します。独自のディレクティブとサービスを作成し、追加の作業なしで別のプロジェクトで使用できます。
JavaScript MV* の初心者であり、純粋にアプリケーション アーキテクチャ (サーバー/クライアント側の問題ではない) に焦点を当てているので、次のリソースをお勧めします (まだ言及されていないことに驚いています): Addy Osmani によるJavaScript Design Patterns、さまざまな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