Angular.jsと共にRequire.jsを使用するのは意味がありますか？
私はAngular.jsの初心者で、Backbone.jsとの違いを理解しようとしています... Backboneを使用している間、Require.jsを使用してパッケージの依存関係を管理していました。 Angular.jsでも同じことをするのは意味がありますか？
そうです、コンポーネントをモジュール化するためにangular.jsを使うことができるrequire.jsと一緒にrequire.jsを使うのは意味があります。
both angular.js and require.jsを使った seedプロジェクト を指してみましょう。それが役立つことを願っています！
私がOPの質問は本当にそうだと思うものを言い換えると：
私が主にAngular 1.xでアプリケーションを構築していて、（暗黙のうちに）Grunt/Gulp/BroccoliとBower/NPMの時代にそれを行っていて、さらにライブラリ依存関係がいくつかあるとします。 RequireなしでAngularを使用することによって得られるものを超えて、Requireは明確で具体的な値を追加しますか？
または、別の言い方をすると：
「Vanilla Angularには、基本的なAngularコンポーネントの読み込みを効果的に管理する必要がありますか？ 他に基本的なスクリプト読み込みの処理方法がある場合 "
そしてそれに対する基本的な答えは、「他に何かが起こっているのでなければ、そして/または新しい、より現代的なツールを使用できないのではない」ということです。
はじめに明確にしましょう。RequireJSは、非常に重要な問題を解決し、私たちが現在行っているよりスケーラブルでプロフェッショナルなJavascriptアプリケーションに向けて出発する素晴らしいツールです。重要なのは、モジュール化と物事をグローバルな範囲から外すという概念に多くの人が出会ったのは初めてのことです。したがって、拡張が必要なJavascriptアプリケーションを構築するのであれば、RequireとAMDのパターンはそれを行うための悪いツールではありません。
しかし、 Require/AMDを特に適したものにするAngularについて何か特別なことはありますか？ いいえ。実際、Angularは独自のモジュール化およびカプセル化パターンを提供します。これにより、多くの点でAMDの基本的なモジュール化機能が冗長になります。そして、AngularモジュールをAMDパターンに統合することは不可能ではありませんが、それは少し...手の込んだ作業です。 2つのパターンをうまく統合するために時間を費やすことになるでしょう。
Angularチーム自身から見たいくつかの観点から、Angular Batarangの作者で、現在は[AngularのメンバーであるBrian Fordからの this があります。コアチーム：
RequireJSをAngularJSと一緒に使用することはお勧めしません。それは確かに可能ですが、RequireJSが実際に有益である例は見たことがありません。
そのため、Angular JSの非常に具体的な問題について、AngularとRequire/AMDは直交しており、場所が重複しています。あなたは 一緒に 一緒に使うことができますが、Angular自体の性質やパターンに特に関連する理由はありません。
しかし、スケーラブルなJavascriptアプリケーションの内部および外部の依存関係の基本的な管理はどうでしょうか。 Requireは、そこでは私にとって本当に重要なことをしていませんか？
BowerとNPM、特にNPMをチェックすることをお勧めします。私はこれらのツールの比較優位について聖なる戦争を始めようとしていません。私はただ言いたいのですが、その猫を肌にする方法は他にもありますが、それらの方法 おそらく はAMD/Requireよりもさらに優れています。 （2015年後半、特にNPMとES6またはCommonJSモジュールとの組み合わせで、彼らは間違いなくもっと一般的な勢いを得ました。 related SO question を参照してください。）
遅延読み込みはどうですか？
遅延読み込みと遅延ダウンロードは異なることに注意してください。 Angularの遅延読み込みは、サーバーから直接読み込んでいるわけではありません。 JavaScript自動化機能を備えたYeomanスタイルのアプリケーションでは、Shebang全体を1つのファイルに連結して縮小します。それらは存在しますが、必要になるまで実行/インスタンス化されません。これを行うことで得られる速度と帯域幅の改善は、特定の20-lineコントローラを遅延ダウンロードすることによる改善の可能性をはるかに上回っています。実際、そのコントローラのネットワーク遅延と伝送オーバーヘッドの無駄は、コントローラ自体のサイズより1桁大きくなるでしょう。
しかし、あなたが本当に怠惰なダウンロードを必要としているとしましょう、おそらくあなたのアプリケーションのまれに使用される部分のために、例えば管理者インターフェースのように。これは非常に合法的なケースです。 requireは確かにあなたのためにそれをすることができます。しかし、同じことを実現する [manyother 、 potentialmoreflexibleoptions もあります。そしてAngular 2.0は明らかにこれを私たちのために扱い、 router に組み込まれています。 （ 詳細 ）
しかし、私の地元の開発者による開発中はどうでしょうか。
手動でindex.htmlにすべて添付しなくても、何十ものスクリプトファイルをすべてロードする方法はありますか。
Yeomanのgenerator-angle、または generator-gulp-angular で具体化されている自動化パターン、あるいはReactのための標準的なWebpack自動化のサブジェネレーターを見てください。これらはあなたにクリーンでスケーラブルな方法を提供します：コンポーネントが足場にされる時に自動的にファイルを添付するか、またはそれらが特定のフォルダーに存在するか特定のグロブパターンにマッチするなら単に自動的にそれらすべてをつかむこと。後者の選択肢があれば、二度とあなた自身のスクリプトローディングについて考える必要はありません。
要点？
Requireは特定の点では素晴らしいツールです。しかし可能な限り穀物に行き、可能な限りあなたの懸念を切り離してください。 AngularがAngular自身のモジュール化パターンについて心配するようにし、一般的なモジュール化パターンとしてES6モジュールまたはCommonJSを使用することを検討してください。現代の自動化ツールでは、スクリプトのロードと依存関係の管理について心配してください。そして、他の2つの懸念と絡み合うのではなく、粒度の細かい方法で非同期遅延ロードの面倒を見てください。
それでも、Angularアプリを開発していても、何らかの理由でJavascript自動化ツールを使用するためにNodeをマシンにインストールできない場合は、Requireをお勧めします。そして、それぞれが独自の依存関係などを宣言しているAngularコンポーネントを動的にロードしたいという非常に複雑な設定を見ました。そして、おそらく私はその問題を別の方法で解決しようとしますが、その非常に特殊な状況のために、そのアイデアのメリットを見ることができます。
しかし、そうでなければ...新しいAngularアプリケーションと最新の自動化環境を作成するための柔軟性でゼロから始めるとき...他にももっと柔軟で、より近代的なオプションがたくさんあります。
（進化するJSシーンに対応するために繰り返し更新されます）
はい、それは理にかなっています。
Angularモジュールは、スクリプトのロード順序や遅延スクリプトのフェッチの問題を解決しようとしません。これらの目標は直交しており、両方のモジュールシステムが並んで共存し、その目標を達成することができます。
これは主観的な質問だと思いますので、主観的な意見を述べます。
Angularにはモジュール化メカニズムが組み込まれています。アプリを作成するときに最初にすることは、
var app = angular.module("myApp");
その後
app.directive(...);
app.controller(...);
app.service(...);
あなたが角度のためのきちんとしたスターターアプリである角度シードを見ているならば、彼らはディレクティブ、サービス、コントローラーなどを異なるモジュールに分けて、それからそれらのモジュールをあなたのメインアプリの依存としてロードしました。
何かのようなもの ：
var app = angular.module("myApp",["Directives","Controllers","Services"];
Angularはまた、スクリプトファイルではなくこれらのモジュールを（メモリに）遅延ロードします。
スクリプトファイルの遅延読み込みに関しては、極端に大きいものを書いているのでなければ、率直に言うと、その本質的に角度があると書くコードの量が減るのでやり過ぎになります。他のほとんどのフレームワークで書かれた典型的なアプリは、角度で書いた場合、LOCの約30-50％の削減を期待できます。
AngularJSでRequireJSを使用するのは理にかなっていますが、 依存性注入 に関してそれぞれがどのように機能するかを理解している場合に限ります。
AngularJSには独自の依存システムがあり、実装を再利用するためにAngularJSモジュールを新しく作成したモジュールに注入できます。 AngularJSフィルタ "greet"を実装する "first"モジュールを作成したとしましょう。
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
それでは、「さようなら」フィルタを実装する「second」という別のモジュールで「greet」フィルタを使用したいとしましょう。 "first"モジュールを "second"モジュールにインジェクトすることができます。
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
重要なことは、RequireJSなしでこれを正しく動作させるためには、 "2番目の" AngularJSモジュールを作成する前に、 "最初の" AngularJSモジュールがページにロードされていることを確認する必要があるということです。引用ドキュメント
モジュールに依存することは、要求モジュールがロードされる前に要求モジュールがロードされる必要があることを意味します。
その意味では、RequireJSがスクリプトをページに挿入するためのクリーンな方法を提供し、スクリプト間の依存関係を整理するのに役立つので、RequireJSが役立ちます。
"最初の"と "2番目の" AngularJSモジュールに戻って、スクリプト依存関係のロードを活用するためにRequireJSを使用してモジュールを異なるファイルに分割する方法を説明します。
// firstModule.js file
define(['angular'], function(angular) {
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
});
// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
});
「最初の」AngularJSモジュールをロードして「2番目の」AngularJSモジュールを作成する必要があるRequireJSコールバックのコンテンツを実行する前に、注入する「firstModule」ファイルに依存していることがわかります。
補足説明：requireJSコールバック関数内でAngularJSを使用するには、 "firstModule"ファイルと "secondModule"ファイルに "angle"を依存関係として注入する必要があり、RequireJS configでライブラリコードに "angle"をマッピングするように設定する必要があります。 RequireJSの利点を無効にしても、AngularJSを従来の方法（scriptタグ）でページにロードすることもできます。
私のブログ投稿で、AngularJSコアからのRequireJSサポートの詳細については、バージョン2.0以降を参照してください。
私のブログ投稿"AngularJSでRequireJSを理解する"に基づいて、これが link です。
@ganarajが述べたように、AngularJSはその中心に依存性注入を持っています。 RequireJSの有無にかかわらずおもちゃの種のアプリケーションを作成するとき、私は個人的にRequireJSがほとんどのユースケースのためにやり過ぎることに気付いた。
これは、RequireJSがスクリプトの読み込み機能や開発中のコードベースのクリーンさを維持するという点で役に立ちません。 r.jsオプティマイザ（ https://github.com/jrburke/r.js ）とalmond（ https://github.com/jrburke/almond ）を組み合わせると、非常にスリムなスクリプトを作成できます。ストーリーを読み込んでいます。ただし、その依存関係管理機能はアプリケーションの中核を成す角度ではそれほど重要ではないため、他のクライアントサイド（HeadJS、LABjs、...）またはサーバーサイド（MVC4 Bundler、...）のスクリプトロードソリューションも評価できます。あなたの特定のアプリケーションのために。
はい、それは、特に非常に大きいSPAのためにそうします。
あるシナリオでは、RequireJSは必須です。たとえば、Google Map APIも使用するAngularJSを使用してPhoneGapアプリケーションを開発します。 RequireJSのようなAMDローダーがないと、Google Map APIスクリプトを入手できないため、オフライン時にアプリが起動時にクラッシュする可能性があります。 AMDローダーは私にユーザーにエラーメッセージを表示する機会を与えてくれます。
ただし、Angular JSとRequireJSの統合は少し面倒です。これをあまり面倒ではないプロセスにするためにangularAMDを作成しました。
簡単に言えば、それは意味があります。最近これはng-conf 2014で議論されました。これはこのトピックに関する講演です：
遅延読み込みコントローラやディレクティブなどを計画している場合は、requirejsとangularjsを使用し、同時に複数の遅延依存関係を単一のスクリプトファイルにまとめてより高速な遅延読み込みを行うことは理にかなっています。 RequireJSは 最適化ツールを持っています それは結合を簡単にします。 http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/を参照してください /
はい、AngularでrequireJSを使用するのは理にかなっています。いくつかの技術的な解決策をテストするために数日を費やしました。
サーバーサイドでRequireJSを使ってAngular Seedを作成しました。とても簡単なものです。私は、2つの異なる依存性注入システムを扱うのは非常に難しいと思うので、AMDモジュールではなく、AMDではなくSHIM表記を使用します。
私はgruntとr.jsを使用してサーバー上のjsファイルを連結していますが、これはSHIM構成（依存関係）ファイルに依存します。だから私は私のアプリで1つだけのJSファイルを参照してください。
詳細については、私のgithubにアクセスしてくださいAngular Seed： https://github.com/matohawk/angular-seed-requirejs
Require.jsは使わないでください。私がこれまでに見たことのあるアプリケーションでは、さまざまな種類のモジュールパターンアーキテクチャが混乱しています。 AMD、明らかにし、IIFEのさまざまなフレーバーなど。 loadOnDemand Angular mod のように、オンデマンドでロードする方法は他にもあります。他のものを追加することはあなたのコードをぎっしりいっぱいにし、 信号対雑音比 - を作り、そしてあなたのコードを読みにくくするだけです。
これが私が使うアプローチです： http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/
このページは、AngularJS + RequireJSの可能な実装を示しています。ここでは、コードが機能とコンポーネントの種類によって分割されています。
Brian Fordからの回答
AngularJSには独自のモジュールシステムがあり、通常はRJSのようなものは必要ありません。
角度はほとんどモジュール化されているので、プロジェクトの複雑さに依存すると思います。あなたのコントローラはマッピングすることができ、あなたはあなたのindex.htmlページにそれらのJavaScriptクラスをインポートすることができます。
しかしあなたのプロジェクトが大きくなった場合に備えて。あるいは、そのようなシナリオを予想している場合は、Angularをrequirejsと統合する必要があります。 this articleでは、そのような統合のためのデモアプリを見ることができます。