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

6 Answers
6

Leave a Comment