6

AngularJS の初心者で、構造化されたフォルダーからコントローラーやその他の js をロードする方法について質問がありますか?

たとえば、私は構造を持っています:

app/
-common
-users
--userController.js
--userService.js
-orders
-app.js

フォルダーユーザーからコントローラーとサービスをロードするにはどうすればよいですか?

もう 1 つ小さな質問があります。四角いブレースとは何ですか?

app.config(['someThing'], function($routeProvider)
4

2 に答える 2

7

好きな場所にコードを配置できます。それらをangularモジュールに入れると、angularはそれを見つけます。したがって、次の/app/common/services/foo.jsようなサービスがある場合:

angular.module('app').service('foo', function() { ... });

でこれを行うことができますuserController:

angular.module('app').controller('UserController', function($scope, foo) { ... });

fooここでは、コントローラーにどのように注入したかを示します。AngularDependency Injectionシステムは、コードをどこに置いても見つけられるほどスマートです。

とは異なるモジュールを作成することもappできます。

angular.module('other').service('bar', function() { ... });

appモジュールを定義する場所は、次のようになります。

angular.module('app', []);

そこに新しいモジュールを依存関係として追加する必要があるだけです。それ[]が目的です。

angular.module('app', ['other']);

これで、コントローラーでもサービスを使用できますbar:)

一方、あなたが話している構文は、次のような配列表記です。

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);

これは、コードを縮小するときにコードをマングルする場合に必要です。縮小されたコードでは、次のようなものが得られる可能性があるためです。

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);

ご覧のように、関数のパラメーターは現在fとgであり、Angular はこれらの名前に基づいて何を注入するかを認識していないため、指定した文字列を調べて、fis$scopeおよびgisであることを認識しfooます。

この注釈を直接使用する必要はありません。 ngminのように、それを行うツールがいくつかあります。

乾杯。

EDIT : すべての JavaScript ファイルを a に追加する必要があります<script>。そうしないと、ロードされず、Angular はそれを見つけられません。

ファイルを 1 つずつ追加するのは面倒です。5 つまたは 200 になる可能性があるからです。

それらを連結することをお勧めします。そのgrunt-concat-sourcemapためには、ソースマップが生成されるため、アプリ全体で 1 つのファイルが作成されますが、開発ツールではそれらが別々のファイルに表示されます。

javascript アプリを開発するための優れたツールである linemanjs を確認することをお勧めします。ファイルを連結し、ソース マップ、圧縮、配列表記なども...

于 2013-09-06T01:14:47.480 に答える
4

メインの HTML ページですべてのファイルをリンクし、それらが読み込まれていることを確認する必要があります。上記のドワイトが指摘したように。

別のアプローチは、Grunt.js などを使用してアプリを「ビルド」することです。これには、すべての controller.js ファイルを 1 つに結合することが含まれます。これを HTML ページにロードします。このようにして、すべてのファイルは開発用に分離されますが、展開用に作成されます。

于 2013-09-06T04:15:24.360 に答える