22

Dan Wahlinの素晴らしい記事のおかげで、Angular のコントローラーとサービスの遅延読み込みを実装することができました。ただし、独立したモジュールを遅延ロードするクリーンな方法はないようです。

私の質問をよりよく説明するために、アプリが RequireJS なしで以下のような構造になると仮定します。

// Create independent module 'dataServices' module with 'Pictures' object
angular.module("dataServices", []).factory("Pictures", function (...) {...});

// Create 'webapp' ng-app, with dependency to 'dataServices', defining controllers
angular.module("webapp", ['dataServices'])
.controller("View1Controller", function (...) {...})
.controller("View2Controller", function (...) {...});

Plunker で RequireJS を使用したサンプル アプリは次のとおりです:
http://plnkr.co/aiarzVpMJchYPjFRrkwn

ng-app問題の核心は、Angular がインスタンス化後の依存関係を追加できないことです。その結果、私の解決策は、 myで使用されるオブジェクトangular.injectorのインスタンスを取得するために使用することです。ファイルを参照してください。PictureView2Controllerjs/scripts/controllers/ctrl2.js

これにより、2つの問題が発生します。

  1. 注入されたサービスは角度の外部で実行されるため、すべての非同期呼び出しは $scope.$apply() で終了する必要があります
  2. 一部のオブジェクトは標準の角度構文を使用して注入でき、他のオブジェクトはインジェクターを明示的に使用する必要がある乱雑なコード。

RequireJS を使用して独立したモジュールを遅延ロードし、何らかの方法でこのモジュールを angular にフックして、通常の angular 依存性注入構文を使用できるようにする方法を理解した人はいますか?

注:質問は、独立したモジュール
の遅延読み込みに関するものです。この特定の例に対する簡単な解決策の 1 つは、キャッシュされた $providers を使用して "Pictures" オブジェクトを作成することですが、それは私が探しているものではありません。などのサードパーティ製モジュールで動作するソリューションを探しています。ng-app.configangular-resource

4

3 に答える 3

17

と呼ばれる独自の実装を完成させangularAMDました。これを使用するサンプル サイトは次のとおりです。

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

構成関数と順不同のモジュール定義を処理します。

これが、RequireJS と AngularJS の統合に役立つ何かを探している他の人に役立つことを願っています。

于 2013-10-09T21:36:02.917 に答える
10

GitHub で私のプロジェクトを見てください: angular-require-lazy

このプロジェクトは、アイデアを示し、議論を促進することを目的としています。しかし、それはあなたが望むことです（expensed-view.jsをチェックしてください、それはng-gridを遅延してロードします）。

私はコメント、アイデアなどに非常に興味があります。

(編集) ng-grid Angular モジュールは次のように遅延ロードされます。

  1. expenses-view.js/expensesルートがアクティブ化されると、遅延ロードされます
  2. expenses-view.js依存関係として ng-grid を指定しているため、RequireJs は最初に ng-grid をロードします
  3. ng-grid は呼び出すものですangular.module(...)

これを達成するために、私は実際のメソッドを遅延をサポートする独自のメソッドに置き換えました(実際にプロキシしました) 。bootstrap.jsとroute-config.js (関数と)angular.moduleを参照してください。initLazyModules()callRunBlocks()

この実装には、注意すべき欠点があります。

  1. 設定機能は (まだ) 実装されていません。構成時の依存関係を遅延して提供できるかどうかはわかりません。
  2. 定義では順序が重要です。サービス A が B に依存しているが、A がモジュール内の B の後に定義されている場合、DI は失敗します。これは、定義を実行する前に依存関係が解決されていることを確認する実際の Angular とは異なり、lazyAngular プロキシが定義をすぐに実行するためです。
于 2013-10-02T09:51:11.583 に答える
1

Node.jsモジュールocLazyLoadがこの遅延読み込みを行う方法を定義しているように見えますが、他の回答の方法や依存関係のハードコーディングと比較して、パフォーマンスがどのように機能するかはわかりません。これに関する情報をいただければ幸いです。興味深いことの 1 つは、他の回答は機能する必要があるのRequireJSに機能ocLazyLoadしないことです。

ocLazyLoad含まれているモジュールが既にインスタンス化された後に依存関係を注入する別のプロバイダーを定義しているようです。モジュールのロードや提供など、いくつかの低レベルの Angular 動作を本質的に複製することでこれを行っているように見えるため、なぜそれほど複雑に見えるのでしょう。ほぼすべてのコア Angular モジュールを依存関係として追加しているように見えます: $compileProvider、$q、$injector、ng、およびその他多数。

于 2014-09-28T03:41:29.353 に答える