6

私はangularjsアプリを作成しており、1つのJSファイルに配置した多数のコントローラーを持っています。もう少しモジュール化して、コントローラーを独自のファイルに分離することを望んでいました。

RequireJS を考えましたが、これは推奨される方法ですか? それともangularjsはそれが説明されている場所について何か他の手がかりを提供しますか?

また、これらのファイルをすべて持つことはデバッグに最適ですが、製品ビルドが必要になると、angularJS は何らかのモジュールを 1 つのファイルにマージして結果を最小限に抑えますか?

誰かがそれについて最善の方法を説明できるなら、それは非常に役に立ちます。

ありがとう

4

4 に答える 4

12

Angular 依存性注入は非常に優れているため、小さなモジュールをたくさん作成する必要があります。

ファイルの編成に関しては、小さなファイル (モジュールごとに 1 つ) をたくさん持つ方が簡単ですが、その場合、あなたが話している問題に直面します: これらすべてのファイルをどうすればよいでしょうか? それらをすべてロードするにはどうすればよいですか？

Brian Ford のブログとこの Github リポジトリの2 つの情報源を参照することをお勧めします。ワークフローを改善し、Angular モジュールをよりよく理解/使用するのに大いに役立ちました。

TL;DR

私が自分のプロジェクトで行っていることは、Gruntを使用してすべての js ファイルを連結 (必要に応じて縮小) することです (さらに、cssコンパイル、アセット管理、javascript テンプレートのコンパイルを減らします)。
上記の Github リポジトリに良い例が示されています。

AngularJS で RequireJS を使用することはお勧めしません。確かに可能ですが、実際に RequireJS が有益だった例は見たことがありません。【ブライアン・フォード】

ファイル編成

私のアプリフォルダーは次のようになります。

www
|-dist/         = Created by Grunt. Generated files (served by my web server).
|-node_modules/ = node modules (ie. Grunt modules. Grunt is based on NodeJS)
|-src/          = My workspace
|-test/         = Some tests
|-vendor        = External libraries (AngularJS, JQuery, Bootstrap, D3, ... Whatever you need)
|-gruntFile.js  = The Grunt configuration file: contains all the jobs for Grunt.
|-package.json  = App infos + dependencies (Grunt modules) I use (concat, uglify, jshint, ...)

したがって、私が作業しているすべての異なるファイルはsrc、次のようなフォルダーにあります。

www/src
|-app              = Folder for my controllers
| |-Controller1.js
| |-Controller2.js
| |-...
|-assets           = Folder for the static assets (img, css, ...)
| |-img/
| |-css/
| |-favicon.ico
|-common           = Folder for the shared modules (directives, resources, services, ...)
| |-directives
| | |-chart.js
| | |-map.js
| | |-...
| |-resources
| | |-users.js
| | |-another-cool-resource.js
| | |-...
| |-services
| | |-service1.js
| | |-...
|-views            = Folder for my templates
| |-profile.tpl.html
| |-search.tpl.html
| |-...
|-index.html       = The main and unique html file.

うなり声

dist次に、Grunt を使用してすべてをフォルダーに「コンパイル」します。
の例はここgruntFileにあります。私には、展開のための 1 回限りの仕事と、開発のためのウォッチャーがいます。

もっと説明が必要ですか？

于 2013-03-28T12:13:44.950 に答える
3

Angular では、コントローラーに挿入できるモジュールを定義できます。こちらを参照してください。

http://docs.angularjs.org/api/angular.module

これらのモジュールは、次のように注入できる他のモジュールに依存できます。

app.factory('module2', ['module1', function (module1) {
   var functions = {
       myModule2Function: function (variable) {
          return  module1.testfunction(variable);
       }
   }
    return functions;
}]);

次にコントローラーで：

function MyController($scope, module2) { 
      $scope.aControllerFunction = function (variable) {
         return module2.myModule2Function(variable);
     }

}
于 2013-03-12T11:04:58.237 に答える
2

オンデマンドでモジュールをロードすることは、たとえば取引アプリケーションのような非常に巨大なアプリケーションに必要なものです。これは、少なくとも 3G 接続でアプリ全体をロードしたくないモバイル デバイスで動作を処理するスマートな方法だと思います。そのような場合、RequireJS が最適です。

于 2013-04-23T23:16:43.243 に答える
0

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-03-04T04:06:16.143 に答える