Communication between modules in AngularJS

Question

I guess it is possible to have many angular-modules attached to different regions within one shellpage. But can modules in AngularJS \"talk\" to each other? If yes, how?

Answer 1

Using the service mechanism to communicate among module's controllers.

 (function () {
        'use strict';

    //adding moduleB as dependency to moduleA

    angular.module('Myapp.moduleA', ['Myapp.moduleB'])
      .controller('FCtrl', FCtrl)
      .service('sharedData', SharedData);

    //adding the dependency shareData to FCtrl

    FCtrl.$inject = ['sharedData'];

    function FCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    //shared data service
    function SharedData() {

      this.data = {
        value: 'my shared data'
      }

    }

    //second module
    angular.module('Myapp.moduleB', [])
      .controller('SCtrl', SCtrl);

    SCtrl.$inject = ['sharedData'];

    function SCtrl(sharedData) {

      var vm = this;
      vm.data = sharedData.data;
    }


    })();

And the HTML as follows: