Совместное использование одной службы между несколькими приложениями angular.js

Я создаю сайт электронной коммерции (основанный на shopify), и я использую несколько небольших приложений для работы с угловыми файлами для обработки таких вещей, как быстрая корзина покупок, списки пожеланий, фильтрующие продукты и несколько других мелких предметов. Сначала я использовал одно большое приложение (у которого была маршрутизация и все), но это было немного ограничительным, когда у меня не было полного REST API.

Есть несколько сервисов, которые я бы хотел разделить между приложениями angular (услуга тележки, поэтому у меня есть кнопка быстрого добавления, которая будет отображаться в мини-тележке и т.д.), но я не уверенный в лучшем способе (если есть способ) об этом. Простое разделение модуля с сервисом не поддерживает одно и то же состояние в приложениях.

Я попробовал свою руку, но я не уверен, что он обновляет состояние между обоими приложениями. Ниже приведен javascript, который я пытался использовать. Это также на jsfiddle с сопровождающим 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']);

Любая помощь будет оценена

Ответы

Ответ 1

sharedService используется совместно, но одно приложение angular не знает, что что-то обновлено в другом приложении, поэтому он не запускает $digest. Вы должны вручную сообщить $rootScope каждого приложения, чтобы запустить $digest, вызвав $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;
  });

Ответ 2

Я пытался решить подобную проблему. Обмен фабриками между приложениями, работающими в разных iFrames. Я хотел, чтобы любой $apply() в любом фрейме вызывал цикл дайджеста во всех других кадрах. Разрешая простой ng-clicks связанный непосредственно с методом factory для обновления представления во всех остальных фреймах. Я создал модуль, который обрабатывает привязку областей и разделение заводов:

Нажмите здесь, чтобы увидеть plunkr

Просто включите модуль в каждое приложение:

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

И измените любой оператор return factory, чтобы вернуть общую версию этого factory:

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

например.

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

Обновлять счетчики в обоих кадрах, когда щелчок происходит в