Einrichten eines Angular-Projekts

Wenn du planst, eine Webanwendung mit Angular zu erstellen, ist es wichtig, von Anfang an eine solide Entwicklungsumgebung einzurichten. In diesem Artikel zeigen wir dir, wie du Schritt für Schritt ein neues Angular-Projekt aufsetzt und welche Tools dir dabei helfen.

Voraussetzungen für Angular

Bevor wir mit der Installation von Angular beginnen, müssen einige Voraussetzungen erfüllt sein:

Node.js: Angular benötigt Node.js, um Pakete zu installieren und Skripte auszuführen. Du kannst die neueste Version von Node.js von der offiziellen Website https://nodejs.org herunterladen und installieren.

npm (Node Package Manager): npm wird automatisch mit Node.js installiert und ist notwendig, um die Angular-Pakete und -Abhängigkeiten zu verwalten.

Um zu überprüfen, ob Node.js und npm korrekt installiert sind, kannst du die folgenden Befehle in deinem Terminal oder der Eingabeaufforderung ausführen:

node -v
npm -v

Diese Befehle sollten die installierten Versionen von Node.js und npm anzeigen. Wenn dies erfolgreich ist, kannst du mit der Installation von Angular fortfahren.

Installation des Angular CLI

Das Angular CLI (Command Line Interface) ist ein mächtiges Werkzeug, das dir dabei hilft, Angular-Projekte zu erstellen, zu konfigurieren und zu verwalten. Es vereinfacht viele Aufgaben wie das Erstellen von Komponenten, Services und Modulen sowie das Starten eines Entwicklungsservers.

Um das Angular CLI global auf deinem System zu installieren, führe folgenden Befehl in deinem Terminal aus:

npm install -g @angular/cli

Der Parameter `-g` sorgt dafür, dass das CLI systemweit verfügbar ist und von überall aus genutzt werden kann. Sobald die Installation abgeschlossen ist, kannst du überprüfen, ob das Angular CLI korrekt installiert wurde, indem du den folgenden Befehl ausführst:

ng version

Wenn die Installation erfolgreich war, wird die Version des Angular CLI sowie die unterstützten Versionen von Angular und TypeScript angezeigt.

Ein neues Angular-Projekt erstellen

Sobald das Angular CLI installiert ist, kannst du dein erstes Angular-Projekt erstellen. Dazu navigiere in das Verzeichnis, in dem du dein Projekt speichern möchtest, und führe folgenden Befehl aus:

ng new my-angular-app

Hierbei ist `my-angular-app` der Name deines Projekts. Das Angular CLI stellt dir nun einige Fragen, um das Projekt zu konfigurieren:

• Wollen Sie Angular-Routing hinzufügen?: Wenn deine Anwendung Routing benötigen wird, antworte mit Ja.
• Welches Stylesheet-Format möchtest du verwenden?: Du kannst zwischen CSS, SCSS, SASS, und anderen Optionen wählen. SCSS ist oft eine gute Wahl, da es erweiterte Styling-Möglichkeiten bietet.

Nachdem du diese Fragen beantwortet hast, erstellt das Angular CLI die Grundstruktur deines Projekts und installiert die benötigten Abhängigkeiten. Dies kann einige Minuten dauern, abhängig von deiner Internetverbindung.

Projektstruktur verstehen

Nach der Erstellung deines Projekts enthält dein Verzeichnis eine Reihe von Dateien und Ordnern. Hier sind die wichtigsten:

• src/: Dies ist das Hauptverzeichnis deines Projekts, in dem sich der Anwendungscode befindet.
• app/: Hier befinden sich die Hauptkomponenten und Module deiner Anwendung.
• assets/: In diesem Ordner kannst du Bilder, Schriftarten und andere statische Dateien speichern.
• environments/: In diesem Ordner kannst du verschiedene Konfigurationsdateien für unterschiedliche Umgebungen (z. B. Entwicklung, Produktion) speichern.
• node_modules/: Dieser Ordner enthält alle installierten npm-Pakete und Abhängigkeiten.

• angular.json: Diese Datei enthält die Konfiguration des Angular-Projekts, einschließlich Build-Einstellungen, Pfaden und mehr.
• package.json: Diese Datei listet alle Abhängigkeiten des Projekts auf und enthält Skripte, die mit npm ausgeführt werden können.

Den Entwicklungsserver starten

Um deine Anwendung im Browser zu sehen, musst du den Entwicklungsserver starten. Angular CLI bietet hierfür einen integrierten Entwicklungsserver, der deine Anwendung automatisch neu lädt, wenn du Änderungen an den Dateien vornimmst.

Wechsle in das Verzeichnis deines Projekts und starte den Server mit folgendem Befehl:

ng serve

Sobald der Server gestartet ist, zeigt das Terminal eine URL an, unter der die Anwendung erreichbar ist. Standardmäßig ist dies: http://localhost:4200/

Öffne diese URL in deinem Browser, und du solltest die Standard-Startseite deiner Angular-Anwendung sehen. Der Entwicklungsserver bleibt aktiv und überwacht alle Änderungen im Projekt. Wenn du den Code änderst, wird die Seite automatisch neu geladen, um die Änderungen anzuzeigen.

Wichtige Angular CLI-Befehle

Das Angular CLI bietet eine Reihe von Befehlen, die den Entwicklungsprozess erheblich vereinfachen. Hier sind einige der wichtigsten:

Komponente erstellen: Um eine neue Komponente zu erstellen, kannst du den folgenden Befehl verwenden: ng generate component component-name

Das CLI erstellt automatisch alle benötigten Dateien für die Komponente und fügt sie der richtigen Stelle im Projekt hinzu.

Service erstellen: Ähnlich kannst du auch Services erstellen: ng generate service service-name

Das Projekt bauen: Wenn deine Anwendung bereit für die Produktion ist, kannst du sie mit folgendem Befehl bauen:  ng build –prod

Dies erstellt eine optimierte und minimierte Version deiner Anwendung im `dist/` Ordner.

Fazit

Die Einrichtung eines Angular-Projekts ist dank des leistungsstarken Angular CLI einfach und effizient. Mit nur wenigen Befehlen kannst du eine vollständige Entwicklungsumgebung aufbauen, die alles bietet, was du für die Entwicklung moderner Webanwendungen benötigst. Durch das Verständnis der Projektstruktur und der Nutzung der CLI-Befehle bist du gut gerüstet, um deine Angular-Projekte schnell und erfolgreich umzusetzen.