AngularJs中两个模块之间的通信

Question

这很容易想象,但我没有找到任何资源提到这个问题的正确方法.

我想在一个角度模块中广播事件并在另一个角度模块中接收它.这两个模块完全不同,具有不同的代码库和目的.他们唯一的共同点是他们在同一个域的网站上运行(由于相同的原始策略可能很重要).

我知道这是可能的,例如通过HTML5的本地存储同步事件.我只是想知道如何正确地做到这一点.

Answer 1

"正确"

我将首先描述应用程序的比例方面,以便明确实现"正确"实现这一目标的方法.

首先,您有一个在服务器上运行的应用程序,包含一个封装模块的核心.您从这里开始的较低级别可能包含更多模块或控制器.我会解决两个问题.

先决条件包括但不限于:

• 为控制器实现Angular 范围事件(如有必要)
• 实现中介模式到规范.
• 使用自定义事件实现SharedWorker.
• 在服务器端实现Event-Hub(如有必要)

如果您需要之间的通信的网络控制器,使用标准的角度$scope和$rootScope .$broadcast,.$emit以及.$on实用工具,内部模块(S) -你可能已经想到了这一点;)

要在模块之间进行通信,请在核心中实现Mediator模式- 可能,这将作为每个模块可以引入的服务实现; 否则,您的模块可以初始化并提供注入Mediator/Director的沙箱.现在,您的应用程序核心中的模块可以进行通信.

比如说,您需要此应用程序/核心与另一个应用程序进行通信.使用自定义事件实现SharedWorker.您可以在此处看到我为UCLA构建的框架"worker.io".该项目可以使用一些修饰,所以随意使用它作为编写自己的参考 - 重点是它使用Pseudo Port-Entanglement.这是因为工人只允许一个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也会起作用.