Beim Erstellen eines Projekts mit dem Angular CLI wird eine übersichtliche Ordner- und Dateistruktur generiert. Diese Struktur ist entscheidend für die Organisation des Codes und ermöglicht eine effiziente und skalierbare Entwicklung.

Im Folgenden werden die wichtigsten Ordner und Dateien vorgestellt, die beim Anlegen eines neuen Angular-Projekts automatisch erstellt werden.

Projektstruktur

Beim Ausführen des Befehls ng new angular-app erzeugt das Angular CLI die folgende Struktur:

📂 src/ – Anwendungsquellcode.

Dieser Ordner enthält die Kern-Dateien und Konfigurationen, die für die Angular-Anwendung erforderlich sind.

Anwendungscode

Konfigurationsdateien

Zusätzliche Dateien

Ausführen einer Angular-Anwendung

Zum Starten der Angular-App zunächst das Terminal öffnen. In VS Code können folgende Tastenkombinationen verwendet werden:

• macOS: Cmd + J oder Cmd + `;

• Windows: Ctrl + J oder Cmd + `.

Alternativ im oberen Menü Ansicht → Terminal auswählen.

Anschließend den folgenden Befehl ausführen:

Dieser Befehl kompiliert das Projekt und startet einen lokalen Entwicklungsserver. Nach Abschluss des Vorgangs zeigt das Terminal eine Meldung mit einer URL an:

Die URL (http://localhost:4200/) im Browser öffnen, um die Angular-Begrüßungsseite anzuzeigen.