Angular Setup & Installation

Zeit, loszulegen! In diesem Artikel installieren wir Angular und erstellen dein erstes Angular-Projekt. 🚀

📋 In diesem Artikel lernst du:

• Node.js und npm installieren
• Angular CLI installieren
• Dein erstes Angular-Projekt erstellen
• Die Projektstruktur verstehen
• Den Development Server starten
• Deine erste Änderung machen

Voraussetzungen

Was du brauchst:

1. Einen Computer (Windows, Mac oder Linux)
2. Ein Code-Editor (VS Code empfohlen)
3. Einen Browser (Chrome empfohlen für DevTools)
4. Grundlegende Terminal/Command Line Kenntnisse

Keine Sorge: Ich erkläre jeden Schritt!

Schritt 1: Node.js und npm installieren

Angular läuft auf Node.js und nutzt npm (Node Package Manager) für Pakete.

Node.js installieren:

1. Gehe zu: https://nodejs.org/
2. Download: "LTS" Version (Long Term Support) ✅
3. Installiere: Den Installer durchlaufen (Standard-Einstellungen OK)

Installation prüfen:

Öffne dein Terminal (cmd, PowerShell, oder Terminal auf Mac) und tippe:

node --version

Erwartete Ausgabe:

v18.17.0  (oder höher)

npm --version

Erwartete Ausgabe:

9.6.7  (oder höher)

✅ Wenn du Versionsnummern siehst, ist Node.js installiert!

'node' is not recognized as an internal or external command

Schritt 2: Angular CLI installieren

Die Angular CLI (Command Line Interface) ist dein wichtigstes Tool!

CLI installieren:

npm install -g @angular/cli

Erklärung:

• npm install - Installiert ein Paket
• -g - Global (überall auf dem Computer verfügbar)
• @angular/cli - Das Angular CLI Paket

Das dauert 1-2 Minuten. Warte bis fertig! ☕

Installation prüfen:

ng version

Erwartete Ausgabe:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.0
Node: 18.17.0
Package Manager: npm 9.6.7

✅ Wenn du das Angular-Logo siehst, ist die CLI installiert!

ng new my-app        # Neues Projekt erstellen
ng serve             # Dev-Server starten
ng generate component my-comp  # Komponente erstellen
ng build             # Projekt bauen (Production)
ng test              # Tests ausführen

Schritt 3: Dein erstes Angular-Projekt erstellen

Jetzt wird's spannend! Wir erstellen dein erstes Projekt.

Projekt erstellen:

ng new meine-erste-app

Angular CLI fragt dich ein paar Dinge:

Frage 1: "Would you like to add Angular routing?"

? Would you like to add Angular routing? (y/N)

Antwort: N (Nein - nicht für den Anfang)

Frage 2: "Which stylesheet format would you like to use?"

? Which stylesheet format would you like to use?
  CSS
  SCSS
  Sass
  Less

Antwort: Wähle CSS (↑↓ Pfeiltasten, Enter)

Dann passiert etwas Magisches:

CREATE meine-erste-app/README.md (1063 bytes)
CREATE meine-erste-app/.editorconfig (274 bytes)
CREATE meine-erste-app/.gitignore (548 bytes)
CREATE meine-erste-app/angular.json (2948 bytes)
...
✔ Packages installed successfully.
    Successfully initialized git.

Das dauert 2-3 Minuten! ☕ Die CLI installiert alle nötigen Pakete.

In das Projekt wechseln:

cd meine-erste-app

Du bist jetzt im Projektordner!

Schritt 4: Projektstruktur verstehen

Lass uns schauen, was Angular für dich erstellt hat:

meine-erste-app/
│
├── node_modules/         ← Alle Pakete (GROSS, nicht anfassen!)
├── src/                  ← Dein Code lebt hier! ⭐
│   ├── app/              ← Deine Angular App
│   │   ├── app.component.ts     ← Haupt-Komponente (TypeScript)
│   │   ├── app.component.html   ← Template (HTML)
│   │   ├── app.component.css    ← Styles (CSS)
│   │   ├── app.component.spec.ts  ← Tests
│   │   └── app.module.ts        ← Haupt-Modul
│   │
│   ├── assets/           ← Bilder, Fonts, etc.
│   ├── index.html        ← Die EINE HTML-Seite
│   ├── main.ts           ← Entry Point
│   └── styles.css        ← Globale Styles
│
├── angular.json          ← Angular Config
├── package.json          ← npm Dependencies
├── tsconfig.json         ← TypeScript Config
└── README.md

