AngularJS - Communication Between Controllers

This is an example of how to use a custom service to facilitate communicate between multiple controllers using pub/sub event bus.

by manikantag

HTML

<script src="http://www.gridlinked.info/cdn/highlighter/head.load.min.js"></script>
<script src="http://www.gridlinked.info/cdn/highlighter/head_highlighter.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<script src="http://www.gridlinked.info/angularJS/modules/MessagingServices.js"></script>
<body ng-app="MessagingDemo">
    <div id="body">
        <div id="header"></div>
    <div id="contents" >
        <div id="intro">
            <p>                
                <strong>AngularJS</strong> Publish/Subscribe solutions using Messaging services
            </p>
            <img src="http://www.gridlinked.info/angularJS/modules/MessagingQueue.png" />
        </div>
        <h2>Use Messaging to communicate between AngularJS Controllers</h2>
        
        <div class="bullet">
        <div class="description">         
            <h3> Step #1: Use Controllers to listen to `Channels`</h3>
            
        <p> Configure <code><span class='code'>Controller 1</span></code>: </p>
            <pre class="brush: js;">
            /**
             * Controller 1 -
             */
            function ControllerOne($scope, channel1, channel2) 
            {
                channel1.addListener( function(msg) { $scope.c1_1 = '(1): ' + msg;    });
                channel2.addListener( function(msg) { $scope.c1_2 = '(2): ' + msg;    });
            } 
           
         </pre> 
        <div ng-controller="ControllerOne" style="width:300px;">
            Channel #1 Message: &nbsp;&nbsp; <input disabled="disabled"  ng-model="c1_1" ><br/>
            Channel #2 Message: &nbsp;&nbsp; <input disabled="disabled"  ng-model="c1_2" >
        </div>
            
        <br/>        
        <p> Configure <code><span class='code'>Controller 2</span></code>: </p>
         <pre class="brush: js;">
            /**
             * Controller 2 -
             */
            function ControllerTwo($scope, channel1, channel2) 
           ...

CSS

body {
  font-size : .9em;
  font-family: Helvetica,sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
}

#source {
    display: none;
}

code {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 3px 3px;
  font-family: monospace;
  font-size: 120%;
  padding: 0 3px;
}
.intro {
  width: 100%;
}
#body {
  -moz-box-align: center;
  -moz-box-orient: vertical;
  display: -moz-box;
  width: 100%;
}
#contents {
  -moz-box-orient: vertical;
  background-color: #fef3e9;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 10px #723600;
  display: -moz-box;
  padding: 20px;
  position: relative;
  width: 90%;
  z-index: 2;
  margin-left: 20px;
}
#contents h1 {
  color: #3F1E00;
  margin-bottom: 0;
}
#intro {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 5px 5px;
  color: #723600;
  font-size: 18px;
  line-height: 24px;
  padding: 10px;
}
#intro p {
  margin: 0;
}
#intro p + p {
  margin-top: 10px;
}
#intro strong {
  color: #582A00;
}

h2 {
  -moz-box-sizing: border-box;
  border-bottom: 3px solid #8B4200;
  color: #582A00;
  font-size: 20px;
  margin-top: 24px;
  padding: 5px;
  width: 100%;
}
ul.bullet {
  -moz-box-align: center;
  -moz-box-orient: horizontal;
  -moz-box-pack: justify;
  display: -moz-box;
}
ul.bullet a {
  -moz-box-flex: 1;
  margin-left: 0;
  margin-right: 10px;
}
ul.bullet a:last-child {
  margin-right: 0;
}
.bullet {
  -moz-box-orient: vertical;
  -moz-box-sizing: border-box;
  display: -moz-box;
  padding: 8px 15px;
  width: 100%;
}
.bullet .description {
  color: #3F1E00;
  line-height: 24px;
  margin-bottom: 8px;
  margin-right: 16px;
  width: 100%;
}
.bullet a {
  background-image: -moz-linear-gradient(center top , #F38709, #C26C07);
  border-radius: 5px 5px 5px 5px;
  color: white;
  display: block;
  margin: 10px 0 0 450px;
  padding-bottom: 8px;
  padding-top: 8px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0...

JavaScript

// *******************************************************************
// Define services for the MyDemo app (requires `messaging` module in MessagingServices.js)
// 
// NOTE: The `messaging` module is defined in MessagingServices.js; loaded as a managed resource
//       on the left:  http://www.gridlinked.info/angularJS/lib/MessagingServices.js 
//
// *******************************************************************

 // Build two (2) dispatcher/messaging routers: Channel1 and Channel2

 angular.module( 'MessagingDemo' , ['messaging'])
        .factory('channel1',['EventDispatcher', function( EventDispatcher ) {
            // Build specific EventDispatchers for topic: Channel1
            return EventDispatcher.getInstance("Channel1");
        }])
        .factory('channel2',['EventDispatcher', function( EventDispatcher ) {
            // Build specific EventDispatchers for topic: Channel2
            return EventDispatcher.getInstance("Channel2");
        }])
        .factory('pushService',['EventDispatcher',function( EventDispatcher ) {
            // Background timer
            var dispatcher = EventDispatcher.getInstance("myBackgroundService"),
                count      = 1,
                timerID;
            
            // Timer process to announce service changes; defaults to every 500ms
            function runBackgroundProcess(interval) {
                if ( !interval ) interval = .5;
                
                timerID = setInterval( function() {
                    dispatcher.dispatch( "Service update #" + count++ );                                                      
                }, interval*1000 );
             }
                        
            // Build specific EventDispatcher used exclusively with this background service.
            return {
                start : function( interval ) {
                            if ( !timerID ) runBackgroundProcess(interval);
                            return dispatcher;
              ...