How do I communicate between an Angular app and non-angular app on the same page?

Issue

I'm turning a piece of a non-angular web page into an Angular version by angular.bootstrapping it with an Angular module. It works great except for the fact that it needs to communicate with the other parts of the page. Unfortunately I cannot convert the rest of the page to Angular at this time.

The best way I've figured to do this so far is by firing vanilla JS events on the bootstrapped element containing the information I need to communicate.

Are there established patterns or better ways of doing this?

Solution

I had the same problem when I started to migrate the project I am working on to Angular. I had to communicate on different type of events like clicks with my non angular app. If you would like to use a known design pattern you can go with "Mediator pattern". It is a publish/subscribe based communication. You can have a singleton global instance of the mediator and access it from both angular and your non-angular app

Here's a link for the lib: http://thejacklawson.com/Mediator.js/

Before your app (both of them) loads you can do something like this:

window.mediator = new Mediator();

Later you can have in your Angular app a service like so:

angular.module()
   .service('mediator', function() {
     var mediator = window.mediator || new Mediator();
     return mediator;
 });

And from your non-angular app you can simply do:

mediator.subscribe('something', function(data){ ... });

And from your Angular controller or whatever you have you will inject the mediator service created and use it like so:

mediator.publish('something', { data: 'Some data' });

Now you have both an Angular and non-Angular way of communicating between your apps.

This solution did wonders for me.

Answered By - Andrei CACIO