How to create separate AngularJS controller files?
angularjs, controller, javascript
Solution
File one:
angular.module('myApp.controllers', []);
File two:
angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){
}]);
File three:
angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){
}]);
Include in that order. I recommend 3 files so the module declaration is on its own.
As for folder structure there are many many many opinions on the subject, but these two are pretty good
https://github.com/angular/angular-seed
http://briantford.com/blog/huuuuuge-angular-apps.html
Problem
I have all of my AngularJS controllers in one file, controllers.js. This file is structured as follows: ``` angular.module('myApp.controllers', []) .controller('Ctrl1', ['$scope', '$http', function($scope, $http) { }]) .controller('Ctrl2', ['$scope', '$http', function($scope, $http) } }]) ``` What I'd like to do is put Ctrl1 and Ctrl2 into separate files. I would then include both files in my index.html, but how should that be structured? I tried doing some thing like this and it throws an error in the web browser console saying it can't find my controllers. Any hints? I searched StackOverflow and found this similar question - however, this syntax is using a different framework (CoffeeScript) on top of Angular, and so I haven't been able to follow. AngularJS: How do I create controllers in multiple files