Interopérabilité entre AngularJS et le code hérité

Dans un scénario où AngularJS est intégré à une application héritée, il est nécessaire d'établir une communication entre le deux. L’un des défis réside dans l’exigence selon laquelle les rappels de l’application héritée doivent être joints à la fenêtre DOM. Cet article explique comment résoudre ce problème et faciliter une interaction efficace entre AngularJS et le code existant.

Pour activer les rappels existants, vous pouvez enregistrer une fonction dans l'objet window qu'AngularJS peut invoquer. Par exemple, dans AS3 :

ExternalInterface.call("save", data);

Cela invoquera la fonction suivante dans AngularJS :

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

Pour distribuer un événement depuis l'application héritée qu'un contrôleur AngularJS peut écouter, il est recommandé d'utiliser un service. Cependant, la modification du service depuis l'extérieur d'AngularJS nécessite une attention particulière.

La solution consiste à tirer parti des capacités d'interopérabilité d'AngularJS. En accédant à la portée ou à l'injecteur d'un élément DOM, vous pouvez interagir avec l'application AngularJS. Par exemple :

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

En résumé, activer l'interopérabilité entre AngularJS et le code existant implique d'enregistrer des rappels dans l'objet window, d'utiliser des services pour faciliter la répartition des événements et d'exploiter les mécanismes d'interopérabilité d'AngularJS pour accéder à la portée et à l'injecteur depuis l'extérieur d'AngularJS. Cette approche permet une communication transparente entre les deux applications, facilitant l'intégration des technologies Web modernes avec les systèmes existants.