Nachdem alle notwendigen Werkzeuge, einschließlich Node.js, VS Code und Angular CLI, installiert wurden, ist es an der Zeit, das erste Projekt zu erstellen und zu sehen, wie Angular CLI den Entwicklungsprozess vereinfacht.

Was ist Angular CLI?

Es ermöglicht Folgendes:

• Schnelles Erstellen neuer Projekte mit vordefinierter Struktur;

• Generieren von Komponenten, Services und weiteren Projektelementen;

• Starten eines Entwicklungs-Servers zum Testen und Debuggen;

• Erstellen der Anwendung für den produktiven Einsatz.

Mit dem Angular CLI entfällt die manuelle Konfiguration von Dateien und Abhängigkeiten – alles wird automatisch eingerichtet.

Einrichten des Arbeitsbereichs

Vor dem Erstellen eines neuen Projekts einen geeigneten Speicherort auf dem Computer auswählen, an dem die Angular-Projekte gespeichert werden sollen.

Falls kein eigener Ordner für Projekte vorhanden ist, diesen mit folgendem Befehl erstellen:

Dieser Befehl erstellt einen neuen Ordner mit dem Namen projects am angegebenen Speicherort.

Als Nächstes zum neu erstellten Ordner navigieren, indem Sie folgenden Befehl ausführen:

Dieser Befehl öffnet den Ordner projects, sodass Sie darin arbeiten können.

Erstellen eines Angular-Projekts mit der CLI

Zum Erstellen eines neuen Angular-Projekts den folgenden Befehl im Projektordner ausführen:

• ng new – der Befehl zum Erstellen eines neuen Angular-Projekts;

• angular-app – der Projektname (es kann jeder beliebige Name verwendet werden).

Nach Ausführung des Befehls stellt die Angular CLI einige Einrichtungsfragen:

• Möchten Sie Angular Routing hinzufügen? – dieses Thema wird später behandelt, daher zunächst Yes auswählen;

• Welches Stylesheet-Format möchten Sie verwenden? – dies bestimmt den Typ der Stylesheets für das Projekt. Es wird empfohlen, CSS auszuwählen, aber jede passende Option ist möglich.

Nach Bestätigung dieser Optionen beginnt die Angular CLI mit der Installation der Abhängigkeiten. Dieser Vorgang kann einige Minuten dauern, da alle erforderlichen Pakete heruntergeladen und installiert werden.

Nach Abschluss der Einrichtung erscheint eine Erfolgsmeldung, die anzeigt, dass das Projekt erfolgreich erstellt wurde.

Jetzt können Sie das Projekt in VS Code öffnen, das wir zuvor installiert haben.

Im nächsten Kapitel betrachten Sie die vom Angular CLI generierte Ordner- und Dateistruktur im Detail, um zu verstehen, wie ein Angular-Projekt organisiert ist und wo sich die wichtigsten Teile Ihrer Anwendung befinden.