AngularJs中两个模块之间的通信 [英] Communication between two modules in AngularJs

问题描述

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

This is rather simple to imagine, but I haven't found any resources mentioning what is correct approach to this issue.

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

I'd like to broadcast event in one angular module and receive it in another one. Those two modules are totally different, with different code base and purpose. The only thing that they have in common is the fact that they are running in a website on the same domain (might be important due to the same origin policy).

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

I know this is possible, for instance by synchronizing events via HTML5's Local Storage. I just want to know how to do it properly.

推荐答案

正确

我将首先描述应用程序 scales 的方面，以便明确实现正确实现的目的。

"Properly"

I will begin by describing the aspect of scales of an application in order to provide clarity in what to implement to "properly" achieve this.

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

First, You have an application that is running on a server, contains a core which encapsulates modules. The lower-level you go from here could consist of either more modules or controllers. I will address both.

先决条件包括但不限：

• 为控制器实现Angular scope-events （如有必要）


• 实现 Mediator Pattern to spec。


• 使用自定义事件实现 SharedWorker 。


• 实施服务器端的 Event-Hub （如有必要）

• Implementing Angular scope-events for controllers (if necessary)
• Implementing the Mediator Pattern to spec.
• Implementing a SharedWorker with custom events.
• Implementing an Event-Hub on the server side (if necessary)

如果您需要通信网络控制器，使用标准Angular $ scope & $ rootScope 。$ broadcast ，。$ emit ，以及。$ on 模块中的实用程序 - 您可能已经想到了这一点;）

If you need a communication-network between your controllers, use the standard Angular $scope & $rootScope .$broadcast, .$emit, and .$on utilities inside your module(s) -- you probably already thought of this ;)

要在模块之间进行通信，请在核心中实现中介模式 - 可能，这将作为每个模块可以引入的服务实现;否则，您的模块可以初始化&提供了一个注入了 Mediator / Director 的沙箱。现在 application-core 中的 modules 可以进行通信。

To communicate between modules, implement the Mediator Pattern in your core -- probably, this will be implemented as a Service that each module can pull in; otherwise, your modules can be initialized & provided a sandbox with Mediator/Director injected. Now your modules within your application-core can communicate.

说，你需要这个应用程序 / core 与另一个应用程序进行通信。使用自定义事件实现 SharedWorker。您可以在这里看到我为UCLA构建的worker.io框架。该项目可以使用一些修饰，所以随意使用它作为编写自己的参考 - 关注点是它使用 Pseudo Port-Entanglement 。这是因为worker只允许 onmessage 处理程序，所以你想创建一个 new MessageEvent ;将它作为JSON字符串发送到另一个端口，然后发送JSON.parse`消息以获取自定义事件并在接收事件的端口上调度该事件 - 这为您提供了自定义事件。现在，任何应用程序都可以利用此 SharedWorker 并通过它与其他应用程序通信 - 它甚至允许在浏览器选项卡之间进行 。

Say, you need this application / core to communicate with another application. Implement a SharedWorker with custom events. You can see a framework, "worker.io" I built for UCLA here. The project could use some touching up, so feel free to use it as a reference to write your own -- the point to focus on is that it uses Pseudo Port-Entanglement. This is because workers only allow an onmessage handler, so you want to create a new MessageEvent; send it as a JSON String to the other port, and then JSON.parse` the message to get the custom event and dispatch that event on the port that received the event -- this gives you custom events. Now, any application can utilize this SharedWorker and communicate to other apps through it -- it even allows for communication between browser tabs.

如果您想要一种更全局的事件驱动架构方法，比如说，为服务器上的模块提供机会响应事件（来自任何地方） - 在服务器上实现事件中心。这可能比你想要开展的项目更多，但是存在一本很好的书，描述了如何设置它：可测试的JavaScript，Mark Ethan Trostler 。

If you want a more global approach to an Event-Driven Architecture, say, to give modules on the server a chance to respond to events (from anywhere) -- implement an event-hub on your server. This can be more of a project than you'd like to embark on, but a great book exists which describes how to set this up: Testable JavaScript, Mark Ethan Trostler.

这就是说，完全可以优雅地实现基于事件的系统的高度优化架构，在后端使用 Mediators ， SharedWorkers 和 EventHubs 。

That said, it is completely possible to elegantly implement a highly-optimized architecture for Event-Based Systems using Mediators, SharedWorkers, and EventHubs on the back-end.

上面提到的 worker.io 框架使用了两个库： Apis （拉丁语中的Bee）和 Scriptorium （拉丁语中的Hive）。但是，要了解如何实现库，请参阅 js目录。

The worker.io framework noted above uses two libraries: Apis (Bee in latin), and Scriptorium (Hive in latin). However, to see how to implement the libraries, see the js directory.

希望这会有所帮助。

这篇关于AngularJs中两个模块之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！