Читать книгу Angular - Manfred Steyer - Страница 56

Als Erstes werden wir eine Angular-Komponente für den besprochenen Anwendungsfall erstellen. Wechseln Sie dazu auf die Konsole. Führen Sie im Hauptverzeichnis der Anwendung den folgenden Befehl aus:

ng generate component flight-search

Die Befehle der CLI lassen sich abkürzen, die betrachtete Anweisung könnte man beispielsweise auch wie folgt formulieren: ng g c flight-search Mit dem in Kapitel 1 erwähnten Plug-in Angular Schematics lässt sich dieser CLI-Befehl auch direkt über Visual Studio Code anstoßen. Wählen Sie dazu die Anweisung Angular: Generate a component aus dem Kontextmenü des gewünschten Ordners.

Nach dem Auswählen dieser Anweisung stellt Ihnen Visual Studio Code mehrere Fragen. Die Frage nach dem Komponentennamen beantworten Sie analog zum oben diskutierten Befehl mit flight-search. Die anderen Fragen können Sie einfach mit Enter quittieren, um mit den Standardeinstellungen der CLI vorlieb zu nehmen.

Die Angular CLI generiert daraufhin mehrere Dateien für die gewünschte Komponente (siehe Abbildung 3-2).

Abbildung 3-2: Komponente zum Suchen nach Flügen mit der CLI generieren

Alle diese Dateien richtet die CLI im Ordner src/app/flight-search ein:

flight-search.component.html

Das Template der Komponente. Es bestimmt, wie Angular die Komponente darstellt.

flight-search.component.spec.ts

Ein Unit-Test für die Komponente. Details zum Thema Testen finden Sie in Kapitel 12.

flight-search.component.ts

Die TypeScript-Klasse, die die Komponente repräsentiert. Sie definiert das gewünschte Verhalten.

flight-search.component.scss

Die Stylesheet-Datei mit lokalen Styles für unsere Komponente.

Die Dateien flight-search.component.ts und flight-search.component.html werden wir in den nachfolgenden Abschnitten näher betrachten und für unsere Zwecke anpassen.