Injecting multiple Services to Controller throws error- AngularJs

Question

My code is like this

Services.JS
    angular.module('RateRequestApp.services', []).factory('rateRequestService', ['$http', rateRequestService]);

function rateRequestService($http) {
    var service = { getData: getData};
    return service;
    function getData() {
        return $http({
            method: 'Get',
            url: '../services/asas.asmx/GetReadOnlyData?shipmentID=' + getQuery('shipmentId')
        });
    }
    function getQuery(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }
}

angular.module('RateRequestApp.services', []).factory('rePrintService', ['$http', rePrintService]);
function rePrintService($http) {
    var service = { getReprintData: getReprintData };
    return service;
    function getReprintData() {
        return $http({
            method: 'Get',
            url: '../services/asas.asmx/RePrint?shipmentID=' + getQuery('shipmentId')
        });
    }
    function getQuery(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }

}


Controller.JS


    angular.module('RateRequestApp.controllers', []).controller
('ReadOnlyController', [
    '$scope', 'rateRequestService', 'rePrintService', '$controller',
    function($scope, rateRequestService, rePrintService, $controller) {
        $scope.rateData = [];
        rateRequestService.getData().success(function(response) {
                $scope.rateData = response;
                console.log(JSON.stringify(response));
            }).
            error(function(data, status, headers, config) {});
        rePrintService.getReprintData().success(function(response) {
            }).
            error(function(data, status, headers, config) {});

    }
]);

App.js
angular.module('RateRequestApp', [
   'RateRequestApp.services',
   'RateRequestApp.controllers',
   'ui.bootstrap'
]);

Everything looks okay to me, But this throws an error

Error: [$injector:unpr] Unknown provider: rateRequestServiceProvider <- rateRequestService

When I Inject only my first service, It works correct. but when second comes it breaks. Can any one point out what I am doing wrong?

dfsq · Accepted Answer · 2014-12-09 07:29:18Z

4

The problem is that you have two modules

angular.module('RateRequestApp.services', [])

definitions, so the second one overwrites the first one which holds rateRequestService service.

To properly retrieve existent module you need to use getter syntax:

angular.module('RateRequestApp.services').factory('rePrintService', ['$http', rePrintService]);

Note that there is no dependency array [] after module name.

Or you can use chain notation like this:

angular.module('RateRequestApp.services', [])
.factory('rateRequestService', ['$http', rateRequestService])
.factory('rePrintService', ['$http', rePrintService]);

edited Dec 9, 2014 at 7:29

answered Dec 9, 2014 at 7:23

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

None Over a year ago

Can you add a solution here, where I can use both my services?

Raphael Müller Over a year ago

@Athul in your question above you just defined your two services and never used it, maybe you have to provide further information about your usage, i.e. your controller where you use your services.

Renan Cidale · Accepted Answer · 2014-12-09 07:36:15Z

-2

First thing that I am noticing is that the code itself needs to be better organized to be honest, but anyways. Second thing is that you need to add the module that you created into your "RateRequestApp.controllers" module. So that the code entirely would be something like:

angular.module('RateRequestApp.controllers', ['RateRequestApp.services']).controller

This + the previous answer should do the trick. good luck

answered Dec 9, 2014 at 7:36

Renan Cidale

9122 gold badges10 silver badges25 bronze badges

Collectives™ on Stack Overflow

Injecting multiple Services to Controller throws error- AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related