Error in registering the controller AngularJS

Question

My code is like this

App.js
angular.module('mailerApp', [
    'mailerApp.services',
    'mailerApp.controllers',
    'ui.bootstrap',
    'angular-loading-bar',
    'textAngular',
    'angularFileUpload'
]);

Cotrollers.js
angular.module('mailerApp.controllers').controller('MailerCntrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {

}]);

Services.JS
angular.module('mailerApp.services', []).factory('rateRequestService', ['$http', rateRequestService]);
function rateRequestService($http) {
    var service = { getData: getData };
    return service;
    function getData() {
        return $http({
            method: 'Get',
            url: '../services/RateRequestWS.asmx/GetReadOnlyData?'
        });
    }
}

HTML
body ng-app="mailerApp" ng-controller="MailerCntrl">
</body>

Everything looks okay to me, But this throws an error

 Uncaught Error: [$injector:nomod] Module 'mailerApp.controllers' is not available! You either misspelled the module name or forgot to
 load it. If registering a module ensure that you specify the
 dependencies as the second argument.

Can any one point out What I am doing wrong here?

If you are creating the module you need to add an empty array as the second argument: angular.module('mailerApp.controllers', []) (Just like you have with mailarApp.services) — tasseKATT
– tasseKATT, Commented Dec 24, 2014 at 12:06

Idkt · Accepted Answer · 2014-12-24 12:23:42Z

4

Instead of

angular.module('mailerApp.controllers').controller...

You need to do

angular.module('mailerApp').controller... // to add the controller to the mailerApp module
angular.module('mailerApp.controllers', []).controller... // to add the controller to a new mailerApp.controllers module

And the same goes with;

angular.module('mailerApp.services').factory...

Instead you need to

angular.module('mailerApp').factory... // add the factory to the mailerApp module
angular.module('mailerApp.services', []).factory... // add the factory to a new mailerApp.services module

When you create and angular module, you give it a name and the list of dependencies in the array;

var module = angular.module('<module_name>', [<dependencies>])

But then when you add a controller/factory to the module, you'll need to either use the module object you created.

edited Dec 24, 2014 at 12:23

answered Dec 24, 2014 at 12:05

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

4 Comments

tasseKATT Over a year ago

This is incorrect as he wants mailerApp.controllers and mailerApp.services as separate modules (as he has added them as dependent modules to his main module).

Idkt Over a year ago

@tasseKATT I've added that in the edit to the answer.

thomaux Over a year ago

Please also update your answer to remove the first part (which is not correct)

Idkt Over a year ago

I've added a more detailed explanation. Thanks @Anzeo

SeniorJD · Accepted Answer · 2014-12-24 15:27:59Z

3

when you write angular.module('mailerApp.controllers', [ ]), you create new module as 'mailerApp.controllers' and in second parameter you pass dependencies.
and when you write angular.module('mailerApp.controllers') it references previously created module.

But in your case your directly referencing module without creating it, therefore it gives you error for that. Same goes for other cases

edited Dec 24, 2014 at 15:27

SeniorJD

7,2624 gold badges38 silver badges53 bronze badges

answered Dec 24, 2014 at 14:57

Vaibhav Raut

4724 silver badges12 bronze badges

Collectives™ on Stack Overflow

Error in registering the controller AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related