Beim Erstellen eines Projekts mit dem Angular CLI wird eine gut strukturierte Ordner- und Dateistruktur generiert. Diese Struktur spielt eine entscheidende Rolle bei der Organisation des Codes und macht die Entwicklung effizienter und skalierbarer.

In diesem Kapitel 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 Ihre Angular-Anwendung erforderlich sind.

Anwendungscode

Konfigurationsdateien

Zusätzliche Dateien

Ausführen einer Angular-Anwendung

Zum Starten Ihrer Angular-App öffnen Sie zunächst das Terminal. In VS Code können Sie folgende Tastenkombinationen verwenden:

• macOS: Cmd + J oder Cmd + `;

• Windows: Ctrl + J oder Cmd + `.

Alternativ wählen Sie im oberen Menü Ansicht → Terminal.

Führen Sie nun den folgenden Befehl aus:

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

Öffnen Sie die URL (http://localhost:4200/) in Ihrem Browser. Dort wird die Angular-Begrüßungsseite angezeigt.