6376


お世話になります。

AngularJSにて開発中ですが、サンプルなどにあるようなapp.jsファイル単体に  
controllerやservice,directiveを全て記述するのは可読性も悪く問題だと思ったため  
各種サイトを参考にディレクトリを切り、機能ごとにファイルに書き出しました。

が、肝心のmodule読み込み方法がうまくいかないです。  
下記に簡単にですがやりたいことのサンプルを載せます。

[code]

    // 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){...}]
      );
    })();
    
[/code]

このようなイメージです。  
要は、controllersにcontrollers.main,
controllers.page1として、増える毎に追加していき、controllers.jsファイル内で「controllers」moduleとして一括で登録したいのです。  
serviceも同様に複数ファイルにまたがり作成したserviceファイルを一括にまとめて宣言したいです。

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

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


CC BY-SA 3.0
2015-02-12T08:01:41.833
6371
2015-02-12T09:05:32.717
7852
question
javascript angularjs
AngularJSでのコントローラー、サービス定義のファイル分割について


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

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

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

[code]

    // 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>'); 
    
[/code]

以上です。


CC BY-SA 3.0
2015-02-12T08:37:06.850
6374
2015-02-12T08:37:06.850
8232
6371
answer


angular.moduleの第二引数を指定した場合、新しいモジュールの登録になるのでコントローラーの追加はできません。

指定しない場合は作成済みのモジュールの取得になります。

シンプルに、以下のようにしてはいかがでしょうか。

[code]

    // 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){・・・});
    
[/code]

angular.module('myApp', []); で「myApp」というモジュールを作成しています。

angular.module('myApp').controller・・・でmyAppモジュールにコントローラを追加しています。


CC BY-SA 3.0
2015-02-12T08:49:31.753
6376
2015-02-12T09:05:32.717
2015-02-12T09:05:32.717
2232
2232
6371
answer