AngularJs中兩個模塊之間的通信

Question

這很容易想象，但我沒有找到任何資源提到這個問題的正確方法。

我想在一個角度模塊中廣播事件並在另一個角度模塊中接收它。 這兩個模塊完全不同，具有不同的代碼庫和目的。 他們唯一的共同點是他們在同一個域的網站上運行（由於相同的原始策略可能很重要）。

我知道這是可能的，例如通過HTML5的本地存儲同步事件。 我只是想知道如何正確地做到這一點。

Answer 1

“正確”

我將首先描述應用程序的比例方面，以便明確實現“正確”實現這一目標的方法。

首先，您有一個在服務器上運行的應用程序 ，包含一個封裝模塊的核心 。 您從這里開始的較低級別可能包含更多模塊或控制器 。 我會解決兩個問題。

先決條件包括但不限於：

• 為控制器實現Angular 范圍事件 （如有必要）
• 實現中介模式到規范。
• 使用自定義事件實現SharedWorker 。
• 在服務器端實現Event-Hub （如有必要）

如果您需要控制器之間的通信網絡，請使用標准的Angular $scope ＆ $rootScope .$broadcast ， .$emit和.$on您的模塊中的實用程序 - 您可能已經想到了這一點;）

要在模塊之間進行通信，請在核心中實現Mediator模式 - 可能，這將作為每個模塊可以引入的服務實現; 否則，您的模塊可以初始化並提供注入Mediator / Director的沙箱。 現在，您的應用程序核心中的 模塊可以進行通信。

比如說，您需要此應用程序 / 核心與另一個應用程序進行通信。 使用自定義事件實現SharedWorker 。 您可以在此處看到我為UCLA構建的框架“worker.io” 。 該項目可以使用一些修飾，所以隨意使用它作為編寫自己的參考 - 重點是它使用Pseudo Port-Entanglement 。 這是因為worker只允許onmessage處理程序，所以你想創建一個new MessageEvent ; 將它作為JSON字符串發送到另一個端口，然后發送JSON.parse`消息以獲取自定義事件並在接收事件的端口上調度該事件 - 這為您提供了自定義事件。 現在，任何應用程序都可以利用此SharedWorker並通過它與其他應用程序進行通信 - 它甚至允許瀏覽器選項卡之間的通信。

如果您想要一種更全局化的事件驅動架構方法 ，比如說，為服務器上的模塊提供響應事件的機會（從任何地方） - 在服務器上實現一個事件中心 。 這可能比你想要的項目更多，但是有一本很好的書介紹了如何設置它： 可測試的JavaScript，Mark Ethan Trostler 。

也就是說，完全可以在后端使用Mediators ， SharedWorkers和EventHubs優雅地為基於事件的系統實現高度優化的架構。

上面提到的worker.io框架使用了兩個庫： Apis （拉丁語中的Bee）和Scriptorium （拉丁語中的Hive）。 但是，要了解如何實現庫，請參閱js目錄 。

希望這可以幫助。

Answer 2

我只是想知道如何正確地做到這一點。

“正確”是非常主觀的。 “正確”是任何有效的，易於理解和可維護的。

也就是說，為什么不使用$window來傳遞兩個獨立運行的角度應用程序之間的值？

function persistFoo($scope, $window) {
   //watch window.foo
   $scope.$watch(function (){
      return $window.foo;
   }, function(v) {
      if($scope.foo !== v) {
         $scope.foo = v;
      }
   });

   //watch scope.foo
   $scope.$watch('foo', function(v) {
      if($window.foo !== v) {
         $window.foo = v;
      }
   });
}

//Module 1
app1.controller("MyCtrl1", function($scope, $window) {
  persistFoo($scope, $window);
});

//Module 2
app2.controller("MyCtrl2", function($scope, $window) {
  persistFoo($scope, $window);
});

如果您需要為后續訪問保留數據，localStorage也會起作用。

Answer 3

我偶然發現了類似的問題。 這是一個提示如何解決這樣的問題的plunker： http ：//plnkr.co/edit/uk7ODSbgXfzqw0z6x4EH？p = preview

var app1 = angular.module('App1', []);

app1.controller('App1Controller', function($scope) {

    // use this function to send a value to app2
    var sendText = function(newText) {
        angular.element(document.getElementById('app2')).scope().setText(newText);
    };

    $scope.$watch('text', function(newText) {
        sendText(newText);
    });

    // initial value
    $scope.text = "Some text";
});

/*

 The code above and below do not share any module, service, etc.

*/


var app2 = angular.module('App2', []);
app2.controller('App2Controller', function($scope) {

    // this function will be called from app1 when text changes
    $scope.setText = function(newText){
        $scope.$apply(function() {
            $scope.text = newText;
        });
    };

});