質問: お世話になります。 AngularJSにて開発中ですが、サンプルなどにあるようなapp.jsファイル単体に controllerやservice,directiveを全て記述するのは可読性も悪く問題だと思ったため 各種サイトを参考にディレクトリを切り、機能ごとにファイルに書き出しました。 が、肝心のmodule読み込み方法がうまくいかないです。 下記に簡単にですがやりたいことのサンプルを載せます。 ``` // index.html (スクリプト読み込み部のみ) // app.js (function(){ 'use strict'; angular.module('myApp', ['controllers']); })(); // controller.js (function(){ 'use strict'; angular.module('controllers', [ 'controllers.main', 'controllers.page1', ]); })(); // main.controller.js (function(){ 'use strict'; angular.module('controllers.main', []) .controller('mainController', ['$scope', function($scope){...}] ); })(); // page1.controller.js (function(){ 'use strict'; angular.module('controllers.page1', []) .controller('page1Controller', ['$scope', function($scope){...}] ); })(); ``` このようなイメージです。 要は、controllersにcontrollers.main, controllers.page1として、増える毎に追加していき、controllers.jsファイル内で「controllers」moduleとして一括で登録したいのです。 serviceも同様に複数ファイルにまたがり作成したserviceファイルを一括にまとめて宣言したいです。 ・書き方が間違っている ・根本を理解してない などの指摘でも結構ですのでアドバイスいただけると助かります。 よろしくお願いします。
回答: angular.moduleの第二引数を指定した場合、新しいモジュールの登録になるのでコントローラーの追加はできません。 指定しない場合は作成済みのモジュールの取得になります。 シンプルに、以下のようにしてはいかがでしょうか。 ``` // app.js angular.module('myApp', []); // main.controller.js angular.module('myApp').controller('mainController', function($scope){・・・}); // page1.controller.js angular.module('myApp').controller('page1Controller', function($scope){・・・}); ``` angular.module('myApp', []); で「myApp」というモジュールを作成しています。 angular.module('myApp').controller・・・でmyAppモジュールにコントローラを追加しています。