Reusable AngularJS service in application

Question

I am very new to AngularJS, so maybe I'm asking a completely wrong question. What I'm trying to do is create a reuse class with data binding in one application. The following shows what I'm trying to accomplish with a very simple example.

Let's say I want to create a counter with a value and an increment method. I can create a service and use it in the controller as follows:

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 the 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 a single counter, but what if I want to have multiple counters in the same controller? Since the service is singleton, I cannot do this. What is the best approach to create something like this using Angular, given that other services will be much more complicated? Thanks!

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

Answer 1

To invalidate a service as a single, 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, for example:

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

http://jsfiddle.net/KLDEZ/

Answer 2

Make your service support for 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 any counter you want ...