Interop zwischen AngularJS und Legacy-Code

In einem Szenario, in dem AngularJS in eine Legacy-Anwendung integriert ist, besteht die Notwendigkeit, eine Kommunikation zwischen den herzustellen zwei. Eine Herausforderung ist die Anforderung, dass Rückrufe von der Legacy-App an das DOM-Fenster angehängt werden müssen. In diesem Artikel wird untersucht, wie Sie dieses Problem beheben und eine effektive Interaktion zwischen AngularJS und Legacy-Code ermöglichen können.

Um Legacy-Rückrufe zu aktivieren, können Sie eine Funktion im Fensterobjekt registrieren, die AngularJS aufrufen kann. Zum Beispiel in AS3:

ExternalInterface.call("save", data);

Dies ruft die folgende Funktion in AngularJS auf:

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

Um ein Ereignis von der Legacy-Anwendung auszulösen, auf das ein AngularJS-Controller warten kann, wird die Verwendung eines Dienstes empfohlen. Das Ändern des Dienstes außerhalb von AngularJS erfordert jedoch besondere Aufmerksamkeit.

Die Lösung besteht darin, die Interop-Funktionen von AngularJS zu nutzen. Durch Zugriff auf den Bereich oder Injektor eines DOM-Elements können Sie mit der AngularJS-Anwendung interagieren. Zum Beispiel:

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

Zusammenfassend umfasst die Aktivierung der Interop zwischen AngularJS und Legacy-Code die Registrierung von Rückrufen im Fensterobjekt, die Verwendung von Diensten zur Erleichterung der Ereignisverteilung und die Nutzung der Interop-Mechanismen von AngularJS, um von außerhalb von AngularJS auf den Bereich und den Injektor zuzugreifen. Dieser Ansatz ermöglicht eine nahtlose Kommunikation zwischen den beiden Anwendungen und erleichtert die Integration moderner Webtechnologien in bestehende Systeme.