Dependency injection of custom service into another custom service

[lukaszdechovan]

I want to use dependency injection in my custom angular services.
I have one simple service A and another simple service B. When I inject these two to a controller, everything works as expected. However, when I try to use service A in service B and I want to inject A to the B service, nothing is injected (parameter where should be instance of Service B is undefined).

Is this a bug, angular doesn't support injection of custom service into another custom service by design, or I just made some mistake?

Here are the code snippets of my app:

File ServiceA.js

var ServiceA = function ($log) { // angular service $log is successfuly injected
    alert("Service initialized"); 
    
    this.showMessage = function(message) {
         alert(message);
    };   
};
ServiceA.$inject = ["$log"];

File SerivceB.js

var ServiceB = function (serviceA) { // serviceA is undefined
    alert("Service initialized");
 
    serviceA.showMessage("method of serviceA called from serviceB"); // this row throws an error of course
};
ServiceB.$inject = ["ServiceA"];

File index.html

.... jQuery, angular.js, etc...

<script type="text/javascript" src="ServiceA.js"></script>
<script type="text/javascript" src="ServiceB.js"></script>

<script type="text/javascript">
    angular.service('ServiceA', function () {
        return new ServiceA();
    });    

    angular.service('ServiceB', function () {
        return new ServiceB();
    });    

    function FormController(serviceA, serviceB) {
        this.user = {
            name: 'John Smith',            
        };        
    }
    FormController.$inject = ['ServiceA', 'ServiceB'];
  </script>

  <div ng:controller="FormController" class="example">    
      .... some HTML Markup ....
  </div>
   .... end of the page...

Thanks for your answers and advices.

[vojtajina]

This is not an issue, you are not registering the service...

Check out this: http://jsfiddle.net/vojtajina/4xu5g/

We want to make all the apis more consistent, I know, it's bit confusing now...

Next time, ask on mailing list first: https://groups.google.com/forum/#!forum/angular

[lukaszdechovan]

Thank you for your advice, I have rewrited my code and it works now.

I haven't read the documentation about the service registration very carefully...

[mhevery]

You have the injection annotation on the wrong object.

function ServiceA(serviceB){}
function serviceAFactory(serviceB){ return new ServiceA(serviceB);}
serviceAFactory.$inject = ['ServiceB'];
angular.service('serviceA', serviceAFactory);

/// The short hand of the same thing
angular.service('serviceA', function(serviceB){
return new (function(serviceB){
// do work
})(serviceB);
}, {$inject:['serviceB']});

2011/10/13 lukaszdechovan <
reply@reply.github.com>

I want to use dependency injection in my custom angular services.
I have one simple service A and another simple service B. When I inject
these two to a controller, everything works as expected. However, when I try
to use service A in service B and I want to inject A to the B service,
nothing is injected (parameter where should be instance of Service B is
undefined).

Is this a bug, angular doesn't support injection of custom service into
another custom service by design, or I just made some mistake?

Here are the code snippets of my app:

File ServiceA.js

ServiceA = function ($log) { // angular service $log is successfuly
injected
alert("Service initialized");

this.showMessage = function(message) {
alert(message);
}
};
ServiceA.$inject = ["$log"];

File SerivceB.js

ServiceB = function (serviceA) { // serviceA is undefined
alert("Service initialized");

serviceA.showMessage("method of serviceA called from serviceB"); // this
row throws an error of course
};
ServiceB.$inject = ["ServiceA"];

File index.html

.... jQuery, angular.js, etc...

<script type="text/javascript" src="ServiceA.js"></script> <script type="text/javascript" src="ServiceB.js"></script> <script type="text/javascript"> angular.service('ServiceA', function () { return new ServiceA(); }); angular.service('ServiceB', function () { return new ServiceB(); }); function FormController(serviceA, serviceB) { this.user = { name: 'John Smith', }; } FormController.$inject = ['ServiceA', 'ServiceB']; </script>

.... some HTML Markup ....

Thanks for your answers and advices.

Reply to this email directly or view it on GitHub:
#590