Dieser Artikel ist Teil des Angular Basic Tutorials. In diesem Kapitel werden wir ein neues Angular-Projekt aufsetzen.
Ziel
Am Ende dieses Tutorials haben wir unsere Entwicklungsumgebung aufgesetzt und ein neues Angular-Projekt aufgesetzt und gestartet.
Einleitung
Ein neues Angular-Projekt aufzusetzen ist dank der Angular CLI (Command Line Interface) super einfach. Komplexer wird es dann die Struktur zu verstehen und strukturiert mit der Entwicklung zu beginnen. Aber das werden wir uns Stück für Stück in dieser Tutorialreihe anschauen 😄
Um ein neues Angular-Projekt aufzusetzen und dieses beliebig von der Konsole aus starten zu können, sollte man zunächst die notwendigen Abhängigkeiten installieren.
Erste Schritte
Node.js installieren
Die ersten Schritte, um mit der Entwicklung zu starten, ist, sich die letzte Version von Node.js zu installieren. Damit bekommt man automatisch den Node Package Manager (npm), mit dem wir die Abhängigkeiten in unserem Projekt verwalten werden.
Eine Alternative zu npm ist yarn.
IDE installieren und einrichten
Als nächstes sollte man einen geeigneten Code-Editor (IDE) installieren. In diesem Tutorial werden wir den kostenfreien Text-Editor Visual Studio Code verwenden. Durch sein integriertes Plugin-System lässt sich VS Code um eine sehr gute Angular-Unterstützung zu einer vollwertigen IDE erweitern. Da ich persönlich mit VS Code arbeite, stelle ich in diesem Tutorial immer die Plugins vor, die ich installiert habe.
JetBrains bietet mit WebStorm eine sehr gute kostenpflichtige Alternative zu VS Code. Für Interessierte bietet JetBrains eine 30-tägige Testversion.
Zum Start benötigen wir das Plugin: Angular Language Service:
Angular CLI installieren
Da wir zu Beginn schon npm installiert haben, können wir diesen gleich verwenden, um die Angular CLI zu installieren. Dazu wird folgender Befehl in einer Konsole ausgeführt:
npm i @angular/cli -g
Aufgelöst bedeutet dies:
“Node Package Manager (npm) installiere (i) das folgende Paket (@angular/cli) global (-g), so dass es in jeder Konsole ausgeführt werden kann, unabhängig vom Kontext eines Angular Projektes.”
Mit der Angular CLI können wir nun Befehle zum Erzeugen, Starten, Testen etc. eines Projektes in einer Konsole ausführen.
Der Befehl lautet ng (aNGular) und häufig verwendete Optionen sind new, serve, test oder create. Diese Befehle werden uns im Laufe des Tutorials immer mal wieder begegnen.
Erzeugen einer Angular-Anwendung
Um eine neue Angular-Anwendung zu erzeugen, navigieren wir in einer Konsole in den Ordner, in dem der neue Projektordner erstellt werden soll. Dort führen wir dann folgenden Befehl aus: ng new
Daraufhin kann der Name des Projektes gewählt werden (bpsw. “AngularTutorial”):
? What name would you like to use for the new workspace and initial project? AngularTutorial
Auf die Frage ob Routing verwendet werden soll wird “Yes” angeben:
? Would you like to add Angular routing? Yes
Zuletzt wählen wir SCSS als Stylesheet Format:
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss]
Nach Durchlauf des Befehls sehen wir einen neuen Ordner mit dem Namen AngularTutorial. Darin liegt der Sourcecode und die Konfiguration des Projektes. Um das Projekt einmal zu starten, navigieren wir im Terminal in den Order AngularTutorial und führen dort den Befehl ng serve zum Starten der Anwendung aus.
Im Browser sollte automatisch ein Tab auf localhost:4200 geöffnet werden mit folgendem Inhalt:
Damit sind wir schon am Ende des ersten Tutorials angekommen. Wir haben eine Angular App erzeugt und gestartet. Angezeigt werden nun einige hilfreiche Links, die du dir gerne in Ruhe anschauen kannst. Einige davon werden wir in Zukunft auch hier verwenden.
Den Code zu diesem Teil des Tutorials findest du hier.