Interfacing AngularJS with Legacy Code

Integrating AngularJS with legacy applications can present challenges due to the external callbacks that need to interact with the Angular framework. To address this, AngularJS provides several mechanisms for interoperability.

Accessing Angular Services from External Code

One approach is to create an AngularJS service and expose setter methods to update its data. The legacy code can then call these methods through AngularJS's ExternalInterface object. Within the service, the setter function should trigger an event using the Angular event bus.

Capturing Events from Services in Controllers

Controllers can subscribe to events emitted by services. To do this, first define an event name in the service. In the controller, use the $scope.$on() method to register an event listener that will catch events with the relevant name and perform any necessary UI updates.

Limitations

It's important to note that direct updates to the service's data from outside of AngularJS may not always trigger updates in the view. This is because AngularJS uses a one-way data binding mechanism. To ensure updates are reflected in the view, any data changes or method invocations on the scope should be wrapped in AngularJS's $apply() function.

Example

The following code snippet demonstrates how to set up a service in AngularJS and access it from a legacy AS3 application:

angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});

// in legacy AS3 code
ExternalInterface.call("myService.setData", data);

In the AngularJS controller:

$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});