2013-09-06 3 views
5

AngularJSの新機能です。どのようにしてコントローラと他のjsを構造化フォルダからロードできますか?例えばAngularJSのローディングコントローラ

私は構造を持っている:私は、フォルダのユーザーからコントローラおよびサービスをロードする必要がありますどのように

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

もう少し小さな質問:squre bracertsを意味するものは何ですか?

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

答えて

3

... javascriptのアプリケーションを開発するための優れたツールであり、それはまたあなたのためのファイル、ソースマップ、縮小化、配列表記のものをCONCAT linemanjsをチェックすることをお勧めいたしますあなたのメインのHTMLページにあるファイルを読み込み、ロードされていることを確認してください。上記のDwightによって指摘された通り。

別の方法として、アプリを「ビルド」するためにGrunt.jsのようなものを使用する方法があります。これには、すべてのcontroller.jsファイルを1つにまとめてHTMLページにロードすることが含まれます。このようにして、すべてのファイルは開発のために分離されますが、展開のために組み合わされます。

+0

この問題を解決するためにグランツを使用する方法の詳細を提供してください。 –

6

あなたが望むところにあなたのコードを置くことができます。それらを角モジュールに入れると、角がそれを見つけます。あなたのよう/app/common/services/foo.jsでサービスを持っているのであれば:

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

あなたはuserControllerでこれを行うことができます。

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

をここでは、私たちのコントローラでfoo注入する方法を参照してください。角度のDependency 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) { ... }]); 

をご覧のとおり、関数のパラメータは現在fgで、アンgularはそれらの名前に基づいて何を注入すべきか分からないので、私たちが提供した文字列を調べるので、は、$scopegfooです。

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

乾杯。

EDIT:すべてのjavascriptファイルを<script>に追加する必要があります。そうしないと、読み込まれず、Angularは見つからないでしょう。grunt-concat-sourcemapそれはあなたのようsourcemapを生成しますので:あなたは5を持つことができるか、あなたはそれらをCONCATした方であり、そのために私はお勧め200

を持つことができるので、ファイルを一つずつ追加

は、痛みですアプリ全体に1つのファイルがありますが、開発ツールでは別々のファイルに表示されます。

私はあなたがすべてをリンクする必要があります

+2

私はあなたが他のモジュールの自動読み込みの意思を忘れてしまったと思います。はい、Angularは他のモジュールを読み込むことができますが、あなたのサーバ上でそれらを見つける場所はわかりません!ページ内のすべてのスクリプトファイルを '

  • 11. "Previous"/"Next"タブナビゲーションシステム(AngularJS/AngularJS Material)
  • 12. AngularJs Componentとangularjs-dropdown-multiselect
  • 13. angularjs
  • 14. AngularJS
  • 15. Angularjs -
  • 16. AngularJS
  • 17. AngularJS
  • 18. AngularJS
  • 19. AngularJS
  • 20. angularjs
  • 21. angularjs
  • 22. AngularJs
  • 23. - AngularJS
  • 24. AngularJS
  • 25. AngularJS)
  • 26. angularjs
  • 27. angularjs
  • 28. AngularJS
  • 29. AngularJS
  • 30. angularjs: