Angular für Einsteiger - Beratung, Coaching und Schulung

Einstieg und Werkzeuge

• Was Angular ausmacht: Router, Formulare, HTTP-Client und Testwerkzeuge aus einer Hand
• Versionszyklus mit einem Major-Release etwa alle sechs Monate, LTS und ng update
• MIT-Lizenz, Google als Maintainer, Community und die Dokumentation auf angular.dev
• Angular CLI: ng new, ng serve, ng generate und ng build
• Build-System auf Basis von esbuild mit Vite-Entwicklungsserver
• TypeScript-Grundlagen für Angular: Klassen, Typen, Generics und strikter Modus

Komponenten und Templates

• Dekoratoren @Component, @Injectable und @Directive und ihre Metadaten
• Standalone-Komponenten als Standard; NgModules nur noch in Bestandscode lesen können
• Templates mit Interpolation, Property- und Event-Binding
• Zwei-Wege-Bindung mit [(ngModel)] und model(), Template-Referenzvariablen
• Kontrollfluss im Template: @if, @for mit track und @switch
• Signal-basierte Ein- und Ausgaben mit input() und output()
• Zoneless Change Detection: Angular ohne zone.js
• Template-Teile verzögert laden mit @defer

Pipes, Services und Direktiven

• Eingebaute Pipes wie date, currency, async und json
• Eigene Pipes schreiben: reine und unreine Pipes
• Services als zentrale Stelle für Geschäftslogik und Datenzugriff
• HTTP-Zugriff mit HttpClient, provideHttpClient und funktionalen Interceptors
• Eigene Attributdirektiven mit Host-Bindings entwickeln

Konfiguration, Dependency Injection und Lebenszyklus

• Umgebungen und Build-Konfigurationen in angular.json
• Dependency Injection mit inject(), Providern und Injector-Hierarchie
• providedIn: 'root', InjectionToken und Konfiguration über provide…-Funktionen
• Lebenszyklus: ngOnInit, ngOnDestroy, afterNextRender und DestroyRef
• Change Detection verstehen: OnPush, Signals und Auswirkungen auf die Performance

Routing und Navigation

• Routen definieren und mit provideRouter registrieren
• Lazy Loading mit loadComponent und loadChildren
• Routenparameter als Komponenten-Inputs mit withComponentInputBinding
• Preloading-Strategien für schnellere Folgenavigation
• routerLink, routerLinkActive und <router-outlet> im Template
• Funktionale Guards und Resolver

Reaktivität mit Signals und RxJS

• signal, computed, effect und linkedSignal
• Asynchrone Daten im Template mit der async-Pipe
• RxJS-Grundlagen: Observables, pipe, map, switchMap und debounceTime
• Signals oder Observables? Brücken bauen mit toSignal und toObservable

Formulare

• Typisierte Reactive Forms mit FormGroup, FormControl und Validatoren
• Template-driven Forms im Vergleich und wann sie genügen
• Eigene und asynchrone Validatoren, Fehlermeldungen im Template

Testen, Debuggen und Codequalität

• Komponenten testen mit TestBed und Fixture
• Services ohne DI-Container testen, Abhängigkeiten gezielt ersetzen
• Testbare Komponenten: schlanke Templates, Logik in Services und Signals
• Vitest als Standard-Testrunner neuer Projekte (seit Angular 21), Karma in Bestandsprojekten
• Linting mit angular-eslint und strikte Template-Prüfung mit strictTemplates
• Fehlersuche mit Angular DevTools, Source Maps und dem Profiler

Angular mit Coding-Agenten

• Projektregeln für den Agenten: Standalone, inject(), Signals und @if/@for statt NgModules und *ngIf
• Migrationen über die offiziellen Schematics wie ng generate @angular/core:control-flow statt Umbau von Hand
• ng build mit strictTemplates und ng test als Prüfschritt nach jeder Änderung des Agenten
• Angular-Dokumentation per MCP-Server der Angular CLI (ng mcp) im Agenten verfügbar machen

Praxisprojekt: Raumbuchung fürs Büro

• Raumliste mit Filter und Detailansicht als Lazy-Route
• Buchungsformular mit typisierten Reactive Forms und Konfliktprüfung
• Zustand mit Signals, Daten per HttpClient aus einer Mock-API
• Unit-Tests für Buchungsservice und Formular-Komponente

Lernziele

• Sie erklären die Architektur einer Angular-Anwendung aus Standalone-Komponenten, Services und Routen
• Sie setzen eine Angular-Anwendung mit CLI, Routing, Lazy Loading und HTTP-Zugriff selbstständig um
• Sie strukturieren Komponentenzustand mit Signals und verbinden ihn bei Bedarf mit RxJS-Datenströmen
• Sie schreiben eigene Pipes, Direktiven und typisierte Reactive Forms
• Sie finden Fehler mit Angular DevTools und sichern Komponenten und Services mit Unit-Tests ab

Zielgruppe

• Einsteiger:innen in die Frontend-Entwicklung mit JavaScript- oder TypeScript-Kenntnissen
• Webentwickler:innen, die von React oder Vue zu Angular wechseln
• Softwareentwickler:innen, die Angular in kommenden Projekten einsetzen oder bestehende Angular-Anwendungen übernehmen