¿Cómo crear archivos de controlador AngularJS separados?

Tengo todos mis controladores AngularJS en un archivo, controllers.js. Este archivo está estructurado de la siguiente manera:

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

Lo que me gustaría hacer es poner Ctrl1 y Ctrl2 en archivos separados. Luego incluiría ambos archivos en mi index.html, pero ¿cómo debería estructurarse? Intenté hacer algo como esto y arroja un error en la consola del navegador web que dice que no puede encontrar mis controladores. ¿Alguna pista?

Busqué en StackOverflow y encontré esta pregunta similar; sin embargo, esta sintaxis está usando un marco diferente (CoffeeScript) además de Angular, por lo que no he podido seguirla.

AngularJS: ¿Cómo creo controladores en varios archivos?

Archivo uno:

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

Archivo dos:

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

}]);

Archivo tres:

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

}]);

Incluir en ese orden. Recomiendo 3 archivos para que la declaración del módulo sea independiente.

En cuanto a la estructura de carpetas, hay muchas, muchas opiniones sobre el tema, pero estas dos son bastante buenas.

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

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

El uso de la API angular.module con una matriz al final le indicará a angular que cree un nuevo módulo:

myApp.js

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

Usarlo sin la matriz es en realidad una función getter. Entonces, para separar sus controladores, puede hacer:

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) {}]);

Durante las importaciones de JavaScript, solo asegúrese de que myApp.js esté detrás de AngularJS pero antes de cualquier controlador / servicios / etc ... de lo contrario, angular no podrá inicializar sus controladores.

Aunque ambas respuestas son técnicamente correctas, quiero presentar una opción de sintaxis diferente para esta respuesta. Esta información facilita la lectura de lo que sucede con la inyección, la diferencia entre etc.

Archivo uno

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

Archivo dos

// 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
}

Archivo tres

// 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
}

¿Qué hay de esta solución? Módulos y controladores en archivos (al final de la página) Funciona con múltiples controladores, directivas, etc.

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 también tiene recomendaciones de mejores prácticas para la estructura angular de aplicaciones . Realmente me gusta agrupar por contexto. No todos los html en una carpeta, pero por ejemplo todos los archivos para iniciar sesión (html, css, app.js, controller.js, etc.). Entonces, si trabajo en un módulo, todas las directivas son más fáciles de encontrar.

Por brevedad, aquí hay una muestra de ES2015 que no se basa en variables globales

// 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)

No es tan elegante, pero es una solución de implementación muy simple: el uso de variables globales.

En el "primer" archivo:

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

en el "segundo", "tercero", etc.

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