Angular.jsでRequire.jsを使用することには意味がありますか？[閉まっている]

私はAngular.jsの初心者で、Backbone.jsとの違いを理解しようとしています... Backboneを使用しているときに、Require.jsでパッケージの依存関係を管理するために使用していました。Angular.jsで同じことをすることには意味がありますか？

はい、コンポーネントのモジュール化に使用できる場所angular.jsとともに使用することは理にかなっています。require.jsrequire.js

を使用するシードプロジェクトがありますboth angular.js and require.js。

OPの質問が実際に何であると私が思うことを言い換えると、

主にAngular 1.xでアプリケーションを構築していて、Grunt / Gulp / BroccoliとBower / NPMの時代に（暗黙的に）構築していて、追加のライブラリ依存関係がいくつかある場合、Requireは明確で特定のRequireなしでAngularを使用することで得られるものを超える価値

または、別の言い方をすると：

「基本的なスクリプトの読み込みを処理する他の方法がある場合、基本的なAngularコンポーネントの読み込みを効果的に管理する必要がありますか？」

そして、私はそれに対する基本的な答えは次のとおりであると信じています。

最初に明確にしましょう：RequireJSは、いくつかの非常に重要な問題を解決する優れたツールであり、よりスケーラブルでより専門的なJavascriptアプリケーションに向けて、私たちの道を歩み始めました。重要なのは、多くの人がモジュール化の概念に直面し、物事をグローバルスコープから外すことに初めて遭遇したことです。したがって、スケーリングが必要なJavascriptアプリケーションを構築する場合、RequireとAMDパターンは、そのための悪いツールではありません。

しかし、Require / AMDを特に適切にするAngularについて何か特別なことはありますか？いいえ。実際、Angularは独自のモジュール化とカプセル化パターンを提供します。これにより、多くの点でAMDの基本的なモジュール化機能が冗長化されます。そして、AngularモジュールをAMDパターンに統合することは不可能ではありませんが、少し難しいです。あなたは間違いなく2つのパターンをうまく統合するために時間を費やすでしょう。

Angularチーム自体からのいくつかの見方として、Angular Batarangの作者であり、現在はAngularコアチームのメンバーであるBrian Ford によるこれがあります。

AngularJSでRequireJSを使用することはお勧めしません。確かにそれは可能ですが、実際にRequireJSが有益である例は見たことがありません。

したがって、AngularJSの非常に具体的な質問については、AngularとRequire / AMDは直交しており、場所が重複しています。あなたはすることができますそれらを一緒に使用していますが、特に角度自体の性質/パターンに関連する理由はありません。

しかし、スケーラブルなJavascriptアプリケーションの内部および外部依存関係の基本的な管理についてはどうでしょうか。Requireは私にとって本当に重要なことをしませんか？

BowerとNPM、特にNPMをチェックすることをお勧めします。私はこれらのツールの比較メリットについての聖戦を始めようとしているのではありません。私はただ言いたいだけです。その猫の皮をむく方法は他にもあり、それらの方法は AMD / Requireよりも優れているかもしれません。（彼らは確かに2015年後半に特にESPMまたはCommonJSモジュールと組み合わせたNPMでより人気のある勢いを持っています。関連するSO質問を参照してください。）

遅延読み込みについてはどうですか？

遅延読み込みと遅延ダウンロードは異なることに注意してください。Angularの遅延読み込みは、サーバーから直接それらをプルしているという意味ではありません。JavaScript自動化を備えたヨーマンスタイルのアプリケーションでは、シバン全体を1つのファイルに連結および縮小しています。それらは存在しますが、必要になるまで実行/インスタンス化されません。これを実行することで得られる速度と帯域幅の改善は、特定の20ラインコントローラーの遅延ダウンロードによる改善の疑いをはるかに上回ります。実際、そのコントローラーの無駄なネットワーク遅延と伝送オーバーヘッドは、コントローラー自体のサイズよりも桁違いに大きくなります。

しかし、管理インターフェイスなど、アプリケーションの使用頻度の低い部分について、遅延ダウンロードが本当に必要であるとしましょう。これは非常に正当なケースです。Requireは実際にそれを行うことができます。しかし、そこにあるにも 多くの 他の、潜在的に 、より 柔軟 なオプションと同じことを達成します。そして、Angular 2.0は、ルーターに組み込まれているように見えます。（詳細）

