Condividi un singolo servizio tra più app angular.js

Sto costruendo un sito di e-commerce (basato su shopify) e sto usando più piccole app angularjs per gestire cose come un carrello della spesa veloce, liste dei desideri, prodotti di filtraggio e pochi altri oggetti più piccoli. Inizialmente ho usato una grande applicazione (che aveva routing e tutto), ma era un po ‘restrittiva quando non avevo un’API REST completa.

Ci sono un paio di servizi che vorrei condividere tra le app angolari (il servizio di carrello, quindi posso avere un pulsante di aggiunta rapida che rifletterà nel mini-carrello e così via), ma non sono sicuro del migliore modo (se c’è un modo) per andare su questo. La semplice condivisione di un modulo con il servizio non mantiene lo stesso stato in tutte le app.

Ci ho provato, ma non mi sembra di aggiornare lo stato tra le due app. Quello che segue è il javascript che ho provato ad usare. È anche su jsfiddle con l’html di accompagnamento: 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']); 

Qualsiasi aiuto sarebbe apprezzato

sharedService viene condiviso, ma una app angular non sa che qualcosa è aggiornato nell’altra app in modo che non dia inizio a $digest . Devi dire manualmente $rootScope di ogni applicazione per avviare un $digest chiamando $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; }); 

Stavo cercando di risolvere un problema simile. Condivisione di fabbriche tra app in esecuzione in diversi iFrame. Volevo qualsiasi $apply() in qualsiasi frame per causare un ciclo di digest in tutti gli altri frame. Consentendo semplici ng-clicks legati direttamente a un metodo factory per aggiornare la vista in tutti gli altri frame. Ho creato un modulo che gestisce l’associazione degli ambiti e la condivisione delle fabbriche:

Clicca qui per vedere plunkr

Basta includere il modulo su ogni app:

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

E cambia la dichiarazione di ritorno di qualsiasi fabbrica per restituire la versione condivisa di quella fabbrica:

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

per esempio

 .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()}} ' + ' ' + ' ', restrict: 'E', link: function postLink(scope) { scope.counter = counter; } }; }); 

Aggiornamenti contatore in entrambi i frame quando si verifica un clic in entrambi