How to create separate AngularJS controller files?

Question

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 something 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.

Answer 1

To create separate AngularJS controller files you can use the following ways:-

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

Looking for Angularjs material from basics! Refer to this video on Angularjs provided by Intellipaat:

Or 

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

Interested in getting into web development by learning Angular? Then check out the Angular Certification Training from Intellipaat, 24hrs online course with 48hrs for projects and exercises to gain proficiency in it.