AngularJS exchange Data between two Modules

Question

I created 2 HTML pages as Angular modules.

var app = angular.module("oneApp", []);

app
    .controller(
            'controller-one',
            [
                    '$scope',
                    '$http',
                    function($scope, $http) {...functions..}]);

Both how different controllor files. But now I need this two controllers to exchange some data.

I found this related question in SO : related Thread

When trying to changing on controllor to that..

var app = angular.module("oneApp", ['twoAoo']);

.. I get an injection error. I think that's because both file are not related. How to accomplish to exchange data correctly?

score 0 · Answer 1 · answered Nov 14 '16 at 13:20

To share data between two modules, you need to use a service.

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService; 
});

This article can help you further: https://thinkster.io/a-better-way-to-learn-angularjs/services

Doing this : var app = angular.module('myApp', ['otherApp']); causes my Second page (which should use the service) to crash and break with a injection error. like already told. — Offset, Nov 14 '16 at 13:30

maxime1992 · Answer 2 · 2016-11-14T14:23:42.903

As @Penman said, you should use a service (here, I used a factory).

A very simple use case is to have a service with a method that log something. Then we use this service from 2 different modules.

Here's how I did it :

index.html

<body>

  <div ng-app="appOne">
    <div ng-controller="appOneCtrl">
      {{ name }} <button ng-click="log()">Log</button>
    </div>

    <div ng-app="appTwo">
      <div ng-controller="appTwoCtrl">
        {{ name }} <button ng-click="log()">Log</button>
      </div>
    </div>
  </div>

</body>

script.js

// APP 1
const app1 = angular.module('appOne', ['appTwo']);

app1.controller('appOneCtrl', function($scope, $log, sharedFactory) {
  $scope.name = 'App 1, ctrl 1';

  $scope.log = () => {
    $log.info('Click on log button from appOne');
    sharedFactory.logMeSomething();
  };
});

// -----------------------------------------

// APP 2
const app2 = angular.module('appTwo', []);

app2.controller('appTwoCtrl', function($scope, $log, sharedFactory) {
  $scope.name = 'App 2, ctrl 2';

  $scope.log = () => {
    $log.info('Click on log button from appTwo');
    sharedFactory.logMeSomething();
  };
});

app2.factory('sharedFactory', function($log) {
  return {
    logMeSomething: () => {
      $log.debug('Something logged from sharedFactory !');
    }
  };
});

Clicking on "Log 1" button displays :

Click on log button from appOne
Something logged from sharedFactory !

Clicking on "Log 2" button displays :

Click on log button from appTwo
Something logged from sharedFactory !

Here's a working Plunkr of my solution :

https://plnkr.co/edit/sgOKkh0eh0URPGIP9dZY?p=preview

Yes I understand. I tried this. But when adding App2 as dependency to App1 i got a cryptic error message in console and angular breaks for this site. — Offset, Nov 14 '16 at 14:27
This is the theory and I'm not aware of you built your app. Is it open source ? If so, share source code and I might have a look into it. Otherwise, try to create a Plunkr that reproduce the issue so we have something to work on ;). — maxime1992, Nov 14 '16 at 14:28
I guess I found my error. I including my page(app) with the controller script dynamically.This means The otherApp is not even loaded.Which brings up a other problem. But thats a drifferent question :) — Offset, Nov 15 '16 at 09:08

AngularJS exchange Data between two Modules

2 Answers2