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 die Produktionsbereitstellung.

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

Um ein neues Angular-Projekt zu erstellen, 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 legt den Typ der Stylesheets für das Projekt fest. Es wird empfohlen, CSS zu wä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 bestätigt, 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 erhalten Sie einen detaillierten Einblick in die von der Angular CLI generierte Ordner- und Dateistruktur, um zu verstehen, wie ein Angular-Projekt organisiert ist und wo sich die wichtigsten Bestandteile Ihrer Anwendung befinden.