Schulung: Angular Fullstack mit Spring Boot
Angular 21/22 von Grund auf — bis zur laufenden Fullstack-Applikation mit Spring Boot
- Systematischer Einstieg in Angular — ohne Frontend-Vorkenntnisse, von Komponenten bis zu Signals, Formularen und Testing
- Fokus auf modernes Angular mit Standalone Components, Signals API, Resource API, Reactive Forms und Vitest
- End-to-End-Integration mit Spring Boot: OpenAPI-basierter TypeScript-Client, JWT-Authentifizierung und nahtlose Frontend-/Backend-Anbindung
Drei Tage Angular, ein Tag Spring-Integration. Der Einstieg setzt keine Frontend-Vorkenntnisse voraus — Angular wird systematisch aufgebaut, von der ersten Komponente bis zu Signals, Formularen und Testing.
Im Mittelpunkt steht das aktuelle Angular-Programmiermodell: Standalone Components, die Signals-API als reaktives Grundprinzip und die Resource API für asynchrone Datenzugriffe. Formulare werden mit Reactive Forms behandelt, Testing mit Vitest.
Der vierte Tag verbindet Frontend und Backend: Die Spring Boot REST-API wird per SpringDoc als OpenAPI-Spezifikation exportiert; der OpenAPI Generator erzeugt daraus einen vollständig typsicheren TypeScript-Client für Angular. Authentifizierung mit JWT wird end-to-end implementiert. Das eingesetzte Spring-Framework wird vorab abgestimmt.
Das ist anders hier
- Kein Angular-Vorwissen nötig — aber solide Java-Kenntnisse. Dependency Injection, Services und Komponentenarchitektur werden mit Java-Analogien erklärt, TypeScript erschließt sich Java-Entwicklern schnell.
- Der Workshop arbeitet mit der Angular CLI und setzt direkt auf das aktuelle Angular 21/22: Standalone Components, Signals, zoneless Change Detection. Als Testframework kommt Vitest zum Einsatz, seit Angular 21 offiziell unterstützt.
- Der vierte Tag schließt den Kreis: OpenAPI-generierte TypeScript-Clients, typsichere HTTP-Kommunikation und Authentifizierung end-to-end — vom Spring Security JWT-Token bis zum Angular Route Guard.
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
Das Seminar richtet sich an Java-Entwickler:innen, die:
- Angular als Frontend-Technologie von Grund auf erlernen wollen,
- in Teams arbeiten, in denen das Frontend auf Angular läuft oder umgestellt wird,
- die Anbindung eines Spring Boot Backends an ein Angular Frontend typsicher gestalten wollen,
- sowie erfahrene Angular-Entwickler:innen, die auf das aktuelle Angular-Programmiermodell mit Signals umsteigen.
Teamleads und Architekt:innen profitieren vom Überblick über die API-First-Strategie mit OpenAPI und die end-to-end Architektur.
Voraussetzungen
- Java-Kenntnisse: Mindestens 2 Jahre Praxiserfahrung; Vertrautheit mit dem eingesetzten Framework (z. B. Spring Boot, Jakarta EE)
- Angular: Keine Vorkenntnisse erforderlich
- Node.js (LTS) und npm installiert
- Angular CLI installiert: npm install -g @angular/cli
- VS Code mit Angular Language Service Extension (Anleitung wird vorab bereitgestellt)
- Grundverständnis von HTTP und REST (Methoden, Statuscodes)
- Grundkenntnisse in Git und der Kommandozeile
Mindestanzahl Teilnehmende: 2 Personen