Beebunny Beebunny - 1 year ago 166
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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download