Open Source im professionellen Einsatz
Linux-Magazin 01/2017
981

Der Zeit voraus

Der Webbrowser greift zunächst über die »index.html« (Listing 2) auf die Anwendung zu. Zusätzliche Pakete für die Anwendung definiert die Datei »systemjs.config.js« . Intern nutzt Angular einen Compiler, der den Anwendungscode in einen interaktiven DOM-Baum umwandelt. Diesen so genannten View Source erzeugt er, wie Abbildung 3 zeigt, nicht nur Just in Time (JiT) im Browser, sondern bereits vorher auf dem Webserver, Ahead of Time (AoT, [6]).

Listing 2

index.html

01 <html>
02   <head>
03     <title>Wetterstation</title>
04     <script src="node_modules/core-js/client/shim.min.js"></script>
05     <script src="node_modules/zone.js/dist/zone.js"></script>
06     <script src="node_modules/reflect-metadata/Reflect.js"></script>
07     <script src="node_modules/systemjs/dist/system.src.js"></script>
08     <script src="systemjs.config.js"></script>
09     <script>
10       System.import('app').catch(function(err){ console.error(err); });
11     </script>
12     <link rel="stylesheet" href="styles.css">
13   </head>
14   <body>
15     <myApp>Laden ...</myApp>
16   </body>
17 </html>

Diese Methode spart Rechenzeit im produktiven Betrieb, in der User die Anwendung zigfach vom Webserver abrufen. Glaubt man den Machern von Angular 2, initialisiert eine Anwendung unter dem JiT-Compiler fast viermal schneller als unter Angular 1 [7].

Die eingebundene CSS-Datei »styles.css« speichert Formatierungsangaben unter CSS 3. Ein Watch-Prozess behält stets das Projektverzeichnis im Auge und veranlasst bei jeder Änderung, die ».ts« -Dateien neu zu kompilieren und die App im Browser selbsttätig neu zu laden.

Abbildung 3: Der AoT-Compiler (unten) generiert den View Source bereits auf dem Server, der JiT-Compiler (oben) erst im Browser. Die Pfeile beschreiben die Umwandlungsschritte.

Listing 2 zeigt die Datei »index.html« aus dem Wetterstation-Projekt. Die Anwendung verwendet die Originalversion aus dem Schnellstarter-Modul fast unverändert. Die Zeilen 4 bis 8 binden die benötigten Javascript-Ressourcen ein. Zeile 10 startet die App, indem sie die Datei »app/main.js« aufruft. Zeile 12 bindet das Stylesheet ein. Um die benutzerdefinierte Direktive »myApp« in Zeile 15 kümmert sich die Component aus Listing 4. Sie ersetzt »myApp« durch ein HTML-Fragment aus dem Template in Listing 3.

Sie ewig zu binden

Dieses Template steckt in der Datei »app/app.component.html« . Es verwendet die als Direktiven bezeichneten Spezial-Tags (etwa in Zeile 3), um Anwendungsdaten aus der Component zu ziehen.

Abbildung 4 wirft einen genaueren Blick auf die Binding-Mechanismen unter Angular 2. Der Bereich links unter »Template« listet die Direktiven auf. Sie verweisen entweder auf die Variable »val« oder die Callback-Funktion »chg()« aus der »Component« rechts.

Abbildung 4: Die Binding-Mechanismen zwischen Template und Component unter Angular 2.

Die Pfeilrichtungen zeigen die Wege der geänderten Werte und Zustände an. Speichert die Component etwa den Wert 3 in »val« , ändert sich der Ausdruck »{{val}}« im Template auch auf 3. Gleiches gilt für die Textfelder, die die Attribut-Direktiven in der Form »[ngModel]="val"« oder »[(ngModel)]="val"« tragen.

