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

});