Zum Inhalt

Doku zusammenfassung Fachgespräch

Diese Zusammenfassung bereitet dich optimal auf dein Fachgespräch (Modul 294) vor. Sie deckt die theoretischen Grundlagen ab und gibt dir konkrete Ansätze für die Beispielfragen.

1. Projektinitialisierung & Grundlagen

Wichtige Befehle (CLI)

  • ng new projektname: Erstellt ein neues Angular-Projekt.

  • ng serve -o: Startet den lokalen Entwicklungsserver und öffnet den Browser.

  • ng g c komponenten-name: Generiert eine neue Komponente (generate component).

  • npm install: Installiert alle Abhängigkeiten, die in der package.json gelistet sind.

Standalone Components vs. Modules

Seit Angular 17 ist standalone: true der Standard.

Feature Standalone: true (Modern) Standalone: false (Traditionell)
Struktur Komponente verwaltet ihre Imports selbst. Komponente muss in einem NgModule deklariert werden.
Vorteil Weniger "Boilerplate"-Code, einfacherer Einstieg. Bessere Kapselung in sehr großen Legacy-Projekten.
Einsatz Empfohlen für neue Projekte. Wird für ältere Projekte oder spezielle Bibliotheken genutzt.

2. Komponenten und Aufbau

Eine Komponente besteht typischerweise aus vier Dateien:

  1. .ts (TypeScript): Die Logik der Komponente (Datenverarbeitung, Methoden).

  2. .html (Template): Das Grundgerüst der Anzeige.

  3. .css / .scss (Styles): Das Design, das nur für diese Komponente gilt (View Encapsulation).

  4. .spec.ts: Die Datei für automatisierte Tests.

Projektstruktur:

  • src/app/: Hier liegt der gesamte Code.

  • assets/: Für Bilder, Icons und statische Dateien.

  • main.ts: Der Einstiegspunkt der Applikation.

3. Datenbindung und Direktiven

Datenbindung (Data Binding)

Es gibt verschiedene Wege, wie Logik und Template kommunizieren:

  • Interpolation {{ value }}: Zeigt Daten aus der TS-Datei im HTML an (One-way).

  • Property Binding [property]="value": Übergibt Werte an HTML-Attribute (z. B. [disabled]="isValid").

  • Event Binding (click)="method()": Reagiert auf Benutzerinteraktionen.

  • Two-way Binding [(ngModel)]="value": Synchronisiert Daten in beide Richtungen (Eingabefelder).

Attribute Directives & Modern Control Flow

  • [ngClass] / [ngStyle]: Ändert dynamisch CSS-Klassen oder Styles basierend auf Variablen.

  • @if: Zeigt ein Element nur an, wenn eine Bedingung wahr ist (ersetzt das alte *ngIf).

  • @for: Wiederholt ein Element für jedes Item in einer Liste (ersetzt *ngFor).

4. Routing und Sicherheit

Routing einrichten

In der Datei app.routes.ts werden Pfade definiert:

TypeScript

{ path: 'contact', component: ContactComponent }

  • <router-outlet>: Der Platzhalter im HTML, wo die geroutete Komponente erscheint.

  • routerLink: Attribut für Links (statt href), um das Neuladen der Seite zu verhindern.

Sicherheit (Guards)

Um Routen zu schützen (z. B. Admin-Bereich), nutzt man Guards. Ein Guard prüft eine Bedingung (z. B. isLoggedIn oder role === 'admin'). Falls false zurückgegeben wird, wird der Zugriff verweigert und der User z. B. zum Login umgeleitet.

5. Formulare & Validierung

Angular bietet Reactive Forms (empfohlen für komplexe Validierung) und Template-driven Forms.

Beispiel Validierung:

TypeScript

contactForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  message: new FormControl('', Validators.minLength(10))
});

Im HTML kann man mit formControlName darauf zugreifen und Fehlermeldungen anzeigen, wenn das Feld "dirty" (berührt) und "invalid" ist.

Beispielfragen für das Fachgespräch

1. Wie würden Sie ein Formular sinnvoll einbauen (Name, Tel, E-Mail, Anfrage)?

"Ich würde Reactive Forms verwenden, da sie besser testbar sind. Ich erstelle eine FormGroup im TypeScript und verknüpfe sie im HTML. Für die E-Mail nutze ich den eingebauten Validators.email, für die Pflichtfelder Validators.required."

2. Welche Komponenten würden Sie erstellen, um die Funktionalität modular aufzubauen?

"Ich würde das Formular in eine eigene ContactFormComponent auslagern. Falls es nach dem Absenden eine Bestätigung gibt, könnte dies eine SuccessMessageComponent sein. So bleibt die AppComponent sauber."

3. Welche Routen würden Sie erstellen?

"Ich würde eine Route '' (Home), '/contact' (für das Formular) und eventuell '/admin' für die Verwaltung der Anfragen erstellen. Den Admin-Bereich würde ich mit einem CanActivate-Guard schützen."

Möchtest du, dass ich für einen dieser Punkte (z. B. den Control Flow @if/@for) ein konkretes Code-Beispiel erstelle, das du in deinem Projekt zeigen kannst?