Zum Inhalt

Lernziele Fachgespräch 294 - Erklärung zu meinem Angular-Projekt "f1"

Dieses Dokument erklärt die Lernziele des Fachgesprächs basierend auf meinem Angular-Projekt "f1", einem F1-Statistiken-Tracker. Ich werde jedes Lernziel mit Bezug zu meinem Code erläutern.

1. Projektinitialisierung

Angular-Projekt initialisieren

Mein Projekt wurde mit ng new f1 initialisiert. Die package.json zeigt die Angular-Version 21 und die wichtigsten Abhängigkeiten wie @angular/core, @angular/router, @angular/forms.

Standalone: true vs. false

In meinem Projekt verwende ich standalone Komponenten (standalone: true). Zum Beispiel in session-list.ts:

@Component({

  selector: 'app-session-list',

  standalone: true,

  imports: [CommonModule, FormsModule],

  ...

})

Standalone Komponenten sind unabhängig und importieren ihre eigenen Abhängigkeiten, im Gegensatz zu NgModules, die Abhängigkeiten zentral verwalten.

Wichtige Angular-Befehle

  • npm install: Installiert Abhängigkeiten (ausgeführt beim Setup)

  • ng g c component-name: Generiert Komponenten, z.B. ng g c session-list für meine SessionList-Komponente

  • ng serve: Startet den Development-Server

  • ng build: Baut das Projekt für Production

2. Komponenten und Aufbau

Komponenten hinzufügen

Ich habe mehrere Komponenten mit ng g c erstellt:

  • session-list: Zeigt Rennsessions an

  • driver-list: Zeigt Fahrer einer Session

  • lap-detail: Zeigt Lap-Details eines Fahrers

  • login: Login-Formular

Jede Komponente hat:

  • .ts: Logik (z.B. session-list.ts)

  • .html: Template (z.B. session-list.html)

  • .css: Styles (z.B. session-list.css)

  • .spec.ts: Tests

Aufbau eines Angular-Projekts

  • src/app/: Hauptanwendungscode

- app.ts: Root-Komponente (standalone)

- app.routes.ts: Routing-Konfiguration

- app.config.ts: App-Konfiguration

- components/: Feature-Komponenten

- services/: Services für Daten

  • angular.json: Build-Konfiguration

  • package.json: Abhängigkeiten

3. Datenbindung und Direktiven

One-way und Two-way Binding

One-way Binding: Daten fließen von Komponente zu Template. Beispiel in session-list.html:

<h2>Saison {{ selectedYear }}: Rennen auswählen</h2>

selectedYear wird angezeigt, aber nicht geändert.

Two-way Binding: Mit [(ngModel)] in session-list.html:

<select [(ngModel)]="selectedYear" (change)="onYearChange()">

Änderungen im Select aktualisieren selectedYear und umgekehrt.

Attribute Directives

Attribute Directives ändern das Aussehen oder Verhalten eines Elements, ohne die DOM-Struktur zu verändern. Beispiele sind ngClass und ngStyle.

ngStyle und ngClass werden nicht direkt verwendet, aber *ngIf und *ngFor sind Structural Directives:

<div *ngIf="loading" class="spinner">...</div>

<div *ngFor="let s of sessions" class="session-card">

Control Flow

Neue Control Flow Syntax mit @if und @for (Angular 17+). In meinem Code verwende ich noch die alten *ngIf und *ngFor, aber ein Beispiel wäre:

@if (loading) {

  <div>Laden...</div>

} @else {

  <div *ngFor="let s of sessions">{{ s.location }}</div>

}

4. Routing und Sicherheit

Routing-Modul einrichten

In app.routes.ts:

export const routes: Routes = [

  { path: 'login', component: LoginComponent },

  { path: '', component: SessionList, canActivate: [AuthGuard] },

  { path: 'drivers/:sessionKey', component: DriverList, canActivate: [AuthGuard] },

  { path: 'analysis/:sessionKey/:driverNum', component: LapDetail, canActivate: [AuthGuard] }

];

Navigation mit router.navigate(['/drivers', sessionKey]) in session-list.ts.

Geschützte Route

Routes außer 'login' verwenden canActivate: [AuthGuard]. Der Guard in auth.guard.ts prüft localStorage.getItem('isLoggedIn') und leitet zu '/login' um, wenn nicht eingeloggt.

Das simuliert eine "Admin"-Rolle, da nur eingeloggte User zugreifen können.

5. Formulare

Formular mit Validatoren

In login.html:

<form (ngSubmit)="onLogin()" #loginForm="ngForm">

  <input [(ngModel)]="username" name="username" required />

  <input [(ngModel)]="password" name="password" required type="password" />

  <button [disabled]="!loginForm.form.valid">Login</button>

</form>

Verwendet Template-driven Forms mit required Validator. Button ist disabled, wenn Form invalid.

Für E-Mail-Validierung würde ich email Validator hinzufügen: <input email />.

6. Unterstützung durch Dokumentation

Diese Dokumentation basiert auf meinem Code und erklärt logisch, wie die Konzepte umgesetzt sind.

7. Beispielsituation

Formular einbauen für Benutzeranfragen

Um ein Kontaktformular einzubauen (Name, Telefon, E-Mail, Anfrage):

  1. Neue Komponente: ng g c contact-form

  2. In contact-form.ts: Properties für name, phone, email, message

  3. Template mit Form, Validatoren (required, email)

  4. Service für API-Call

  5. Route hinzufügen: { path: 'contact', component: ContactForm }

Komponenten für modulare Formularfunktionalität

  • ContactFormComponent: Hauptformular

  • FormFieldComponent: Wiederverwendbares Input-Feld

  • ValidationMessageComponent: Fehleranzeige

Routen für Navigation

Zusätzlich zu bestehenden:

  • { path: 'contact', component: ContactForm }

  • { path: 'about', component: AboutComponent }

Umsetzung: In app.routes.ts hinzufügen, Navigation mit RouterLink oder router.navigate().