How to separate Controller file in angularjs

Question

I have looked at various examples of separating the files. I can understand them but the problem comes with the way my code is. I want separate these controllers in different files.

'use strict';
angular.module('myModule', ['ui.bootstrap']);
var myApp = angular.module('myApp', []);

myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

myApp.config(['$routeProvider',

function ($routeProvider) {
$routeProvider.when('/getplaces', {
    templateUrl: 'templates/getplaces.html',
    controller: 'ListCtrl'
})

The below controller needs to be in a different file.

///////////// MONTHLY DATA /////////////////////////////////////

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/getmonth', {
    templateUrl: 'templates/getmacs.html',
    controller: 'MonthlyCtrl'
})
}])
.controller('MonthlyCtrl', function ($scope, $http) {  $scope.visible = true; 
})

I have more than 20 controllers like above. but how do I separate them.

Yasser Shaikh · Accepted Answer · 2014-08-08 13:59:45Z

4

Here is how you should do it,

first declaration

angular.module('appName', ['Module1', 'Module2', 'Service1']);

subsequent declarations

here all the controllers and service can be in separate files.

angular
    .module('Module1', [])
    .controller('AbcController', ['$scope', '$timeout', 'Service1', function ($scope, $timeout, service1) {} ]);

angular
    .module('Module2', [])
    .controller('EfgController', ['$scope', '$timeout', 'Service1', function ($scope, $timeout, service1) {} ]);

angular.module('Service1', [])
  .service('XYZService', ['$http', function LmnoService($http) {

  } ]);

edited Aug 8, 2014 at 13:59

answered Aug 8, 2014 at 12:51

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mik378 Over a year ago

Why redundant declaration of Module1 ? It would be nicer to do: angular.module('Module1', []).controller(...).controller(...), in chain since each item returns the module.

tuxedo25 Over a year ago

@Mik378 I think it's a typo and the second block is supposed to declare Module2.

Mik378 Over a year ago

@tuxedo25 Indeed, it's possible.

Yasser Shaikh Over a year ago

Yes sorry my bad it was a typo. Different declaration i had written so that you could place different controllers in different file.

acg · Accepted Answer · 2014-08-08 12:43:40Z

1

This should easily be done, I would organize my application route configurations into the main app.js file.

myApp.config(['$routeProvider',

    function ($routeProvider) {
    $routeProvider.when('/getplaces', {
        templateUrl: 'templates/getplaces.html',
        controller: 'ListCtrl'
    }).when('/getmonth', {
        templateUrl: 'templates/getmacs.html',
        controller: 'MonthlyCtrl'
    })
}])

Then when you create a separate controller in each file just reference the application name as such:

myApp.controller('MonthlyCtrl', ['$scope', '$http', function ($scope, $http) {  
    $scope.visible = true; 
}])

You will also notice I am using the array initializer way, this will save you some hastles when you are doing minification.

answered Aug 8, 2014 at 12:43

acg

9615 silver badges11 bronze badges

2 Comments

butYouDontLookLikeADeveloper Over a year ago

Okay, I have controllers following that montly controller with .controller, do I need to have them in an array too?

acg Over a year ago

No, the array syntax is just for the initialization of that one controller, it is not relative to the other controllers that you may want to break out into other files.

Jai · Accepted Answer · 2014-08-08 12:45:08Z

1

You can follow this convention:

First load all the library dependencies like angular, angular-routes etc
then your config holder js file which contains your module declaration.
then all other files with controller methods.

answered Aug 8, 2014 at 12:45

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Mik378 · Accepted Answer · 2014-08-08 13:03:09Z

I would map specific modules to functionality (and not by layers), each one containing its concerned controllers, services and appropriate directives.

You would have one module called 'places.list' for instance, containing all controllers, services/factories and directives associated to it.

The rule is: one module, one file, otherwise you would be forced to declare those files in order... (first modules declaration..then controllers etc.. ugly)

If you split your modules in the right way, you will notice that each one is easy to maintain and doesn't contain in general a huge amount of code.

Even each route declaration (.config) would be split across those modules. => All the route concerning places would be declared inside the module places.list.
Indeed, it would be ugly (and difficult to maintain) to declare the whole navigation rules in your main module..

Thus, each module would be easily testable by loading only specific module's dependencies that are relevant for the test.

Collectives™ on Stack Overflow

How to separate Controller file in angularjs

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related