Servizio AngularJS riutilizzabile all'interno di un'app

Question

Sono molto nuovo su AngularJS, quindi è possibile che io stia facendo la domanda completamente sbagliata. Quello che sto cercando di realizzare è creare una classe riutilizzabile con l'associazione dei dati in una singola app. Quanto segue dimostra ciò che sto cercando di realizzare con un esempio molto semplice.

Dire che voglio creare un contatore con un valore e un metodo di incremento. Posso creare un servizio e utilizzarlo in un controller in questo modo:

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; 
    }; 
}); 

Allora posso visualizzare una vista per aggiungere un contatore:

<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> 

Questo funziona bene per un contatore, ma cosa succede se io vuoi avere più contatori nello stesso controller? Dal momento che il servizio è un singleton, non posso farlo. Qual è l'approccio migliore per creare qualcosa di simile con Angular dato che altri servizi sarebbero molto più complessi? Grazie!

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

Answer 1

Per fai in modo che un servizio non funzioni come un singleton, puoi farlo:

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(); 
     } 
    }; 
}); 

e quindi gestire i vostri contatori dal controller, per esempio:

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

http://jsfiddle.net/KLDEZ/

Answer 2

Trucco tuoi supporto servizio più contatori:

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; 
    }; 
}); 

E poi:

<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> 

e associare la vista a qualsiasi contatore desiderato ...