Chia sẻ một dịch vụ duy nhất giữa nhiều ứng dụng angular.js

Question

Tôi đang xây dựng trang web thương mại điện tử (dựa trên shopify) và tôi đang sử dụng nhiều ứng dụng góc nhỏ để xử lý những thứ như giỏ hàng nhanh, danh sách yêu thích, sản phẩm lọc và vài mục nhỏ khác. Ban đầu tôi đã sử dụng một ứng dụng lớn (có định tuyến và mọi thứ), nhưng nó có chút hạn chế khi tôi không có một API REST đầy đủ.

Có một số dịch vụ mà tôi muốn chia sẻ giữa các ứng dụng góc (dịch vụ giỏ hàng, vì vậy tôi có thể có nút thêm nhanh sẽ phản ánh trong giỏ hàng nhỏ), nhưng tôi không chắc chắn về cách tốt nhất (nếu có một cách) để đi về điều này. Chỉ cần chia sẻ một mô-đun với dịch vụ không giữ trạng thái giống nhau trên các ứng dụng.

Tôi đã thử sức với nó, nhưng dường như tôi không cập nhật trạng thái giữa cả hai ứng dụng. Sau đây là javascript tôi đã thử sử dụng. Nó cũng trên jsfiddle đi kèm với html: http://jsfiddle.net/k9KM7/1/

angular.module('test-service', []) 
    .service('TestService', function($window){ 
    var text = 'Initial state'; 

    if (!!$window.sharedService){ 
     return $window.sharedService; 
    } 

    $window.sharedService = { 
     change: function(newText){ 
     text = newText; 
     }, 
     get: function(){ 
     return text; 
     } 
    } 

    return $window.sharedService; 
    }); 

angular.module('app1', ['test-service']) 
    .controller('App1Ctrl', function($scope, TestService){ 
    $scope.text = function(){ return TestService.get() } 
    $scope.change = function(){ TestService.change('app 1 activated') } 
    }); 

angular.module('app2', ['test-service']) 
    .controller('App2Ctrl', function($scope, TestService){ 
    $scope.text = function(){ return TestService.get() } 
    $scope.change = function(){ TestService.change('app 2 activated') } 
    }); 

var app1El = document.getElementById('app1'); 
var app2El = document.getElementById('app2'); 

angular.bootstrap(app1El, ['app1', 'test-service']); 
angular.bootstrap(app2El, ['app2', 'test-service']); 

Bất kỳ trợ giúp sẽ được đánh giá

Answer 1

Các sharedService đang được chia sẻ, nhưng một trong những ứng dụng góc không biết rằng một cái gì đó được cập nhật trong ứng dụng khác để nó doesn' t bắt đầu một số $digest. Bạn phải tự nói với $rootScope của mỗi ứng dụng để bắt đầu một $digest bằng cách gọi $rootscope.$apply()

Fiddle: http://jsfiddle.net/pvtpenguin/k9KM7/3/

angular.module('test-service', []) 
    .service('TestService', function($rootScope, $window){ 
    var text = 'Initial state'; 
    $window.rootScopes = $window.rootScopes || []; 
    $window.rootScopes.push($rootScope); 

    if (!!$window.sharedService){ 
     return $window.sharedService; 
    } 

    $window.sharedService = { 
     change: function(newText){ 
     text = newText; 
     angular.forEach($window.rootScopes, function(scope) { 
      if(!scope.$$phase) { 
       scope.$apply(); 
      } 
     }); 
     }, 
     get: function(){ 
     return text; 
     } 
    } 

    return $window.sharedService; 
    }); 

Answer 2

Tôi đã cố gắng để giải quyết một vấn đề tương tự. Chia sẻ các nhà máy giữa các ứng dụng đang chạy trong các iFram khác nhau. Tôi muốn bất kỳ $apply() trong bất kỳ khung nào để gây ra một chu kỳ tiêu hóa trong tất cả các khung khác. Cho phép đơn giản ng-clicks ràng buộc trực tiếp với phương thức nhà máy để cập nhật chế độ xem trong tất cả các khung khác. Tôi tạo ra một mô-đun đó xử lý các ràng buộc của phạm vi và chia sẻ của các nhà máy:

Click here to see plunkr

Chỉ cần bao gồm các mô-đun trên mỗi ứng dụng:

angular.module('App', ['iFrameBind']) 

Và thay đổi câu lệnh return bất kỳ của nhà máy để quay trở lại phiên bản chia sẻ của nhà máy đó:

return sharedFactory.register('counter', service); 

ví dụ

.factory('counter', function (sharedFactory) { 

    var service; 
    var val = 0; 

    function inc() { 
    val++; 
    } 

    function dec() { 
    val--; 
    } 

    function value() { 
    return val; 
    } 

    service = { 
    inc: inc, 
    dec: dec, 
    value: value 
    }; 

    return sharedFactory.register('counter', service); 
}) 

.directive('counter', function (counter) { 
    return { 
    template: '{{counter.value()}} ' + 
       '<button ng-click="counter.inc()">Up</button> ' + 
       '<button ng-click="counter.dec()">Down</button> ', 
    restrict: 'E', 
    link: function postLink(scope) { 
     scope.counter = counter; 
    } 
    }; 
}); 

cập nhật Counter trong cả hai khung khi nhấp chuột xảy ra trong hoặc