So interagieren Sie AngularJS mit Legacy-Code

Anbindung von AngularJS mit Legacy-Code

Die Integration von AngularJS in Legacy-Anwendungen kann aufgrund der externen Rückrufe, die mit dem Angular-Framework interagieren müssen, eine Herausforderung darstellen . Um dies zu beheben, bietet AngularJS mehrere Mechanismen für die Interoperabilität.

Zugriff auf Angular-Dienste über externen Code

Ein Ansatz besteht darin, einen AngularJS-Dienst zu erstellen und Setter-Methoden bereitzustellen, um ihn zu aktualisieren Daten. Der Legacy-Code kann diese Methoden dann über das ExternalInterface-Objekt von AngularJS aufrufen. Innerhalb des Dienstes sollte die Setter-Funktion ein Ereignis über den Angular-Ereignisbus auslösen.

Erfassen von Ereignissen von Diensten in Controllern

Controller können von Diensten ausgegebene Ereignisse abonnieren. Definieren Sie dazu zunächst einen Event-Namen im Service. Verwenden Sie im Controller die Methode $scope.$on(), um einen Ereignis-Listener zu registrieren, der Ereignisse mit dem entsprechenden Namen abfängt und alle erforderlichen UI-Updates durchführt.

Einschränkungen

Es ist wichtig zu beachten, dass direkte Aktualisierungen der Dienstdaten von außerhalb von AngularJS möglicherweise nicht immer Aktualisierungen in der Ansicht auslösen. Dies liegt daran, dass AngularJS einen unidirektionalen Datenbindungsmechanismus verwendet. Um sicherzustellen, dass Aktualisierungen in der Ansicht widergespiegelt werden, sollten alle Datenänderungen oder Methodenaufrufe im Bereich in die Funktion $apply() von AngularJS eingeschlossen werden.

Beispiel

Das Folgende Codeausschnitt zeigt, wie man einen Dienst in AngularJS einrichtet und von einer älteren AS3-Anwendung aus darauf zugreift:

<code class="javascript">angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});</code>

<code class="as3">// in legacy AS3 code
ExternalInterface.call("myService.setData", data);</code>

Im AngularJS-Controller:

<code class="javascript">$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});</code>

Das obige ist der detaillierte Inhalt vonSo interagieren Sie AngularJS mit Legacy-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!