しかし、私のローカル開発ボックスでの開発中はどうですか？

手動でindex.htmlに添付する必要なしに、数十/数百のスクリプトファイルをすべてロードするにはどうすればよいですか？

Yeomanのgenerator-angularのサブジェネレーター、またはgenerator- gulp -angularに組み込まれた自動化パターン、またはReactの標準Webpack自動化を見てください。これらは、クリーンでスケーラブルな方法を提供します。コンポーネントが足場を組まれたときにファイルを自動的に添付するか、特定のフォルダーに存在する場合、または特定のグロブパターンに一致する場合、それらをすべて自動的に取得します。後者のオプションを取得したら、自分のスクリプトの読み込みについて考える必要はもうありません。

ボトムライン？

Requireは、特定の目的のための優れたツールです。しかし、可能な限り細かいところまで行き、懸念は可能な限り分離してください。AngularがAngular自身のモジュール化パターンについて心配し、ES6モジュールまたはCommonJSを一般的なモジュール化パターンとして使用することを検討してください。最新の自動化ツールがスクリプトの読み込みと依存関係の管理について心配するようにします。また、非同期の遅延読み込みを他の2つの問題に巻き込むのではなく、きめ細かく処理してください。

とは言っても、Angularアプリを開発しているが、何らかの理由でマシンにNodeをインストールしてJavascript自動化ツールを使用できない場合は、Requireが優れた代替ソリューションになる可能性があります。そして、人々がそれぞれ独自の依存関係などを宣言するAngularコンポーネントを動的にロードしたいという非常に手の込んだ設定を見てきました。そして、私はおそらくその問題を別の方法で解決しようとすると思いますが、その非常に特殊な状況でのアイデアのメリットを見ることができます。

しかし、それ以外の場合...新しいAngularアプリケーションと、近代的な自動化環境を作成するための柔軟性をゼロから始める場合...他にも、より柔軟でより近代的なオプションがたくさんあります。

（進化するJSシーンに追いつくために繰り返し更新されます。）

はい、それは理にかなっています。

Angularモジュールは、スクリプトのロード順序や遅延スクリプトフェッチの問題を解決しようとはしていません。これらの目標は直交しており、両方のモジュールシステムが共存して目標を達成できます。

出典：Angular JS公式ウェブサイト

これは主観的な質問だと思うので、主観的な意見を述べます。

Angularにはモジュール化メカニズムが組み込まれています。アプリを作成するとき、最初にすることは

var app = angular.module("myApp");

その後

app.directive(...);

app.controller(...);

app.service(...);

angularのきちんとしたスターターアプリであるangular-seedを見ると、ディレクティブ、サービス、コントローラーなどが別々のモジュールに分離されており、それらのモジュールが依存関係としてメインアプリに読み込まれています。

何かのようなもの ：

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angularはまた、スクリプトファイルではなく、これらのモジュールを（メモリに）遅延読み込みします。

スクリプトファイルの遅延読み込みに関して言えば、極端に大きなものを書いていない限り率直に言って、角度がその性質上、書き込むコードの量を減らすため、やり過ぎです。他のほとんどのフレームワークで記述された典型的なアプリは、角度で記述された場合、LOCで約30-50％の削減を期待できます。

AngularJSでRequireJSを使用するのは理にかなっていますが、依存関係の注入に関してそれぞれがどのように機能するかを理解している場合にのみ、両方とも依存関係を注入するので、非常に異なるものが注入されます。

AngularJSには独自の依存関係システムがあり、実装を再利用するために、新しく作成したモジュールにAngularJSモジュールを挿入できます。AngularJSフィルター「greet」を実装する「最初の」モジュールを作成したとします。

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

そして、「さようなら」フィルターを実装する「second」と呼ばれる別のモジュールで「greet」フィルターを使用するとします。「最初の」モジュールを「2番目の」モジュールに注入することで実行できます。

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」ファイルに「angular」を注入する必要があり、「angular」をライブラリコードにマップするようにRequireJS構成で構成する必要があります。AngularJSを従来の方法（スクリプトタグ）でページにロードすることもできますが、RequireJSの利点はありません。

