Interoperabilidad entre AngularJS y código heredado

En un escenario donde AngularJS se integra con una aplicación heredada, surge la necesidad de establecer comunicación entre dos. Un desafío es el requisito de que las devoluciones de llamada de la aplicación heredada deben adjuntarse a la ventana DOM. Este artículo explora cómo abordar este problema y facilitar la interacción efectiva entre AngularJS y el código heredado.

Para habilitar las devoluciones de llamadas heredadas, puede registrar una función en el objeto de ventana que AngularJS puede invocar. Por ejemplo, en AS3:

ExternalInterface.call("save", data);

Esto invocará la siguiente función en AngularJS:

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

Para enviar un evento desde la aplicación heredada que un controlador AngularJS pueda escuchar, se recomienda utilizar un servicio. Sin embargo, modificar el servicio desde fuera de AngularJS requiere una atención especial.

La solución es aprovechar las capacidades de interoperabilidad de AngularJS. Al acceder al alcance o inyector de un elemento DOM, puede interactuar con la aplicación AngularJS. Por ejemplo:

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

En resumen, habilitar la interoperabilidad entre AngularJS y el código heredado implica registrar devoluciones de llamada en el objeto de ventana, usar servicios para facilitar el envío de eventos y aprovechar los mecanismos de interoperabilidad de AngularJS para acceder al alcance y al inyector desde fuera de AngularJS. Este enfoque permite una comunicación fluida entre las dos aplicaciones, facilitando la integración de tecnologías web modernas con los sistemas existentes.