2

お世話になります。

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ファイルを一括にまとめて宣言したいです。

・書き方が間違っている
・根本を理解してない

などの指摘でも結構ですのでアドバイスいただけると助かります。
よろしくお願いします。

2 件の回答 2

2

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モジュールにコントローラを追加しています。

1
  • 回答ありがとうございます。 モジュールの趣旨を勘違いしておりました。 提示頂いたmyAppに対して追加していくということで問題なさそうですので、どこか1つのコントローラーにまとめるといったことはせず、各ファイルごとに作成されたmyAppモジュールに対して追加していく方式にしてみます。 Commented 2015年2月12日 9:18
0

こんにちは。スタックオーバーフロー1日目のはっしぃです。

ご参考になるかどうか分かりませんが、1例として解答します。

私もAngularJS初心者ですが、以下のようにしてコントローラーやサービスをファイルに分割し、モジュールへの登録を行っています。
私の場合は、モジュールを細かく分けるのではなく、1つのモジュールにコントローラーとかサービスを全て登録する方法ですので、Ishiyamaさんのように細かくモジュール分割はしていませんが・・・。

// index.html
<script src="js/app.js"></script>
<script src="js/controllers.js" ></script>

// controllers.js
document.write('<script type="text/javascript" src="js/controllers/foo.controller.js"></script>'); 
document.write('<script type="text/javascript" src="js/controllers/bar.controller.js"></script>'); 

以上です。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。