Interop Between AngularJS and Legacy Code

In a scenario where AngularJS is integrated with a legacy application, the need arises to establish communication between the two. One challenge is the requirement that callbacks from the legacy app must be attached to the DOM window. This article explores how to address this issue and facilitate effective interaction between AngularJS and legacy code.

To enable legacy callbacks, you can register a function in the window object that AngularJS can invoke. For instance, in AS3:

ExternalInterface.call("save", data);

This will invoke the following function in AngularJS:

window.save = function(data){
    // Update a service or dispatch an event
}

To dispatch an event from the legacy application that an AngularJS controller can listen for, it's recommended to use a service. However, modifying the service from outside of AngularJS requires special attention.

The solution is to leverage AngularJS's interop capabilities. By accessing the scope or injector of a DOM element, you can interact with the AngularJS application. For instance:

angular.element(domElement).scope().$apply(function(){
  // Update angular model or invoke methods
});

In summary, enabling interop between AngularJS and legacy code involves registering callbacks in the window object, using services to facilitate event dispatching, and leveraging AngularJS's interop mechanisms to access the scope and injector from outside of AngularJS. This approach allows for seamless communication between the two applications, facilitating the integration of modern web technologies with existing systems.