Separating Controllers in AngularJS

Question

Im trying to separate my Angular controllers into different files. Right now each one appears like this.

AddPropertyController.js

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

SearchController

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

Now for each one of these I had to include them in the Angular myApp. via:

angular.module('myApp', [
        'myApp.controllers.search',
        'myApp.controllers.addproperty'
    ])

my question is, is there a way to just include them all at once instead of adding them individually? My first attempt was to name each module the same, angular.module('myApp.controllers',...) then just include myApp.controllers in the App. But that didn't seem to work... I guess Im asking is what is the best way to have separated controller files but in all in one module. Thanks for the help!

Answer 1

Check out the angularjs docs for info on controllers and adding them to app level modules...

For example for your code:

var myApp = angular.module('myApp',[]);

myApp.controller('SearchController', ['$scope', function($scope) {
  $scope.search = 'Hola!';
}]);

myApp.controller('AddPropertiesController', ['$scope', function($scope) {
  $scope.props = [];
}]);

You're basically attaching each controller to the myApp instance, so the app is aware of the controllers.

Answer 2

I would organize them like this:

MyController1.js

  var MyController1 = ['$scope', function($scope) {

  }];

MyController2.js

  var MyController2 = ['$scope', function($scope) {
  }];

MyModule.js

  var app = angular.module('MyModule',[]);
  app.controller({
      MyController1: MyController1,
      MyController2: MyController2,
      etc
  });

This is the similar to how the Angular source code is itself organized:

1. AngularPublic.js
2. ng Directives