web-dev-qa-db-ja.com

AngularJSはRequireJSのようなAMDをサポートしていますか？

このリポジトリ では、AngularJSはAMDのRequireJSで実装されています。

this repo では、AngularJSチームはAMDを使用してAngularJSプロジェクトをシードしますが、はシードしませんRequireJSをインクルードします。

  • 私はこれについて間違った方法で考えていますか？彼らはさまざまな問題を解決していますか？
  • AngularJSライブラリはAMDをサポートしますか？
  • AngularJSプロジェクトでRequireJSを使用する必要はなくなりましたか？
javascriptangularjsrequirejs
19
Dan Kanze

はい、角度付きでRequireJSを使用できます。含めたリンクのように、機能させるには少し余分な作業を行う必要がありますが、それは可能です。

ただし、一般的に、Angularを使用したAMDの必要性は見つかりませんでした。 AMDの全体的な考え方は、スクリプト間の依存関係を宣言的に指定でき、ページにスクリプトを含める順序を気にする必要がないということです。ただし、Angularは依存性注入メカニズムでそれを処理するため、AMDをその上に使用しても実際には何のメリットもありません。

tl; dr Angular.jsでAMDを使用する説得力のある理由は見つかりませんでした。

20
Nick Heiner

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 + '!';
      }
    });
});

「2番目の」AngularJSモジュールを作成するために「最初の」AngularJSモジュールをロードする必要があるRequireJSコールバックのコンテンツを実行する前に、注入される「firstModule」ファイルに依存していることがわかります。

補足：RequireJSコールバック関数内でAngularJSを使用するには、依存関係として「firstModule」ファイルと「secondModule」ファイルに「angular」を挿入する必要があり、「angular」をライブラリコードにマップするには、RequireJS構成で構成する必要があります。 RequireJSの利点は無効になりますが、従来の方法（スクリプトタグ）でAngularJSをページにロードすることもできます。

ブログ投稿で、2.0バージョンのAngularJSコアからRequireJSをサポートする方法の詳細をご覧ください。

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

27
leog

プロバイダーを使用してAngular.jsコンポーネントを遅延ロードできます。 記事 から：

プロバイダーは基本的に、AngularJSアーティファクトのインスタンスを作成および構成するために使用されるオブジェクトです。したがって、レイジーコントローラーを登録するには、$controllerProviderを使用します。 .。

要約すると、最初にアプリモジュールを定義して、関連するプロバイダーのインスタンスを保持します。次に、モジュールAPIではなくプロバイダーを使用して自分自身を登録するためのレイジーアーティファクトを定義します。次に、ルート定義でプロミスを返す「解決」関数を使用して、すべてのレイジーアーティファクトをロードし、ロードされたらプロミスを解決します。これにより、関連するルートがレンダリングされる前に、すべてのレイジーアーティファクトが利用可能になります。また、解決がAngularJSの外部で行われる場合は、$ rootScope。$ apply内でpromiseを解決することを忘れないでください。次に、アプリをブートストラップする前に、最初にアプリモジュールをロードする「ブートストラップ」スクリプトを作成します。最後に、「index.html」ファイルからbootstrapスクリプトにリンクします。

http://ify.io/lazy-loading-in-angularjs/

2
luk3thomas