Beebunny Beebunny - 3 months ago 41x
AngularJS Question

How to create separate AngularJS controller files?

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


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