Fachgespräch M294 - Cheat Sheet

Facts

Datum	Zeit	Dauer	Bewertung
Di, 13.01.2026	Block 7	8-10 Min	80% FG / 20% Theorie

Theorie-Blitztabelle (Spickzettel)

Begriff	Metapher / Erklärung
Service	Der Kellner / Ausweis. Logik & Daten. Verwaltet Zustand (z.B. "Ist eingeloggt?").
Guard	Der Türsteher. Sicherheit für Routen. Fragt den Service (Ausweis), ob man rein darf.
Routing-Ort	app.routes.ts (Der Plan) & <router-outlet> (Der Ort der Anzeige).
Standalone	Kein Modul nötig. "Selbstständig". Importiert seine Abhängigkeiten selbst.

---

1. Projektstart

Befehl	Beschreibung
npm install	Installiert Dependencies (node_modules)
ng new <name>	Erstellt neues Projekt
ng g c <name>	Erstellt Komponente
ng serve	Startet Dev-Server

Details: Standalone & Initialisierung

Standalone Components: - standalone: true: (Standard ab v17) Die Komponente verwaltet ihre Imports (imports: [...]) selbst. Kein AppModule nötig. - standalone: false: Die Komponente muss in einem NgModule (z.B. AppModule) unter declarations registriert werden.

Bootstrap in angular.json einbinden: 1. npm install bootstrap 2. angular.json -> styles: ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css"]

---

2. Komponenten

Struktur einer Komponente:

graph LR
    A[Komponente] --> B[name.component.ts (Logik)];
    A --> C[name.component.html (Template)];
    A --> D[name.component.css (Styles)];
    A --> E[name.component.spec.ts (Tests)];

Details: Dateifunktionen

• .ts: Die Klasse enthält Properties (Variablen) und Methoden (Funktionen). Hier passiert die Logik.
• .html: Definiert die Struktur der Benutzeroberfläche (View).
• .css/scss: Styles, die standardmäßig nur auf diese Komponente angewendet werden (View Encapsulation).

---

3. Bindung & Logik

Data Binding

Typ	Syntax	Richtung	Beispiel
Interpolation	{{ val }}	TS ⮕ HTML	<h1>{{ title }}</h1>
Property	[prop]="val"	TS ⮕ HTML	<img [src]="imgUrl">
Event	(event)="fn()"	HTML ⮕ TS	<button (click)="save()">
Two-Way	[(ngModel)]	⇄	<input [(ngModel)]="name">

Details: Binding Erklärung

• One-Way Binding: Daten fließen nur in eine Richtung (z.B. Variable -> Anzeige).
• Two-Way Binding: Änderungen im Input aktualisieren Variable sofort und umgekehrt (benötigt FormsModule Import).

Control Flow (Neu)

@if (Bedingung)@for (Loop)Attribute Directives

@if (isAdmin) {
  <admin-dashboard />
} @else {
  <user-view />
}

@for (user of users; track user.id) {
  <card [data]="user" />
}

• [ngClass]="{'active': isActive}"
• [ngStyle]="{'color': colorVar}"

---

4. Routing

Definition (app.routes.ts)

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'admin', component: AdminComponent, 
    canActivate: [() => inject(AuthService).isAdmin()] }, // Guard
];

Navigation (navbar.html)

<a routerLink="/home" routerLinkActive="active-link">Start</a>

Ein **Route Guard** (`CanActivateFn`) prüft vor dem Laden der Route eine Bedingung.
Wenn `false` (oder ein `UrlTree`) zurückkommt, wird die Navigation abgebrochen oder umgeleitet (z.B. zum Login).

**Metapher: Auth Service vs. Auth Guard**

- **Auth Service (Der AUSWEIS):**
    - Er weiß: Wer bin ich? Bin ich eingeloggt?
    - Hat die Logik: `login()`, `logout()`.
- **Auth Guard (Der TÜRSTEHER):**
    - Steht an der Tür (Route).
    - Fragt den Ausweis (Service): "Darfst du hier rein?"
- **Zusammenhang:** Der Türsteher nutzt den Service für die Entscheidung.

**Wo passiert Routing? (3 Orte)**
1.  **Konfiguration:** `app.routes.ts` (Die Regel: "Wenn URL X, dann Komponente Y").
2.  **Anzeige:** `<router-outlet>` (Der Platzhalter im HTML).
3.  **Auslöser:** Browser-Leiste oder `routerLink` Klick.

---

5. Formulare (Reactive)

component.ts

import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
// ...
imports: [ReactiveFormsModule],
// ...
contactForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  message: new FormControl('', Validators.required)
});

component.html

<form [formGroup]="contactForm" (ngSubmit)="send()">
  <input formControlName="email">
  <button [disabled]="contactForm.invalid">Senden</button>
</form>

Details: Reactive vs Template-Driven

• Reactive Forms: Skalierbarer, Logik im Code (FormControl), einfachere Unit-Tests.
• Template-Driven: Einfacher für sehr simple Formulare, Logik im Template ([(ngModel)]).
• Validatoren: Vorgefertigte Funktionen wie Validators.required, Validators.email, Validators.minLength(3).

---

7. Szenario: Kontaktformular

"Wie bauen Sie ein Formular für Name, Tel, E-Mail, Anfrage ein?"

Lösungsschritte:

1. Modell: ReactiveFormsModule importieren.
2. Logik: FormGroup mit Controls erstellen.
3. Validierung: Validators hinzufügen.
4. UI: Komponenten aufteilen (Page & Form).
5. Route: /kontakt anlegen.

Code-Lösung für Szenario

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="send()">
      <label>Name: <input formControlName="name"></label>
      <label>Tel: <input formControlName="tel"></label>
      <label>Email: <input formControlName="email"></label>
      <label>Msg: <textarea formControlName="text"></textarea></label>
      <button [disabled]="form.invalid">Go</button>
    </form>
  `
})
export class ContactComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    tel: new FormControl(''),
    email: new FormControl('', [Validators.required, Validators.email]),
    text: new FormControl('', Validators.required)
  });

  send() { 
    if(this.form.valid) console.log(this.form.value); 
  }
}