Tag 1 – Einstieg, Komponenten und Datenbindung
Orientierung

• TypeScript für Java-Entwickler: Typen, Interfaces, Generics
• Angular CLI: Projekt anlegen, Entwicklungsserver starten, Projektstruktur verstehen
• Standalone Components: Aufbau und Einbindung
• Erste Komponente erstellen und im Browser sehen

Template-Syntax und Datenbindung

• Interpolation, Property Binding, Event Binding
• Built-in Control Flow: @if, @for, @switch
• Pipes: Daten im Template formatieren — DatePipe, CurrencyPipe, eigene Pipes
• Content Projection mit ng-content

Komponenten-Kommunikation

• Input Signals: Daten an Kind-Komponenten übergeben
• Output Functions: Ereignisse an Eltern-Komponenten melden
• Model Signals: bidirektionale Datenbindung
• Lifecycle Hooks: ngOnInit, ngOnDestroy und ihre Signal-Äquivalente

Tag 2 – Services, HTTP und Routing
Services und Dependency Injection

• Services erstellen und injizieren — Vergleich mit Spring @Service und @Autowired
• Hierarchische Injektoren: providedIn root vs. Component-Level Providers
• HTTP Client konfigurieren und REST-Anfragen stellen
• Observables im HTTP Client: map, catchError, finalize
• Error Handling: HTTP-Fehler abfangen und im UI darstellen

Signals und Reaktivität

• signal(), computed(), effect() — Grundsyntax und Anwendungsfälle
• Zoneless Change Detection: Konfiguration und Auswirkungen
• Signal State Management: Zustand zentral in Services halten
• Resource API: asynchrone Datenzugriffe mit resource() und linkedSignal()
• Ladezustand und Fehlerbehandlung mit Signals kommunizieren

Routing

• Client-seitiges Routing definieren und konfigurieren
• Lazy Loading: Feature-Bereiche bei Bedarf nachladen
• Verschachteltes Routing und Router Outlets
• Routing-Parameter lesen und auswerten
• Programmatisches Routing mit dem Router-Service

Tag 3 – Formulare, Testing und Build
Reactive Forms

• FormBuilder, FormGroup und FormControl
• Built-in Validators und eigene Validator-Funktionen
• Fehlermeldungen kontextgerecht anzeigen
• HTTP-Validierungsfehler vom Backend im Formular darstellen
• Ausblick Signal Forms (Angular 22)

Testing mit Vitest

• Vitest-Setup in Angular 21/22: Konfiguration und Projektstruktur
• Unit Tests für Services: HTTP-Mocks mit HttpTestingController
• Unit Tests für Komponenten: ComponentFixture, DebugElement, fakeAsync
• Signals in Tests: Reaktivität verifizieren
• Testabdeckung sinnvoll einsetzen: was testen, was weglassen
• Ausblick: Playwright für End-to-End-Tests

Build und Deployment

• Angular Build optimieren: Budgets, Lazy Loading, Tree Shaking
• Umgebungsvariablen für Dev, Staging und Produktion
• Server-Side Rendering mit Angular SSR: Grundkonzept und Einsatzszenarien
• Deployment-Strategien: statisches Hosting (Nginx, CDN) + Spring Boot Backend als JAR

Tag 4 – Spring-Integration, OpenAPI und Authentifizierung
API-First mit OpenAPI und Code-Generierung

• OpenAPI als Integrationsvertrag zwischen Frontend und Backend
• SpringDoc: OpenAPI-Spezifikation aus Spring Boot automatisch generieren
• OpenAPI Generator: typsicheren TypeScript-Angular-Client aus der Spec erzeugen
• Generierten Client einbinden: Services, Modelle, Konfiguration
• Praktischer Workflow: Backend-Änderung → Spec-Export → Client regenerieren
• Versionierung der Spec und Umgang mit Breaking Changes

Authentifizierung end-to-end

• Spring Security mit JWT: Login-Endpoint und Token-Ausgabe
• HTTP Interceptor in Angular: JWT-Token automatisch mitsenden
• Route Guards mit canActivate: geschützte Routen absichern
• Token-Refresh und automatisches Logout
• Rollen und Berechtigungen: @PreAuthorize im Backend, Guards im Frontend

CORS und Produktionskonfiguration

• CORS im Spring Boot Backend korrekt konfigurieren
• Proxy-Konfiguration im Angular CLI für die Entwicklungsumgebung
• Umgebungsspezifische API-URLs verwalten

Abschluss & Transfer

• Architektur-Review der entstandenen Applikation
• Nächste Schritte: NgRx Signal Store, Micro Frontends, KI-gestützte Entwicklung mit Junie
• Q&A und offene Diskussion
• Ressourcen und Weiterführendes