Die wichtigsten Dateien:

1. src/index.html - Die eine HTML-Seite

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MeineErsteApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>  <!-- Angular wird hier geladen! -->
</body>
</html>

<app-root> ist der Platzhalter für deine App!

2. src/app/app.component.ts - Die Haupt-Komponente

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',      // HTML-Tag Name
  templateUrl: './app.component.html',  // Template
  styleUrls: ['./app.component.css']    // Styles
})
export class AppComponent {
  title = 'meine-erste-app';  // Eine Property
}

Erklärung:

• @Component - Decorator (macht die Klasse zu einer Komponente)
• selector - Der HTML-Tag Name (<app-root>)
• templateUrl - Wo ist das HTML Template?
• styleUrls - Wo sind die CSS-Styles?
• title - Eine Variable die im Template genutzt werden kann

3. src/app/app.component.html - Das Template

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<!-- Viel mehr Angular-Beispiel-Code... -->

{{ title }} = Interpolation! Zeigt den Wert der title Variable.

4. src/app/app.module.ts - Das Haupt-Modul

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent  // Unsere Komponente
  ],
  imports: [
    BrowserModule  // Browser-spezifische Module
  ],
  providers: [],
  bootstrap: [AppComponent]  // Start-Komponente
})
export class AppModule { }

Das Modul bündelt alles zusammen!

Schritt 5: Development Server starten

Zeit, deine App zu sehen! 🎉

Server starten:

ng serve

Oder mit automatischem Browser-öffnen:

ng serve --open

Kurz-Version:

ng serve -o

Was passiert?

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
polyfills.js          | polyfills     |  90.20 kB |
main.js               | main          |  23.14 kB |
styles.css            | styles        |   0 bytes |

                      | Initial Total | 113.34 kB

Application bundle generation complete. [3.456 seconds]
✔ Compiled successfully.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✅ Server läuft auf: http://localhost:4200/

Im Browser öffnen:

Öffne deinen Browser und gehe zu:

http://localhost:4200/

Du siehst jetzt die Angular Welcome-Seite! 🎉

ng serve --port 3000

ng serve --host 0.0.0.0

Schritt 6: Deine erste Änderung

Lass uns etwas ändern!

Öffne: src/app/app.component.ts

Ändere die title:

export class AppComponent {
  title = 'Meine coole Angular App! 🚀';
}

Speichere die Datei (Strg + S)

Öffne: src/app/app.component.html

Lösche ALLES und ersetze es mit:

<div style="text-align: center; padding: 50px;">
  <h1>{{ title }}</h1>
  <p>Willkommen zu meinem ersten Angular-Projekt!</p>

  <button (click)="sayHello()">
    Klick mich!
  </button>

  <p *ngIf="message">{{ message }}</p>
</div>

Zurück zu: src/app/app.component.ts

Füge die sayHello Methode hinzu:

export class AppComponent {
  title = 'Meine coole Angular App! 🚀';
  message = '';  // Neue Property

  sayHello() {
    this.message = 'Hallo von Angular! 👋';
  }
}

Deine komplette Datei sieht so aus:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Meine coole Angular App! 🚀';
  message = '';

  sayHello() {
    this.message = 'Hallo von Angular! 👋';
  }
}

Speichern und im Browser schauen! 🎉

Was du siehst:

• Eine Überschrift
• Einen Text
• Einen Button
• Beim Klick erscheint eine Nachricht!

🎊 Herzlichen Glückwunsch! Du hast gerade:

• ✅ Interpolation verwendet ({{ }})
• ✅ Event Binding verwendet ((click))
• ✅ Conditional Rendering verwendet (*ngIf)
• ✅ Eine interaktive Angular-App erstellt!

Port 4200 is already in use.

Error: src/app/app.component.ts:15:3 - error TS...

Quiz

Nächste Schritte

Im nächsten Artikel:

• Komponenten im Detail verstehen
• Eigene Komponenten erstellen
• Component Lifecycle
• Parent-Child Kommunikation

➡️ Weiter zu: Angular Components Basics

Gut gemacht! Dein Angular-Setup läuft! 💪