449

私は Angular.js の初心者で、Backbone.js との違いを理解しようとしています... Backbone を使用している間、パッケージの依存関係を Require.js で管理していました。Angular.js で同じことをするのは理にかなっていますか?

4

14 に答える 14

224

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

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

于 2012-09-21T12:54:07.840 に答える
150

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

主に Angular 1.x でアプリケーションを構築し、(暗黙的に) Grunt/Gulp/Broccoli および Bower/NPM の時代に構築している場合、追加のライブラリ依存関係がいくつかある可能性があります。 RequireなしでAngularを使用することで得られる以上の価値はありますか?

または、別の言い方をすれば:

「基本的なスクリプトの読み込みを処理する他の方法がある場合、バニラの Angular は基本的な Angular コンポーネントの読み込みを効果的に管理するために Require が必要ですか? 」

そして、それに対する基本的な答えは、「何か他のことが起こっている場合や、より新しい最新のツールを使用できない場合を除き、そうではありません」だと思います。

最初にはっきりさせておきます。RequireJS は、いくつかの非常に重要な問題を解決した優れたツールであり、よりスケーラブルでよりプロフェッショナルな Javascript アプリケーションに向けて、私たちの進む道を切り開いてくれました。重要なことは、多くの人がモジュール化の概念やグローバルな範囲から抜け出すという概念に初めて遭遇したことです。したがって、スケーリングが必要な Javascript アプリケーションを作成する場合、Require と AMD パターンは、そのための悪いツールではありません。

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

Angular チーム自体からのいくつかの視点については、Angular Batarang の作成者であり、現在は Angular コア チームのメンバーである Brian Ford の次のようなものがあります。

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

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

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

Bower と NPM、特に NPM をチェックすることをお勧めします。私は、これらのツールの相対的な利点について聖戦を始めようとしているわけではありません。私が言いたいのは、その猫の皮をむく方法は他にもあり、それらの方法はAMD/Require よりも優れている可能性があるということです。(2015 年後半には、特に NPM が ES6 または CommonJS モジュールと組み合わされて、確実に人気が高まっています。関連する SO の質問を参照してください。)

遅延読み込みはどうですか？

遅延読み込みと遅延ダウンロードは異なることに注意してください。Angular の遅延読み込みは、サーバーから直接プルしているという意味ではありません。JavaScript オートメーションを使用した Yeoman スタイルのアプリケーションでは、シバン全体を連結して 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 シーンに対応するために、繰り返し更新されます。)

于 2013-09-04T13:56:57.503 に答える
136

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

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

出典：Angular JS公式サイト

于 2013-03-27T17:10:41.247 に答える
57

これは主観的な質問だと思いますので、主観的な意見を述べさせていただきます。

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

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

その後

app.directive(...);

app.controller(...);

app.service(...);

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

何かのようなもの ：

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

Angular は、スクリプト ファイルではなく、これらのモジュールを (メモリに) 遅延ロードします。

スクリプト ファイルの遅延読み込みに関しては、率直に言って、非常に大きなものを記述していない限り、それはやり過ぎです。なぜなら、angular はその性質上、記述するコードの量を減らすからです。他のほとんどのフレームワークで作成された典型的なアプリは、angular で作成された場合、LOC で約 30 ～ 50% の削減が期待できます。

于 2012-09-21T14:51:41.633 に答える
33

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 が役立ちます。

「最初の」AngularJS モジュールと「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 モジュールを作成するために「最初の」AngularJS モジュールをロードする必要がある RequireJS コールバックのコンテンツが実行される前に、「最初のモジュール」ファイルが挿入されることに依存していることがわかります。

補足: RequireJS コールバック関数内で AngularJS を使用するには、"firstModule" および "secondModule" ファイルに "angular" を依存関係として挿入する必要があり、"angular" をライブラリ コードにマップするように RequireJS 構成で構成する必要があります。RequireJS の利点は失われますが、従来の方法 (script タグ) で AngularJS をページにロードすることもできます。

2.0 バージョンからの AngularJS コアからの RequireJS サポートの詳細については、私のブログ投稿を参照してください。

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

于 2014-01-06T16:11:07.080 に答える
21

@ganaraj が述べたように、AngularJS のコアには依存性注入があります。RequireJS を使用して、または使用せずにトイ シード アプリケーションを構築したとき、個人的には、ほとんどのユース ケースで RequireJS はおそらく過剰であることがわかりました。

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

于 2012-09-22T12:11:04.290 に答える
12

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

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

于 2014-01-21T16:54:40.833 に答える
7

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

于 2013-05-28T09:46:26.957 に答える
2

私が使用するアプローチは次のとおりです。

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

于 2014-02-26T18:12:14.533 に答える
1

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

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

参照: https://github.com/yeoman/generator-angular/issues/40

于 2014-06-30T02:17:24.430 に答える