Get service from separate angular module

Question

You have 2 angular modules, and one of those modules has a service that you want to use in the other module:

var moduleA = angular.module ('moduleA', [])
                 .service('FirstService', function(){
                    var thing = {};
                    thing.data = ['1', 'alskdjf' , 0];
                    return thing;
                 });

var moduleB = angular.module('moduleB', []);

The question is- how do you use 'FirstService', from within moduleB?

This fails:

moduleB.controller('MBC', ['$scope', 'moduleA', function($scope, moduleA){}])

These fail too:

moduleB.controller('MBC', ['$scope', function($scope){
  var a = angular.injector().get('FirstService');
  var b = angular.injector().invoke('FirstService');
  var c = moduleA.service('FirstService');
  var d = moduleA.FirstService;

}])

I think you need to inject module A into module B like this var moduleB = angular.module('moduleB', ['moduleA]); — Anita
– Anita, Commented Apr 13, 2015 at 4:33
yep. I knew it was something easy like that. if you create that as an answer, you'll get rep — Andrew Luhring
– Andrew Luhring, Commented Apr 13, 2015 at 4:46
I have answered it. You can accept my answer, if it has helped you — Anita
– Anita, Commented Apr 13, 2015 at 5:12

Anita · Accepted Answer · 2015-04-13 04:50:06Z

3

var moduleB = angular.module('moduleB', ['moduleA]);

This will inject moduleA into moduleB , and then you can use moduleA service.

answered Apr 13, 2015 at 4:50

Anita

2,4102 gold badges21 silver badges30 bronze badges

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

Comments

Poorav Solanki · Accepted Answer · 2015-04-13 05:02:23Z

0

Here is simple Example to use angular service.

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});
mainApp.controller('CalcController', function($scope, CalcService) {
    $scope.square = function() {
       $scope.result = CalcService.square($scope.number);
    }
});

answered Apr 13, 2015 at 5:02

Poorav Solanki

1741 gold badge2 silver badges11 bronze badges

1 Comment

Andrew Luhring Over a year ago

This doesn't solve the question... or really even address it. You're injecting MathService, but not showing where / which app it's registered to and also relying on implicit injection rather than explicit... meaning you're not using array or $injector syntax which is error prone and harder to debug.

Stevers · Accepted Answer · 2016-05-12 18:57:52Z

I wrote an answer in Plunkr that works. Long story short, you add your second module as a dependency into your first one.

From there you can inject any services attached to the second module.

You don't need to use the .injector() function at all. (that's not the recommended way either).

Go to this link: http://plnkr.co/edit/7Q6dvtpvFJforeJhTLCR?p=info

var app = angular.module('plunker', ['separateModule']);

app.controller('MainCtrl', function($scope, TestService) {
  $scope.title = 'Plunker Example for Stack Overflow';
  $scope.message = TestService.sayHi();
});

//Second module
var anotherModule = angular.module('separateModule', []);

//Let's declare of Service in the Second module
anotherModule.service('TestService', function() {
    this.message = 'Hello Stack Overflow';
    
    this.sayHi = function() {
      return this.message;
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>{{ title }}</h1>
    <p>
      {{ message }}
    </p>
  </body>

</html>

Collectives™ on Stack Overflow

Get service from separate angular module

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related