Como criar arquivos separados do controlador AngularJS?

Eu tenho todos os meus controladores AngularJS em um arquivo, controllers.js. Este arquivo está estruturado da seguinte maneira:

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

O que eu gostaria de fazer é colocar Ctrl1 e Ctrl2 em arquivos separados. Eu incluiria os dois arquivos no meu index.html, mas como isso deve ser estruturado? Tentei fazer algo assim e ele gera um erro no console do navegador dizendo que não consegue encontrar meus controladores. Alguma dica?

Pesquisei no StackOverflow e encontrei essa pergunta semelhante - no entanto, essa sintaxe está usando uma estrutura diferente (CoffeeScript) no topo do Angular, e por isso não consegui segui-lo.

AngularJS: Como criar controladores em vários arquivos

Arquivo um:

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

Arquivo dois:

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

}]);

Arquivo três:

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

}]);

Incluir nessa ordem. Eu recomendo 3 arquivos para que a declaração do módulo seja por si só.

Quanto à estrutura de pastas, existem muitas opiniões sobre o assunto, mas essas duas são muito boas

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

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

O uso da API angular.module com uma matriz no final indicará ao angular para criar um novo módulo:

myApp.js

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

Usá-lo sem a matriz é na verdade uma função getter. Portanto, para separar seus controladores, você pode:

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 as importações de javascript, verifique se o myApp.js está atrás do AngularJS, mas antes de qualquer controlador / serviço / etc ... caso contrário, o angular não poderá inicializar seus controladores.

Embora ambas as respostas sejam tecnicamente corretas, quero apresentar uma opção de sintaxe diferente para esta resposta. Esse imho facilita a leitura do que está acontecendo com a injeção, a diferenciação entre etc.

Arquivo Um

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

Arquivo dois

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

Arquivo três

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

E essa solução? Módulos e controladores em arquivos (no final da página) Funciona com vários controladores, diretivas e assim por diante:

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">

O Google também possui recomendações de práticas recomendadas para a estrutura angular de aplicativos que eu realmente gosto de agrupar por contexto. Nem todo o html em uma pasta, mas, por exemplo, todos os arquivos para login (html, css, app.js, controller.js e assim por diante). Portanto, se eu trabalhar em um módulo, todas as diretivas serão mais fáceis de encontrar.

Para resumir, aqui está uma amostra do ES2015 que não depende de variáveis ​​globais

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

Não é tão elegante, mas muito simples na solução de implementação - usando variável global.

No "primeiro" arquivo:

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

no "segundo", "terceiro", etc:

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