Читать книгу Angular - Ferdinand Malcher - Страница 20

»Scaffolding an Angular project is now easier than ever with StackBlitz. In one click, you can run and edit any Angular CLI project in your browser – powered by Visual Studio Code. You will feel right at home, trust me!«

Dominic Elm

(Mitglied im StackBlitz-Team und Mitgründer von Machinelabs.ai)

Am besten wird man mit einem neuen Framework vertraut, wenn man die Konzepte und Beispiele direkt selbst ausprobiert. Hierfür wollen wir eine vorbereitete Angular-Anwendung im Browser einsetzen. Wir wollen an diesem Beispiel zunächst nur betrachten, wie eine solche Anwendung 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:

https://stackblitz.com

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.