여러 angular.js 앱 간에 단일 서비스 공유

여러 angular.js 앱 간에 단일 서비스 공유

저는 e커머스 사이트(shopify 기반)를 구축하고 있으며, 퀵 쇼핑 카트, 위시리스트, 필터링 제품 및 기타 몇 가지 작은 아이템을 처리하기 위해 여러 개의 작은 anguljs 앱을 사용하고 있습니다.처음에는 하나의 큰 애플리케이션(라우팅 등)을 사용했지만, 완전한 REST API가 없을 때는 조금 제한적이었습니다.

앵글 앱(카트 서비스이므로 미니 카트에 반영되는 퀵 애드 버튼 등)으로 공유하고 싶은 서비스가 몇 가지 있습니다만, 어떻게 하면 좋을지 모르겠습니다(방법이 있으면).서비스와 모듈을 공유하는 것만으로는 앱 전체에서 동일한 상태를 유지할 수 없습니다.

시도해보았지만, 두 앱 모두 상태가 갱신되지 않는 것 같습니다.다음은 제가 사용해 본 javascript입니다.html과 함께 jsfiddle에도 있습니다.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']);

어떤 도움이라도 주시면 감사하겠습니다.

그sharedService공유되고 있지만 각진 앱은 다른 앱에서 업데이트되는 것을 인식하지 못하기 때문에 다른 앱에서 업데이트가 시작되지 않습니다.$digest. 수동으로 알려줘야 합니다.$rootScope각 어플리케이션의 기동$digest부름으로써$rootscope.$apply()

바이올린: 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;
  });

저도 비슷한 문제를 풀려고 했어요.서로 다른 iFrame에서 실행되는 앱 간에 팩토리 공유나는 아무거나 갖고 싶었어$apply()다른 모든 프레임에서 다이제스트 사이클을 발생시킵니다.심플화ng-clicks공장 출하 시 메서드에 직접 바인드하여 다른 모든 프레임의 보기를 업데이트합니다.스코프의 바인딩과 팩토리 공유를 처리하는 모듈을 만들었습니다.

plunkr을 보려면 여기를 클릭하십시오.

각 앱에 모듈을 포함하기만 하면 됩니다.

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

또한 공장 반품 명세서를 변경하여 해당 공장의 공유 버전을 반환합니다.

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

두 프레임 중 하나에서 클릭이 발생했을 때 양쪽 프레임에서 카운터 업데이트

언급URL : https://stackoverflow.com/questions/16725392/share-a-single-service-between-multiple-angular-js-apps