19

このレポでは、AngularJS は AMD 用の RequireJS で実装されています。

このレポでは、AngularJS チームが RequireJS を含まないAMD で AngularJS プロジェクトをシードします。

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

3 に答える 3

27

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-10T19:06:00.787 に答える
2

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

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

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

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

于 2014-04-09T16:04:30.470 に答える