Pertanyaan Bagikan layanan tunggal di antara beberapa aplikasi angular.js


Saya sedang membangun situs e-niaga (berdasarkan shopify) dan saya menggunakan beberapa aplikasi angularjs kecil untuk menangani hal-hal seperti keranjang belanja cepat, daftar harapan, penyaringan produk, dan beberapa item kecil lainnya. Awalnya saya menggunakan satu aplikasi besar (yang memiliki routing dan semuanya), tapi itu agak membatasi ketika saya tidak memiliki API REST penuh.

Ada beberapa layanan yang saya ingin bagikan di antara aplikasi sudut (layanan gerobak, jadi saya bisa memiliki tombol tambah cepat yang akan tercermin dalam keranjang mini dan semacamnya), tapi saya tidak yakin yang terbaik cara (jika ada cara) untuk pergi tentang ini. Hanya berbagi modul dengan layanan tidak menyimpan status yang sama di seluruh aplikasi.

Saya mencoba tangan saya dalam hal itu, tetapi saya tampaknya tidak memperbarui status di antara kedua aplikasi. Berikut ini adalah javascript yang saya coba gunakan. Ini juga di jsfiddle dengan html yang menyertainya: 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']);

Bantuan apa pun akan dihargai


32
2018-05-23 23:13


asal


Jawaban:


Itu sharedService sedang dibagikan, tetapi satu aplikasi sudut tidak tahu bahwa ada sesuatu yang diperbarui di aplikasi lain sehingga tidak memulai $digest. Anda harus secara manual memberi tahu $rootScope setiap aplikasi untuk memulai $digest dengan menyebut $rootscope.$apply()

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

25
2018-05-24 00:08



Saya mencoba memecahkan masalah yang sama. Berbagi pabrik antar aplikasi yang berjalan di iFrames yang berbeda. Saya menginginkannya $apply() dalam bingkai apa pun untuk menyebabkan siklus intisari di semua bingkai lainnya. Memungkinkan sederhana ng-clicks terikat langsung ke metode pabrik untuk memperbarui tampilan di semua bingkai lainnya. Saya membuat modul yang menangani pengikatan lingkup dan pembagian pabrik:

Klik di sini untuk melihat plunkr

Cukup sertakan modul di setiap aplikasi:

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

Dan ubah pernyataan pengembalian pabrik apa pun untuk mengembalikan versi bersama dari pabrik itu:

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

misalnya

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

Pembaruan counter di kedua frame saat klik terjadi di salah satu


3
2017-09-04 16:50