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

Question

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

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

Ce que je voudrais faire est de mettre Ctrl1 et Ctrl2 dans des fichiers séparés. Je voudrais l'inclure à la fois les fichiers dans mon index.html mais comment devrait-il être structuré? J'ai essayé de faire quelque chose comme ça et il déclenche une erreur dans le navigateur web de la console en disant qu'il ne trouve pas mes contrôleurs. Tous les conseils?

J'ai cherché sur StackOverflow et trouvé cette question similaire, - toutefois, cette syntaxe à l'aide d'un cadre de référence différent (CoffeeScript) sur le dessus de Coudé, et donc je n'ai pas été en mesure de suivre.

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

Answer 1

Fichier:

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

Fichier deux:

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

}]);

Fichier de trois:

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

}]);

Inclure dans cet ordre. Je vous recommandons de 3 fichiers de sorte que le module de déclaration sur ses propres.

---

Comme pour la structure de dossier il y a beaucoup beaucoup beaucoup de opinions sur le sujet, mais ces deux sont très bonnes

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

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

Answer 2

À l'aide de l'angle.module API avec un tableau à la fin dira angulaire pour 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 get. Donc, pour séparer vos contrôleurs, vous pouvez le 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 votre javascript importations, assurez-vous juste myApp.js est après AngularJS, mais avant tout contrôleurs / services / etc...sinon angulaire de ne pas être capable d'initialiser vos contrôleurs.