Angular. Ferdinand Malcher
Seite können wir den Quellcode editieren, auf der rechten Seite sehen wir direkt eine Vorschau der Anwendung. StackBlitz aktualisiert die Vorschau automatisch, sobald wir Änderungen vornehmen.
StackBlitz und Drittanbieter-Cookies
Es kann sein, dass die Vorschau auf der rechten Seite nicht korrekt funktioniert. In diesem Fall überprüfen Sie am besten, ob in Ihrem Browser Drittanbieter-Cookies geblockt werden. Wenn Sie die Cookie-Einstellungen nicht global abändern wollen, so hilft eine Ausnahmeregel. Für den Browser Chrome geht dies wie folgt:
1 Rufen Sie chrome://settings/content/cookies auf. Die Adresse muss aus Sicherheitsgründen stets manuell eingegeben werden.
2 Betätigen Sie Allow und danach Add.
3 Erlauben Sie für [*.]stackblitz.io die Cookies.
Der Browser Brave wird in der Standardeinstellung keine Vorschau zeigen, hier müssen Sie das »Shield« für die Domain stackblitz.com deaktivieren. Mehr Informationen erhalten Sie im dazugehörigen GitHub-Issue.a
a https://ng-buch.de/b/4 – GitHub: StackBlitz preview doesn’t work on Chrome
Abb. 1–2 Ausgabe im Browser
Projekt in StackBlitz bearbeiten
StackBlitz legt automatisch ein neues Projekt mit einem zufälligen Namen an. Sie sehen diesen Namen am linken oberen Rand und in der URL. Dieses Projekt können Sie jederzeit bearbeiten. Bevor Sie die Seite verlassen, sollten Sie jedoch alle Änderungen speichern – mit dem Save-Knopf am oberen Rand oder wie üblich mit der Tastenkombination
Aufbau einer Angular-Anwendung
Wir schauen uns nun einmal schrittweise an, wie unsere neue Angular-Anwendung aufgebaut ist. Sie besteht aus den folgenden wichtigen Dateien:
Polyfill bzw. Shim
Als Shim oder Polyfill bezeichnet man in der Webwelt eine Softwarebibliothek, die fehlende Funktionalitäten im Browser zur Verfügung stellt. In der Vergangenheit ging es bei Polyfills häufig darum, standardisierte Funktionen in alten Versionen des Internet Explorers nachzurüsten. Mithilfe von Polyfills können aber auch Funktionen hinzugefügt werden, die gerade erst standardisiert wurden bzw. noch ein Vorschlag sind und daher noch von keinem Browser vollständig unterstützt werden.
Abb. 1–3 Grundaufbau einer Angular-Anwendung
1.1Das HTML-Grundgerüst
Da wir mit Angular in den meisten Fällen Webanwendungen entwickeln, beginnt unsere Reise ganz klassisch mit einer HTML-Seite, die vom Browser geladen wird. Die Datei index.html besteht üblicherweise aus einem einfachen HTML-Grundgerüst, trägt aber immer eine Besonderheit: das Element <my-app>. Angular verarbeitet dieses Element und rendert an dieser Stelle den Inhalt der zugehörigen Komponente, unsere Root-Komponente AppComponent. Solange Angular noch lädt, wird der ursprüngliche Inhalt des Elements angezeigt, hier der Text loading.
<my-app>loading</my-app>
Listing 1–1 Die Datei src/index.html
1.2Die Startdatei für das Bootstrapping
Zu einer dynamischen Webseite gehört mehr als nur ein HTML-Grundgerüst. Dafür sorgt die Datei main.ts: Sie wird beim Build der Anwendung automatisch in die index.html eingebunden und katapultiert uns direkt in die Angular-Welt.
// ...
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.then(ref => { /* ... */ })
.catch(err => console.error(err));
Listing 1–2 Die Datei src/main.ts
Bootstrapping: die Anwendung zum Leben erwecken platformBrowser-Dynamic für den Browser
Die einzige Aufgabe der Datei ist es, das zentrale Angular-Modul AppModule zu starten. Das Starten der Anwendung nennt man in der Angular-Welt »Bootstrapping«. Das Bootstrapping ist spezifisch für die Zielplattform (z. B. Web/Hybrid/Nativ) und findet daher in einer eigenen Datei statt, um die Anwendung unabhängig von der Plattform zu halten. Diese Details sind für uns bis hierhin noch gar nicht wichtig. Wir nutzen zunächst nur die Plattform platformBrowserDynamic, denn wir wollen eine Webanwendung für den Browser entwickeln.
Achtung: Bootstrap hat nichts mit CSS zu tun!
Auch wenn wir im Zusammenhang mit Webanwendungen schnell an das CSS-Framework Bootstrap denken, besteht kein Zusammenhang mit dem Bootstrapping einer Angular-Anwendung.
1.3Das zentrale Angular-Modul
Der Decorator @NgModule()
Unsere nächste Station ist das zentrale Angular-Modul in der Datei app.module.ts im Unterverzeichnis app. Eine Angular-Anwendung hat immer ein solches zentrales Modul. Hier werden alle Bestandteile der Anwendung gebündelt, also alle Komponenten, Services, Feature-Module usw. Momentan besitzen wir genau ein Modul, das wird sich aber im Verlauf dieses Buchs noch ändern. Man erkennt ein Angular-Modul daran, dass es mit dem Decorator @NgModule() markiert ist.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Listing 1–3 Die Datei src/app/app.module.ts
Im