Angular + message bus + external app

example-controller.js

goog.provide('test.angular.MainController');

goog.require('goog.string');
goog.require('test.angular.Service');



/**
 * Main controller.
 *
 * @param {!angular.Scope} $scope
 * @param {!test.angular.Service} logService
 * @constructor
 * @ngInject
 * @export
 */
test.angular.MainController = function($scope, logService) {
  /**
   * @type {string}
   * @export
   */
  this.name = 'Peter';
  /**
   * @export
   * @type {string}
   */
  this.message = '';
  /**
   * @private
   * @type {number}
   */
  this.precision_ = 2;
  /**
   * @type {!test.angular.Service}
   * @private
   */
  this.messageQueueService_ = logService;
};


/**
 * Method available on the instance for binding (exported)
 * @export
 * @param  {string} text
 */
test.angular.MainController.prototype.updateQueue = function(text) {
  this.messageQueueService_.addMessage(text);
};


/**
 * Method available to the instance for binding in templates.
 * @export
 * @param  {number} a
 * @param  {number} b
 * @return {string}
 */
test.angular.MainController.prototype.calculate = function(a, b) {
  return goog.string.padNumber(a + b, 3, this.precision_);
};

example-service.js

goog.provide('test.angular.Service');

goog.require('goog.array');
goog.require('goog.async.Delay');



/**
 * @constructor
 */
test.angular.Service = function() {
  /**
   * @protected
   * @type {!Array<!string>}
   */
  this.messageQueue = [];

  this.delay_ = new goog.async.Delay(this.log, 5000, this);
  this.delay_.start();
};


/**
 * Logs out the messages that are queued.
 * @protected
 */
test.angular.Service.prototype.log = function() {
  if (!goog.array.isEmpty(this.messageQueue)) {
    console.log('Matchlog messages:', this.messageQueue);
    goog.array.clear(this.messageQueue);
  }
  this.delay_.start();
};


/**
 * Test method on service.
 * @param {!string} msg
 */
test.angular.Service.prototype.addMessage = function(msg) {
  this.messageQueue.push(msg);
};

example.js

/// The angular part
angular
  .module('myapp', [])
  .controller('MyController',['$scope', function($scope) {
    $scope.name = 'Peter';
    bus.subscribe('CHANGE_NAME', function(name) {
      $scope.$apply(function() {
        $scope.name = name;
      });
    })
}]);


/// Common part, the team members should agree on common interface for
/// communication, the simplest the better.
var bus = (function() {
  var store = {};
  var bus = {
    publish: function(topic, data) {
      if (store.hasOwnProperty(topic)) {
        store[topic].forEach(function(fn) {
          fn(data);
        });
      }
    },

    subscribe: function(topic, handler) {
      if (!store.hasOwnProperty(topic)) {
        store[topic] = [];
      }
      store[topic].push(handler);
    },

    unsubscribe: function(topic, handler) {
      if (store.hasOwnProperty(topic)) {
        var arr = store[topic];
        var i = arr.indexOf(handler);
        if (i >= 0) {
          arr.splice(i, 1);
        }
      }
    },
  };

  return bus;
})();

/// External data changes and signalling.
document.querySelector('#external').addEventListener('click', function() {
  bus.publish('CHANGE_NAME', 'Sasho');
});

example2.js

goog.provide('test.angular.MainController');



/**
 * Main controller.
 *
 * @param {!angular.Scope} $scope
 * @constructor
 * @ngInject
 * @export
 */
test.angular.MainController = function($scope) {
  /**
   * @type {string}
   * @export
   */
  this.name = 'Peter';
  /**
   * @export
   * @type {string}
   */
  this.message = '';
};


/**
 * Method available to the instance for binding in templates.
 * @export
 * @param  {number} a
 * @param  {number} b
 * @return {number}
 */
test.angular.MainController.prototype.calculate = function(a, b) {
  return a + b;
};

exmaple3.js

goog.provide('test.angular.MainController');

goog.require('goog.string');



/**
 * Main controller.
 *
 * @param {!angular.Scope} $scope
 * @constructor
 * @ngInject
 * @export
 */
test.angular.MainController = function($scope) {
  /**
   * @type {string}
   * @export
   */
  this.name = 'Peter';
  /**
   * @export
   * @type {string}
   */
  this.message = '';
  /**
   * @private
   * @type {number}
   */
  this.precision_ = 2;
};


/**
 * Method available to the instance for binding in templates.
 * @export
 * @param  {number} a
 * @param  {number} b
 * @return {number}
 */
test.angular.MainController.prototype.calculate = function(a, b) {
  return goog.string.padNumber(a + b, 3, this.precision_);
};

template.html

<div ng-app="myapp">
	<div ng-controller="test.angular.MainController as mc">
		<div>{{mc.name}}</div>
		<div>{{mc.calculate(1, 2)}}</div>
	</div>
</div>