Seite 2: Beispiel

Inhaltsverzeichnis

Ein erstes Beispiel

Um einen ersten Überblick über Angular 2 zu geben, betrachtet dieser Artikel eine einfache, mit dem Framework geschriebene Anwendung zum Suchen nach Flügen. Den Quelltext dazu stellt der Autor auf GitHub bereit. Da sich Angular 2 beim Verfassen des vorliegenden Textes erst in der Alpha-Phase befand, ist es wahrscheinlich, dass sich bis zur finalen Veröffentlichung noch Details ändern. Nichtsdestotrotz lässt sich den gezeigten Beispielen bereits entnehmen, wo die Reise hin geht und wie sich Angular 2 verwenden lassen wird. Das Beispiel ist mit AtScript beziehungsweise TypeScript geschrieben und wird zur Laufzeit nach ECMAScript 5 transpiliert.

Die im Folgenden gezeigte Datei flugsuchen.js, beheimatet die Klasse FlugSuchen, die die meiste Logik der Beispielanwendung aufweist.

// flugsuchen.js
import {Component, Template} from 'angular2/angular2';
import {FormDirectives, ControlGroup, Control} from 'angular2/angular2';
import {Foreach, If} from 'angular2/angular2';
import {FlugService} from 'flugService';    

@Component({ selector: 'flugsuchen', componentServices: [FlugService] })
@Template({ url: 'flugsuchen.html', directives: [Foreach, If,
 FormDirectives] })
export class FlugSuchen {

    fluege;
    selectedFlug;
    message;
    
    constructor(flugService: FlugService) {
        this.fluege = [];
        this.flugService = flugService;
    }
    
    flugSuchen() {
             this
                .flugService.find("Graz", "Hannover")
                .then((fluege) => { 
                    this.fluege = fluege;
                    this.message = fluege.length + " Flüge geladen!";
                });
    }

    selectFlug(flug) {
        this.selectedFlug = flug;
    }
    
}

Die aus ECMAScript 6 übernommenen import-Anweisungen am Beginn des Listings kümmern sich um das Einbinden der benötigten Klassen und Funktionen aus anderen Modulen. Dabei muss man sich vor Augen halten, dass bei ES 6 jede JavaScript-Datei ein eigenes Modul mit einem eigenen Namensraum bildet. Die meisten Konstrukte importiert das Beispiel aus der Datei angular2/angular2.js, wobei die import-Klausel die Dateiendung ".js" nicht explizit enthält. Durch die Nutzung der Klausel entfällt auch die Notwendigkeit, sämtliche benötigte JavaScript-Dateien über Skriptelemente der Single-Page-Anwendung zu referenzieren.

Da die Klasse FlugSuche mit dem Schlüsselwort export versehen wurde, können andere Module auf sie zurückgreifen, sofern diese sie mit import referenzieren. Die betrachtete Klasse wurde mit den Annotationen @Component und @Template versehen. Erstere legt fest, dass es sich um eine Web Component handelt. Das Attribut selector definiert über einen CSS-Selektor, welches HTML-Konstrukt die Komponente repräsentiert. Mit ihrem Wert definiert sie, dass der Entwickler durch das Hinterlegen eines HTML-Elements flugsuchen die Komponente in der Single-Page-Anwendung platzieren kann. Mit componentServices gibt @Component die Namen von Typen, die der Dependency-Injection-Mechanismus von Angular 2 in die Komponente injizieren soll, über ein Array an. Das ist das Gegenstück zum Registrieren von Services in Angular 1.x. Um die Informationen nicht pro Komponente angeben zu müssen, wäre es sinnvoll, sie, wie in Version 1.x üblich, an einer zentralen Stelle zu registrieren. Dazu müssen Entwickler die Informationen in einem Array, das sie aus einem Modul importieren, hinterlegen und darauf verweisen.

Die Annotation @Template gibt über url die Vorlage für die View an, die die Komponente darstellt. Letztere findet im nächsten Abschnitt nähere Betrachtung. Die Eigenschaft directives verweist über ein Array auf die Direktiven, die diese View verwenden kann. Das lässt sich mit dem Registrieren von Direktiven in Version 1.x vergleichen. Wer das, wie aus AngularJS 1.x gewohnt, an einer zentralen Stelle erledigen möchte, kann es zum Beispiel in einem eigenen Modul über ein Array machen. Das ist im Anschluss lediglich zu importieren und via directives zu referenzieren.

Dem Konstruktor der Klasse FlugSuchen lässt sich ein FlugService-Objekt injizieren. Dabei handelt es sich um ein Objekt, das eine Methode find zum Suchen von Flügen anbietet. Sie nutzt wiederum das altgediente XmlHttpRequest-Objekt. Die empfangenen Daten parst die Methode via JSON.parse, bevor sie sie über ein Promise veröffentlicht.

Die Methode flugSuchen der betrachteten Komponente ruft diese Methode des FlugServices auf und hinterlegt die damit zu Tage geförderten Flüge in der Eigenschaft fluege. Darüber hinaus hinterlegt sie in der Eigenschaft message eine Statusmeldung. Um einen der gefundenen Flüge auswählen und entsprechend markieren zu können, bietet die Komponente die Methode selectFlug an. Sie nimmt den Flug der Wahl entgegen und verstaut ihn in einer Eigenschaft selectedFlug.