1. ホーム
  2. ジャバスクリプト

[解決済み】AngularJSのコントローラファイルを別々に作成する方法は?

2022-03-27 06:50:56

質問

AngularJSのすべてのコントローラをcontrollers.jsという1つのファイルにまとめています。 このファイルは以下のような構造になっています。

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

Ctrl1とCtrl2を別々のファイルにしたいのですが、どうすればいいですか? そして、両方のファイルをindex.htmlにインクルードしたいのですが、どのように構成すればよいのでしょうか? このようなことをやってみたのですが、ウェブブラウザのコンソールで、コントローラが見つからないというエラーが投げられました。 何かヒントがあれば教えてください。

StackOverflowで検索したところ、同様の質問を見つけました。しかし、この構文はAngularの上に別のフレームワーク(CoffeeScript)を使用しているため、フォローすることができませんでした。


AngularJS:複数のファイルでコントローラを作成する方法

どのように解決するのですか?

ファイル1

angular.module('myApp.controllers', []);

ファイル2

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

ファイル3

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

この順番でインクルードします。モジュール宣言が独立したものになるように、3つのファイルを推奨します。


フォルダ構造については、多くの意見がありますが、以下の2つが良いと思います。

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html