私のブログの投稿に、2.0バージョンのAngularJSコアからのRequireJSサポートの詳細があります。

私のブログ投稿「AngularJSでRequireJSを理解する」に基づいて、ここにリンクがあります。

@ganarajが述べたように、AngularJSはそのコアに依存性注入を持っています。RequireJSを使用して、または使用せずにおもちゃの種のアプリケーションを構築するとき、私はRequireJSがほとんどのユースケースでおそらくやり過ぎであることに個人的に気付きました。

だからといって、RequireJSがスクリプトの読み込み機能や開発中のコードベースをクリーンに保つのに役に立たないというわけではありません。r.jsオプティマイザ（組み合わせるhttps://github.com/jrburke/r.jsアーモンド（と）https://github.com/jrburke/almondは）非常にスリムなスクリプトローディング物語を作成することができます。ただし、その依存関係管理機能は、アプリケーションのコアの角度ではそれほど重要ではないため、他のクライアント側（HeadJS、LABjsなど）またはサーバー側（MVC4バンドラーなど）のスクリプトロードソリューションを評価することもできます。あなたの特定のアプリケーションのために。

はい、特に非常に大規模なSPAの場合はそうです。

一部のシナリオでは、RequireJSは必須です。たとえば、Google Map APIも使用するAngularJSを使用してPhoneGapアプリケーションを開発しています。RequireJSのようなAMDローダーがないと、Google Map APIスクリプトを調達できないため、オフラインでアプリを起動するとクラッシュします。AMDローダーは、ユーザーにエラーメッセージを表示する機会を与えてくれます。

ただし、AngularJSとRequireJSの統合は少し注意が必要です。これを苦痛の少ないプロセスにするために、angularAMDを作成しました。

http://marcoslin.github.io/angularAMD/

短い答えは、それは理にかなっています。最近これはng-conf 2014で議論されました。これはこのトピックに関する講演です：

http://www.youtube.com/watch?v=4yulGISBF8w

コントローラーやディレクティブの遅延読み込みを計画している場合は、angularjsでrequirejsを使用することは理にかなっています。同時に、複数の遅延依存関係を単一のスクリプトファイルに結合して、より高速の遅延読み込みを実現できます。RequireJSには、結合を簡単にする最適化ツールがあります。http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/を参照してください

はい、AngularでrequireJSを使用することは理にかなっています。私はいくつかの技術的なソリューションをテストするために数日を費やしました。

サーバー側でRequireJSを使用してAngular Seedを作成しました。とてもシンプルなものです。AMDモジュールではなく、AMDではなくSHIM表記を使用します。これは、2つの異なる依存性注入システムを処理することが非常に難しいためです。

サーバー上のjsファイルを連結するためにgruntとr.jsを使用していますが、SHIM構成（依存関係）ファイルに依存しています。私のアプリでは、jsファイルを1つだけ参照しています。

詳細については、私のgithub Angular Seedにアクセスしてください：https : //github.com/matohawk/angular-seed-requirejs

Require.jsの使用は避けます。これを行うアプリは、複数のタイプのモジュールパターンアーキテクチャの混乱を引き起こします。AMD、Reveiling、IIFEのさまざまなフレーバーなど。loadOnDemandAngular modのようにオンデマンドでロードする方法は他にもあります。他のものを追加すると、コードが一杯になり、信号対雑音比が低くなり、コードが読みにくくなります。

ここに私が使用するアプローチがあります：http : //thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

このページは、AngularJS + RequireJSの可能な実装を示しています。このコードは、機能とコンポーネントタイプによって分割されています。

ブライアン・フォードからの回答

AngularJSには独自のモジュールシステムがあり、通常はRJSのようなものは必要ありません。

リファレンス：https : //github.com/yeoman/generator-angular/issues/40

angularはかなりモジュール化されているので、プロジェクトの複雑さに依存すると思います。コントローラーをマップして、それらのJavaScriptクラスをindex.htmlページにインポートするだけです。

しかし、プロジェクトが大きくなる場合に備えて。または、そのようなシナリオを予期している場合は、angularをrequirejsと統合する必要があります。で、この記事で、あなたは、このような統合のためのデモアプリケーションを見ることができます。