7

私は最近、CommonJS 対 AMD の戦いを少し掘り下げていて、これが私の発見です... (ところで、私はここで説教しているわけではありません。建設的な洞察を得るための考えを共有しています...) RequireJS は、私のAngularモジュール、それはモジュール内のモジュールラップであるため、私には間違っていると感じています... Browserifyの方法はよりクリーンですが、すべてのもので正しく機能するには、すべての依存関係と依存関係を正しく実装する必要があります。残念ながら、私たちは完璧な世界に住んでいるわけではありません...したがって、シムされたLibの内部依存関係をシムしてシムする必要があります...私は余分な複雑さの大ファンではありません...

私が現在行っている方法 (そして、すべての建設的な批判の対象となります...)

BreezeJS、$、Q、Ladda などのライブラリがグローバル スコープでリークします。次に、これらのグローバルに対してこの型モジュールを宣言します。

module.value('gLadda', (function(){

    if("Ladda" in window && "Spinner" in window){
        return Ladda;
    }else{
        throw new Error("The Globals Ladda || Spinner are missing");
    }

})());

アプリで「Angularify」の依存関係を使用した後、チームでこの手法を使用したことがなく、これがいくつかの赤信号を発しているのかどうか、またその理由を説明してくれるかどうか疑問に思っています...時間。

4

1 に答える 1

1

機能要求から、追加の ng-modules の一部としてAMD ローダーを含める必要があります。

Angular には、ユーザーがモジュール定義を作成し、後で文字列識別子によってコントローラーなどのエンティティを検索できる機能が付属しています。Angular には、別のファイルに保存されたスクリプトをロードする機能がありません。つまり、次の 4 つのオプションが残されています。

  1. すべての JavaScript を 1 つのファイルに保存します。
  2. JavaScript を個別のファイルに分割し、各ファイルにスクリプト タグを追加します。
  3. スクリプト ファイルとその依存関係を管理するには、 requireJSなどの AMD ファイル ローダーを使用します。
  4. browserifyのようなプリコンパイラを使用して、nodejs スタイル ファイルを単一のスクリプト ファイルにマージします。

プロジェクトが大きくなるにつれて、ファイルのサイズだけでなく、モジュール間の依存関係がより複雑になるため、ファイルの管理が難しくなります。大規模なプロジェクトでは、AMD ローダーの遅延読み込みの恩恵を受けることもできます。

AMD モジュール ローダーには、このファイルを実行する前に必要な依存関係が一覧表示されます。問題は、AMD の依存関係が Angular で使用されるインジェクション リストに近いが、まったく同じではないことです。このコードには 1 つの問題が見られます。

define(['angular'], function(angular) {
  return angular.module('myApp.controllers', ['myApp.services'])
    .controller('MyController', ['$scope', 'myService',
      function($scope, myService) {
        $scope.data = myService.getData();
      }
    ])
};

上部の define ステートメントは、angularこの関数を実行する前に が初期化されていることを確認するように指示しています。このangular.moduleステートメントは、「$scope」と「myService」を検索し、それらを変数$scopeandに挿入するように指示していますmyService。問題は、AMD ローダーが を定義するファイルを初期化していない可能性があることです。このファイルではmyApp.servicesが定義されていると推測できます。これmyServiceは、上記の define ステートメントに表示されていないためです。これにより、インジェクション リストと AMD 依存関係リストの間に大きな断絶が生じます。「myApp.services; がロードされているため、「myApp.services」で使用可能な特定のコンポーネントを特定することも困難です。IOW 「myService」はロードされ、注入可能ですか?

現在、ルーティングを介してコントローラーを動的にロードする機能が必要なため、requirejs の形式でオプション #3 を使用しています (最初のリンクを参照)。また、私が取り組んでいるアプリケーションのサイズは、非常に多くのページがあるため、browserfy を実用的ではありません。ただし、これが最適ではないことに同意しますが、現時点では他に選択肢はありません。
実用的な観点から、ファイルごとに 1 つのインジェクタブルを定義します。また、すべての注入可能な配列が必要な配列と一致するようにします。これは必須ではありませんが、コードをより保守しやすくします。

これを書くのにこれらの記事が役に立ちました：

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

于 2014-01-02T22:17:54.427 に答える