Is it possible to share data between two angularjs apps?

Question

I have two different apps on the same page.

Can I share data between these two apps via a service (or any other way?)?

Or is this not possible?

(my suspicion is that this is not possible though regular angular mechanisms) - but I thought it would still be worth to ask...

This can be done using the window variable - but I want to avoid doing so.

Thanks!

Solution

I eventually solved it in the following manner:

angular.module('sharedService', []).factory('SharedService', function() {

  var SharedService;

  SharedService = (function() {

    function SharedService() {
      /* method code... */
    }

    SharedService.prototype.setData = function(name, data) {
      /* method code... */
    };
    return SharedService;

  })();

  if (typeof(window.angularSharedService) === 'undefined' || window.angularSharedService === null) {
    window.angularSharedService = new SharedService();
  }
  return window.angularSharedService;});
  /* now you can share the service data between two apps */
  angular.module("app1", ['sharedService'])
    /* module code */
  angular.module("app2", ['sharedService'])
    /* module code */

I have to admit the fact that this solution is not ideal - but this is the cleanest solution I found for this problem.

Comments

[Mike Robinson]

@ganaraj You can't say that that without knowing his configuration.

[lucuma]

I would agree with @ganaraj in that it would seem that there is some kind of design issue, however if the apps are on the same page I'm guessing you could use localStorage, cookies, or even something like TaffyDb in the global space to share data. I don't think you can using services although I've not tried.

[ganaraj]

@MikeRobinson The reasoning behind my saying that is something like this. If he plans to share data between the two apps then he "knows" about the existence of the two apps. Its not like the two different apps are loaded by two different parties. If he does know about them and wants to share data between them, then there is something wrong design wise. I am going to shoot blind here and assume that he is attempting to use two apps because you can use only 1 ng-view per app? This is the most common scenario.

[Rubinsh]

First of all - I agree with @ganaraj - I am doing a "hack" - but this is done because of existing dom structure that forces me to have a dialog that contains an angular app directly under the body element. As I already have several other angular apps on the page (it's a big page) - I can't wrap the whole thing with one angular app on the body element. I actually solved it by using a service that defines a singleton on the window element - but I still wanted to know if angular is built to share data between apps

[nembleton]

sir you opened my eyes. It was simple and yet I was blind. This is awesome! It allows to really reuse some services across multiple applications and build some logic layers. Thanks a lot.

[nembleton]

(except the "window" thing, which in my case doesn't apply).

[nembleton]

Actually on second thoughts, it's not what I thought it was during my first read. I'm reworking something based on the concept you put here and will post it back if it gives anything interesting.

[A Gupta]

@Rubinsh is it possible to share sharedService across different module present in different page/tab ? I know it will break SPA concept.. but still

[Chris Pillen]

This is the correct way. That's what services are for in Angular.

[JustAMartin]

It almost seems just like simple window.angularSharedService = { .. some data here .. } on steroids with the benefit that you never need to access window :)