個別のAngularJSコントローラーファイルを作成するには？

AngularJSコントローラーをすべて1つのファイル（controllers.js）に格納しています。このファイルは次のように構成されています。

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

私がやりたいことは、Ctrl1とCtrl2を別々のファイルに入れることです。次に、両方のファイルをindex.htmlに含めますが、どのように構成する必要がありますか？私はこのようなことを試してみましたが、コントローラーが見つからないというエラーがWebブラウザーコンソールにスローされます。ヒントはありますか？

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

angular.module API を最後に配列とともに使用すると、 angularに新しいモジュールを作成するように指示します。

myApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

配列なしで使用すると、実際にはゲッター関数になります。コントローラーを分離するには、次のようにします。

Ctrl1.js

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js

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

JavaScriptのインポート中は、myApp.jsがAngularJSの後、コントローラー/サービスなどの前にあることを確認してください。そうしないと、angularはコントローラーを初期化できません。

どちらの回答も技術的には正しいですが、この回答には別の構文の選択肢を紹介したいと思います。このimhoにより、注入で何が起こっているかを読みやすくしたり、区別したりできます。

ファイル1

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

ファイル2

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

ファイル3

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}

このソリューションはどうですか？ファイル内のモジュールとコントローラー（ページの最後）複数のコントローラー、ディレクティブなどで動作します。

app.js

var app = angular.module("myApp", ['deps']);

myCtrl.js

app.controller("myCtrl", function($scope) { ..});

html

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

Googleには、 私が本当にコンテキストごとにグループ化したいAngular App Structureのベストプラクティスの推奨事項もあります。1つのフォルダー内のすべてのhtmlではなく、たとえばログイン用のすべてのファイル（html、css、app.js、controller.jsなど）。したがって、モジュールで作業すると、すべてのディレクティブが見つけやすくなります。

簡潔にするために、グローバル変数に依存しないES2015サンプルを次に示します

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)

それほど優雅ではありませんが、実装変数は非常に単純です-グローバル変数を使用します。

「最初の」ファイルで：

window.myApp = angular.module("myApp", [])
....

「second」、「third」など：

myApp.controller('MyController', function($scope) {
    .... 
    });