Mit One-Time Binding die Performance verbessern

Bidirektionales (Two-Way) Databinding gehört zum täglichen Brot eines Angular Entwicklers und ist eine bekannte Kernfunktion. Was ist nun das neue einmalige (One-Time) Databinding und welches Problem löst es?

Problem

Damit AngularJS Template-Elemente automatisch aktualisieren kann gibt es Beobachter-Funktionen(Watcher), die prüfen, ob sich Daten geändert haben. Diese Prüfung erfolgt nach Aktionen die den Aktualisierungszyklus von Angular auslösen, z.B. eine Änderung in einem Eingabefeld mit ng-model. Auch Variablen, die man definitiv nur einmal initialisieren möchte, werden in jedem Aktualisierungszyklus auf Änderungen geprüft. Je nach dem wie viele Beobachter-Funktionen es auf einer Seite gibt und wie komplex die Prüfungen sind, die sie ausführen müssen, kann dies die Reaktionsgeschwindkeit und somit Performance der Seite deutlich verschlechtern.

💡 Hat dir das Tutorial geholfen?

Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst Du die Fragen stellen, die Du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie Dir beantworten.

Jetzt weiter lernen

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

Lösung

Ab Angular 1.3 gibt es eine neuen Syntax für Template-Ausdrücke ::. Statt {{ variable }} kann man jetzt einfach {{ ::variable }} schreiben und erreicht, dass die Beobachter-Funktion nach dem ersten Aktualisierungszyklus entfernt wird. Dadurch wird der Template-Ausdruck nicht mehr geprüft und das Element nicht mehr aktualisiert. Auf diese Weise kann man verhindern, dass AngularJS überflüssige Prüfungen durchführt und so die Reaktionsgeschwindigkeit seiner Seite potenziell verbessern. Wenn man Direktiven wie ng-if oder ng-view verwendet, dann gilt das einmal Databinding bei jeder neuen Initialisierung der jeweiligen Direktive.

Beispiel

Die einzelnen Punkte sollten am folgenden Beispiel klar werden. Wenn man einen Namen auswählt oder auf Rotieren klickt, dann zeigen beide Template-Ausdrücke den Namen an. Wiederholt man die Aktion,dann verändert sich nur noch der Ausdruck mit der klassischen Syntax. Anschließend kann man beide Elemente Ausblenden und da diese Funktion mit ng-if umgesetzt ist, werden die Elemente beim Einblenden neu initialisiert und erhalten beide den aktuellen Wert der Variable selectedName. Mit Zurücksetzen und Aus/Einblenden kann man den Ursprungszustand wiederherstellen.