Reusable AngularJS Service within an App

Question

I'm very new to AngularJS, so it's possible I'm asking the entirely wrong question. What I'm trying to accomplish is create a reusable class with data binding in a single app. The following demonstrates what I'm trying to accomplish with a very simple example.

Say I want to create a counter with a value and an increment method. I can create a service and use it in a controller like so:

angular.module("fiddle", ["counter"])
.controller("MainCtrl", function($scope, counter) {
    $scope.counter = counter;
});

angular.module("counter", [])
.service("counter", function() {
    this.count = 0;
    this.increment = function(x) {
        this.count += x;
    };
});

Then I can display a view to add a counter:

<h1>Count: {{counter.count}}</h1>
<button ng-click="counter.increment(1)">Add 1</button>
<button ng-click="counter.increment(5)">Add 5</button>
<button ng-click="counter.increment(10)">Add 10</button>

This works fine for one counter, but what if I want to have multiple counters in the same controller? Since the service is a singleton, I can't do that. What's the best approach for creating something like this with Angular given that other services would be much more complex? Thanks!

http://jsfiddle.net/jeffaudio/ExASb/

StuR · Accepted Answer · 2013-08-05 16:04:22Z

9

To make a service not act like as a singleton you can do this:

angular.module("counter", [])
.service("counter", function() {
    var aCounter = function() {
        this.count = 0;
        this.increment = function(x) {
            this.count += x;
        };
    }
    return {
        getInstance: function () {
          return new aCounter();
        }
    };
});

And then manage your counters from your controller, e.g:

function myCtrl($scope, counter) {
    $scope.counter1 = counter.getInstance();
    $scope.counter2 = counter.getInstance();
}

http://jsfiddle.net/KLDEZ/

answered Aug 5, 2013 at 16:04

StuR

12.3k9 gold badges47 silver badges66 bronze badges

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

1 Comment

Paul McClean Over a year ago

Out of curiosity, is this considered good/bad practice or does it just come down personal preference?

diegoaguilar · Accepted Answer · 2015-03-05 07:22:57Z

2

Make your service support multiple counters:

angular.module("counter", [])
.service("counter", function() {
    // Counters is our object which service encapsulates
    this.counters = {};
    this.increment = function(name, x) {
        // If such counter is not set, set it.
        if (!this.counters[name]) { this.counters[name] = 0; }
        this.counters[name] += x;
    };
});

And then:

<button ng-click="counter.increment('count1', 1)">Add 1</button>
<button ng-click="counter.increment('count2', 5)">Add 5</button>
<button ng-click="counter.increment('count3', 10)">Add 10</button>

And bind the view to whatever counter you want...

edited Mar 5, 2015 at 7:22

diegoaguilar

8,42616 gold badges88 silver badges134 bronze badges

answered Aug 5, 2013 at 15:55

Shay Friedman

4,8786 gold badges39 silver badges53 bronze badges

Collectives™ on Stack Overflow

Reusable AngularJS Service within an App

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related