お世話になります。
AngularJSにて開発中ですが、サンプルなどにあるようなapp.jsファイル単体に
controllerやservice,directiveを全て記述するのは可読性も悪く問題だと思ったため
各種サイトを参考にディレクトリを切り、機能ごとにファイルに書き出しました。
が、肝心のmodule読み込み方法がうまくいかないです。
下記に簡単にですがやりたいことのサンプルを載せます。
// index.html (スクリプト読み込み部のみ)
<script src="js/controllers/main.controller.js"></script>
<script src="js/controllers/page1.controller.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
// 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ファイルを一括にまとめて宣言したいです。
・書き方が間違っている
・根本を理解してない
などの指摘でも結構ですのでアドバイスいただけると助かります。
よろしくお願いします。