Angular:How to reuse service across different controller and module

Question

suppose i have service in angular and tell me how could i reuse that service across different controller and module. see the code

code taken from http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

<div ng-app="app">
    <div ng-controller="CalculatorController">
        Enter a number:
        <input type="number" ng-model="number" />
        <button ng-click="doSquare()">X<sup>2</sup></button>
        <button ng-click="doCube()">X<sup>3</sup></button>

        <div>Answer: {{answer}}</div>
    </div>
</div>

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

app.service('MathService', function() {
    this.add = function(a, b) { return a + b };

    this.subtract = function(a, b) { return a - b };

    this.multiply = function(a, b) { return a * b };

    this.divide = function(a, b) { return a / b };
});

app.service('CalculatorService', function(MathService){

    this.square = function(a) { return MathService.multiply(a,a); };
    this.cube = function(a) { return MathService.multiply(a, MathService.multiply(a,a)); };

});

app.controller('CalculatorController', function($scope, CalculatorService) {

    $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
    }

    $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
    }
});

the service has been declare and attached with app module. now tell me if i need to use this same service in another module call app1 then do i need to define and attach the same service there in app1 module ?

looking for guidance.

fikkatra · Accepted Answer · 2016-04-05 14:14:31Z

If you want to use the same service accross different controllers in the same module, you can just do so.

But, if you want to use the same service accross different modules, then you need to include the module in which the service is registered, into the module in which you want to reuse the service. In fact, it might be better to put the service in some kind of reusable module:

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

reusableModule.service('MathService', function() {
    this.add = function(a, b) { return a + b };

    this.subtract = function(a, b) { return a - b };

    this.multiply = function(a, b) { return a * b };

    this.divide = function(a, b) { return a / b };
});

reusableModule.service('CalculatorService', function(MathService){

    this.square = function(a) { return MathService.multiply(a,a); };
    this.cube = function(a) { return MathService.multiply(a, MathService.multiply(a,a)); };

});

//now use the reusable module in your app module
var app = angular.module('app', ['reusable']);
app.controller('CalculatorController', function($scope, CalculatorService) {

    $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
    }

    $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
    }
});

and the same for app1:

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

Jeff LaFay · Accepted Answer · 2016-04-05 14:15:37Z

1

You need to reference the 'app' module from 'app1' and then inject it just like you did in the controller and CalculatorService.

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

app1.controller('App1Controller', function ($scope, MathService, CalculatorService) {

});

answered Apr 5, 2016 at 14:15

Jeff LaFay

13.5k14 gold badges74 silver badges103 bronze badges

Collectives™ on Stack Overflow

Angular:How to reuse service across different controller and module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related