CODEWITHSUNDEEP
angularjs
butYouDontLookLikeADeveloper
butYouDontLookLikeADeveloper

Reputation: 337

How to separate Controller file in angularjs

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.

Upvotes: 2

Views: 4327

Answers (4)

Yasser Shaikh
Yasser Shaikh

Reputation: 47804

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) {

  } ]);

Upvotes: 4

Mik378
Mik378

Reputation: 22191

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.

Upvotes: 1

Jai
Jai

Reputation: 74748

You can follow this convention:

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

Upvotes: 1

acg
acg

Reputation: 961

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.

Upvotes: 1

Related Questions