Communication between two modules in AngularJs

Question

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 know this is possible, for instance by synchronizing events via HTML5's Local Storage. I just want to know how to do it properly.

Answer 1

"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.

Prerequisites include but are not limited too:

• 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)

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

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.

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.

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.

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.

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.

Hope this helps.

Answer 2

I just want to know how to do it properly.

"Properly" is pretty subjective. "Properly" is whatever works, is easy to understand and is maintainable.

That said, why not just use $window to pass the values between the two separate running angular apps?

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 will work too, if you need to persist the data for subsequent visits.