Brent Aureli
Brent Aureli

Reputation: 473

Separating Controllers in AngularJS

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!

Upvotes: 1

Views: 217

Answers (2)

Alex
Alex

Reputation: 4934

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.

Upvotes: 2

Michael Kang
Michael Kang

Reputation: 52867

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

Upvotes: 1

Related Questions