Rückgabewerte von Funktionen aktualisiert Angular 2 ebenfalls. Das zeigt etwa Zeile 3 in Listing 3. Sie aktualisiert die mit der Funktion »avg()« berechneten Mittelwerte von Temperatur und Druck (Abbildung 1), sobald die App einen weiteren Satz an Messwerten speichert.

Die neue Attribut-Direktive »ngModel« bietet im Gegensatz zu ihrem Vorgänger »ng-model« (man beachte den Bindestrich) auch One-Way-Bindings in Form von »[ngModel]« und »(ngModel)« . Die Kombination »[(ngModel)]« vereinbart für die beiden Formularfelder in den Zeilen 5 und 6 jeweils Two-Way-Bindings wie unter Angular 1. Eventuell haben die kritischen Diskussionen um Two-Way-Bindings die Macher von Angular dazu bewogen, wie Konkurrent React [8] One-Way-Bindings nachzurüsten.

Zeile 7 von Listing 3 setzt runde Klammern ein, um die Callback-Funktion »add()« in der Component aufzurufen. Die in Angular 1 verwendete Direktive »ng-submit« ist Geschichte. Um die Arbeit von »ng-repeat« kümmert sich nun »ngFor« (Zeile 15). Der Sternoperator wandelt das markierte »tr« -Element zusammen mit seinen Kindelementen in ein Master-Template um, das die App pro Listenelement einmalig gegen den Wert der Laufvariablen aufrechnet.

Listing 3

app/app.component.html

01 <div id="station">
02   <h1>Wetterstation</h1>
03   <div id="avg">Durchschnitt: {{avg('temp')}} °C und {{avg('press')}} mBar</div>
04   <form>
05     <input type="number" [(ngModel)]="model.temp" name="temp" required step="0.1" size="30" placeholder="°C">
06     <input type="number" [(ngModel)]="model.press" name="press" required size="30" placeholder="mBar">
07     <button (click)="add()" value="add">Add</button>
08   </form>
09   <table>
10   <tr>
11     <th>Datum</th>
12     <th>Temperatur</th>
13     <th>Druck</th>
14   </tr>
15   <tr *ngFor="let data of datas">
16     <td>{{data.date | date:'dd.MM.yyyy HH:mm'}}</td>
17     <td>{{data.temp}}</td>
18     <td>{{data.press}}</td>
19     </tr>
20   </table>
21 </div>

Im Wert der Attribut-Direktive »ngFor« deklariert das Schlüsselwort »let« die Laufvariable »data« , der Operator »of« iteriert über die Werte der Liste »datas« .

Um die Werte der Laufvariablen »data« zu extrahieren, nutzen die Zeilen 16 bis 18 den Interpolations-Operator (»{{...}}« ). Die erste Zeile reicht den Wert der Komponente »date« per Pipe (»|« ) an die Direktive »date« weiter und formatiert das Datum Locale-abhängig.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Angular JS

    Angular JS ist der aktuelle Shootingstar unter den Webframeworks. Die Javascript-Bibliothek bringt bewährte Konzepte der Rich-Client-Entwicklung in den Browser und entwirrt Ansichten und Daten.

  • Angular 2 ist fertig

    Nach längerer Entwicklungszeit hat Google in seinem Hauptquartier die finale Version seines Framework für Webanwendungen, Angular 2, veröffentlicht. Das dürfte im Laufe der kommenden Jahre Angular 1 ablösen und fokussiert sich auf Mobilgeräte und moderne Browser.

  • Googles Angular arbeitet in Version 1.3.0 schneller

    Googles Javascript-Framework Angular bringt in Version 1.3.0 einige "erwähnenswerte neue Features" mit, reduziert den Speicherverbrauch und verbessert die Performance.

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Meteor 1.2 unterstützt Ecmascript 2015, React und Angular

    Meteor, das Javascript-Framework für Anwendungsentwicklung, hat mit Version 1.2 das nach eigener Aussage bislang umfangreichste und "ambitionierteste" Release veröffentlicht.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.