aufgebaut ist. Danach gehen wir im Beispielprojekt ausführlich auf alle Details des Angular-Frameworks ein.
StackBlitz zum schnellen Setup
Damit wir uns in diesem Kapitel noch nicht damit beschäftigen müssen, ein Angular-Projekt aufzusetzen, wollen wir die Online-Plattform StackBlitz nutzen. StackBlitz ist eine Entwicklungsumgebung für Webanwendungen, die vollständig im Browser läuft. Wenn Sie bereits Visual Studio Code auf dem Desktop einsetzen, wird Ihnen die Oberfläche von StackBlitz bekannt vorkommen: Der Editor basiert auf Visual Studio Code. StackBlitz integriert dazu einen Webserver, sodass wir die entwickelte Anwendung sofort im Browser sehen können. Die Plattform eignet sich sehr gut zum schnellen Prototyping und zum Ausprobieren von Features – also genau passend für diesen Schnellstart. Für eine vollständige Anwendung empfehlen wir Ihnen allerdings, das Tooling auf Ihrer lokalen Maschine aufzusetzen.
Legen wir los! Rufen Sie zuerst die Startseite von StackBlitz auf:
Direkt von der Startseite können wir eine Technologie wählen, in der unser Startprojekt angelegt werden soll.
Wir entscheiden uns bei dieser Auswahl natürlich für Angular! Die Startseite von StackBlitz kann sich im Laufe der Zeit ändern, deshalb können Sie auch den folgenden Link nutzen, um eine Angular-Anwendung mit StackBlitz zu erzeugen:
Abb. 1–1 Die Plattform StackBlitz
https://ng-buch.de/b/stackblitz-angular
Wir erhalten nun ein vollständiges Angular-Projekt, das theoretisch auch lokal mithilfe der Angular CLI lauffähig ist, die wir uns im Kapitel 3 ab Seite 21 noch genauer ansehen werden. Auf der linken 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
