AngularJS 1.3 – Neuerungen: one time bindings, ng-messages, ng-model-options


Auch der neueste Release von AngularJS (1.3) hat wieder ein paar interessante Neuerungen mit sich gebracht. Die drei interessantesten Neuerungen meiner Meinung nach sind:

  • Einmalbindungen (“one time bindings”)
  • Die Direktive “ng-messages”
  • Die Erweiterung für “ng-model” mit den “ng-model-options”

1. Einmalbindungen (“one time bindings”)

Wenn man ein Binding in AngularJS über ng-bind oder die Doppeltgeschweiften Klammern erstellt, dann werden diese Werte standardmäßig von AngularJS überwacht und sobald sich dieser Wert ändert, sieht man die Änderungen auch direkt im View.

Oft zeigt man aber Daten an, wo man bereits vorher weiß, das die Werte sich nicht wieder ändern oder bei einem ng-repeat z.B. wo sich maximal die Auflistung ändert aber nicht die einzelnen Werte in der jeweiligen Row selbst. In diesen Fällen werden trotzdem alle Werte überwacht, obwohl dies nicht nötig wäre. Denn aber einer Bestimmten Anzahl an überwachten Bindings kommt es auch zu Performanceproblemen und die Anwendung läuft evtl. nicht mehr “flüssig”.

Daher gibt es ab AngularJS 1.3 die Möglichkeit, dass Bindings nur das erste mal gebunden werden und danach nicht mehr überwacht werden. Dadurch ist es möglich mehr Informationen über AngularJS zu binden und anzuzeigen, ohne das es zu Performanceproblemen kommt. Dies geschieht einfach mit zwei Doppelpunkten vor dem jeweiligen Binding z.B:

<span ng-bind="::viewModel.Name" ></span> 

{{::viewModel.Name}} 

So lange die Variable nicht gesetzt wird (“undefined” ist), wird die Variable überwacht (watch). Wird der Variablen ein Wert zugewiesen, dann wird die Variable nicht mehr überwacht (vereinfacht ausgedrückt) – Details.

Die zwei Doppelpunkte können auch im ng-repeat verwendet werden um z.B. die ganze Schleife nur einmal auszuführen oder auch nur um einzelne Werte einer Row aus der Watch zu entfernen.

<ul class="list-unstyled">;
    <li>
        <div class="row">
            <div class="col-md-6">Name: {{::person.Name}} (Not Watched) | Vorname: {{person.Vorname}} (Watched)/div>;
        </div>
    </li>
</ul>

ACHTUNG HINWEIS: Die one time bindings werden durch das Addon “Batarang” im Chrome “deaktiviert” bzw. funktionieren nicht, d.h. man kann den “::” setzten wo man möchte die Bindings werden aber weiterhin geändert und nicht aus dem Watcher entfernt. Daher entweder das Addon deinstallieren oder einen anderen Browser verwenden.

2. Eine neue Direktive “ng-messages”

Wenn man bisher ein Formular validiert hat und die passenden Meldungen für “required”, “email, “minlength”, “maxength”,, … vernünftig ausgeben wollte, ohne das alle Meldungen gleichzeitig angezeigt werden, war es notwendig dass man teilweise recht aufwendige “ng-if” Anweisungen schreiben musste. Dies wird durch die neue Direktive ng-messages entsprechend vereinfacht.

 <ng-messages for="frm.mail.$error" ng-if="ctrl.submitted">
        <div ng-message="required">
          Bitte eine Eingabe festlegen
        </div>
        <div ng-message="email">
          Bitte eine gültige Email eingeben
        </div>
</ng-messages>

Mit ng-messages und dann der entsprechenden ng-message lassen sich alle Meldungen z.B: für $error für ein Eingabefeld entsprechend einfach darstellen. Die hier angegebene Reihenfolge entspricht ebenfalls der Priorität in der die Meldungen entsprechend angezeigt werden. Dabei wird immer nur eine Meldung angezeigt, was sich aber mit dem Attribut “ng-messages-multiple” wieder deaktivieren lässt – Details.

3. Die Erweiterung für “ng-model” mit den “ng-model-options”

Die neue Direktive lautet “ng-model-options” (Details) und beinhaltet diverse neue Optionen die man setzen kann. Die beiden besten Optionen meiner Meinung nach sind hier “debounce” und “updateOn”. Die neue Direktive kann nur eingesetzt werden in Verbindung mit “ng-model” auf dem gleichen Element und ändert das Bindungsverhalten der gebundenen Modelvariablen entsprechend der angegebenen Optionen.

<input type="email"
      name="mail"
      ng-model="ctrl.Email"
      ng-model-options="{debounce: 500, updateOn: 'blur'}"
      required class="form-control"
      placeholder="Enter email">

Mit der Option “debounce” kann man festlegen wie groß der Zeitraum in Millisekunden sein soll bis der eingegebene Wert tatsächlich ans Model gebunden werden soll. Dies ist z.B: hilfreich wenn man eine Lange Liste mit Werten direkt mit Hilfe von AngularJS filtern möchte und wenn der Filtervorgang immer direkt ausgelöst wird, kann dies durchaus zu Performanceproblemen führen. Mit der Option “debounce” kann man hier entgegen wirken, in dem der Filtervorgang verzögert ausgeführt wird.

Die Option “updateOn” gibt man an ab welchem Ereignis die Werte an das Model gebunden werden sollen, in meinem Beispiel erst wenn der Cursor das Eingabefeld verlässt. Dies eignet sich z.B. sehr gut um Email Adressen erst zu prüfen wenn der Nutzer mit der Eingabe auch fertig ist. Die “updateOn” Option ist daher sehr hilfreich für die Formvalidierung und macht hier vieles einfacher.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s