Interoperabilidade entre AngularJS e código legado

Em um cenário onde o AngularJS está integrado a uma aplicação legada, surge a necessidade de estabelecer comunicação entre o dois. Um desafio é o requisito de que os retornos de chamada do aplicativo legado sejam anexados à janela DOM. Este artigo explora como resolver esse problema e facilitar a interação eficaz entre o AngularJS e o código legado.

Para habilitar retornos de chamada legados, você pode registrar uma função no objeto de janela que o AngularJS pode invocar. Por exemplo, em AS3:

ExternalInterface.call("save", data);

Isso invocará a seguinte função em AngularJS:

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

Para despachar um evento do aplicativo legado que um controlador AngularJS pode escutar, é recomendado usar um serviço. No entanto, modificar o serviço fora do AngularJS requer atenção especial.

A solução é aproveitar os recursos de interoperabilidade do AngularJS. Ao acessar o escopo ou injetor de um elemento DOM, você pode interagir com a aplicação AngularJS. Por exemplo:

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

Em resumo, habilitar a interoperabilidade entre o AngularJS e o código legado envolve registrar retornos de chamada no objeto window, usar serviços para facilitar o envio de eventos e aproveitar os mecanismos de interoperabilidade do AngularJS para acessar o escopo e o injetor de fora do AngularJS. Esta abordagem permite uma comunicação perfeita entre as duas aplicações, facilitando a integração de tecnologias web modernas com sistemas existentes.