Comment créer des fichiers de contrôleur AngularJS séparés?

J'ai tous mes contrôleurs AngularJS dans un seul fichier, controllers.js. Ce fichier est structuré comme suit:

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

Ce que j'aimerais faire, c'est mettre Ctrl1 et Ctrl2 dans des fichiers séparés. J'inclurais alors les deux fichiers dans mon index.html, mais comment cela devrait-il être structuré? J'ai essayé de faire quelque chose comme ça et cela lance une erreur dans la console du navigateur Web disant qu'il ne peut pas trouver mes contrôleurs. Des indices?

J'ai recherché StackOverflow et trouvé cette question similaire - cependant, cette syntaxe utilise un framework différent (CoffeeScript) au-dessus d'Angular, et donc je n'ai pas pu suivre.

AngularJS: Comment créer des contrôleurs dans plusieurs fichiers

Fichier un:

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

Fichier deux:

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

}]);

Fichier trois:

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

}]);

Inclure dans cet ordre. Je recommande 3 fichiers afin que la déclaration du module soit indépendante.

Quant à la structure des dossiers, il y a beaucoup, beaucoup d'opinions sur le sujet, mais ces deux-là sont plutôt bons

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

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

L'utilisation de l'API angular.module avec un tableau à la fin indiquera à angular de créer un nouveau module:

myApp.js

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

L'utiliser sans le tableau est en fait une fonction getter. Donc pour séparer vos contrôleurs, vous pouvez faire:

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

Pendant vos importations javascript, assurez-vous juste que myApp.js est après AngularJS mais avant tous les contrôleurs / services / etc ... sinon angular ne pourra pas initialiser vos contrôleurs.

Bien que les deux réponses soient techniquement correctes, je veux introduire un choix de syntaxe différent pour cette réponse. Cet imho facilite la lecture de ce qui se passe avec l'injection, la distinction entre etc.

File One

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

Fichier deux

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

Fichier trois

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

Et cette solution? Modules et contrôleurs dans les fichiers (à la fin de la page) Il fonctionne avec plusieurs contrôleurs, directives et ainsi de suite:

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 a également une recommandation de meilleures pratiques pour la structure des applications angulaires que j'aime vraiment regrouper par contexte. Pas tous les html dans un dossier, mais par exemple tous les fichiers de connexion (html, css, app.js, controller.js et ainsi de suite). Donc, si je travaille sur un module, toutes les directives sont plus faciles à trouver.

Par souci de concision, voici un exemple ES2015 qui ne repose pas sur des 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)

Pas si gracieux, mais la solution d'implémentation très simple - utilisant une variable globale.

Dans le "premier" fichier:

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

dans le "deuxième", "troisième", etc:

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