Dịch vụ AngularJS có thể sử dụng lại trong một Ứng dụng

Question

Tôi rất mới với AngularJS, vì vậy có thể tôi đang đặt câu hỏi hoàn toàn sai. Những gì tôi đang cố gắng thực hiện là tạo ra một lớp có thể tái sử dụng với ràng buộc dữ liệu trong một ứng dụng duy nhất. Phần sau minh họa những gì tôi đang cố gắng thực hiện với một ví dụ rất đơn giản.

Giả sử tôi muốn tạo bộ đếm có giá trị và phương thức gia tăng. Tôi có thể tạo một dịch vụ và sử dụng nó trong một bộ điều khiển như vậy:

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

Sau đó, tôi có thể hiển thị một cái nhìn để thêm một bộ đếm:

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

này hoạt động tốt cho một quầy, nhưng những gì nếu tôi muốn có nhiều quầy trong cùng một bộ điều khiển? Vì dịch vụ là một singleton, tôi không thể làm điều đó. Cách tiếp cận tốt nhất để tạo ra thứ gì đó như thế này với Angular cho rằng các dịch vụ khác sẽ phức tạp hơn nhiều? Cảm ơn!

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

Answer 1

Để làm cho một dịch vụ không hoạt động như một singleton bạn có thể làm điều này:

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

Và sau đó quản lý quầy của bạn từ điều khiển của bạn, ví dụ:

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

http://jsfiddle.net/KLDEZ/

Answer 2

Hãy hỗ trợ dịch vụ của bạn nhiều quầy:

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

Và sau đó:

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

Và ràng buộc nhằm bất cứ điều gì bạn muốn truy cập ...