Alle 75 Seiten · tippen zum Filtern
01 Was ist neu in Angular 21 & 22 Alle wichtigen Änderungen in v21 und v22 in Kürze, mit Link zur Seite, die sie jeweils erklärt. Start 01 Deine erste App, Schritt für Schritt Eine Leseliste, von einer leeren Komponente bis zur fertigen App — Signals, @for, Inputs und Outputs, ein Service und ein Formular, Schritt für Schritt. Start 01 Schnelle Entscheidungen „Wohin damit?“, „Signal oder Observable?“, „Shared oder Feature?“ — kurze Antworten auf Alltagsfragen. Start 01 Angular-Interviewfragen 60 echte Interviewfragen für Junior, Mid und Senior, mit der passenden Antwort, der Nachfrage und den Warnsignalen. Dazu ein Probeinterview. Start 02 Standalone & Bootstrap Wie eine App ohne NgModule startet: bootstrapApplication, app.config.ts, imports in der Komponente. Moderne Grundlagen 02 Data Binding & Events Interpolation, Property- und Attribut-Bindings, Events mit $event und Tastenfiltern und wie [( )] aufgebaut ist — was in das DOM geht und was zurückkommt. Moderne Grundlagen 02 Control Flow: @if, @for, @switch Die Block-Syntax, die *ngIf/*ngFor/ngSwitch ersetzt, mit track, @empty und Exhaustive Checks. Moderne Grundlagen 02 @let und die neuen Template-Ausdrücke Lokale Variablen mit @let, Arrow Functions, Spread, Regex, instanceof, Kommentare in Tags. Moderne Grundlagen 02 @defer — Lazy Loading in Templates Schwere Komponenten nur laden, wenn sie gebraucht werden: Trigger, Prefetch, Placeholder, Loading, Error. Moderne Grundlagen 02 Class- & Style-Bindings Warum [class.x] und [style.x] ngClass und ngStyle abgelöst haben (mit automatischer Migration ab v21). Moderne Grundlagen 02 Komponenten-Styles & Kapselung :host, die drei Kapselungsmodi, Theming mit CSS-Variablen und warum ::ng-deep der letzte Ausweg ist. Moderne Grundlagen 02 Pipes: wann und wie Pure vs. Impure Pipes, eigene Pipes und wie du zwischen Pipe, computed() und Methode wählst. Moderne Grundlagen 03 signal() und computed() Die reaktiven Grundbausteine: beschreibbarer Zustand, abgeleiteter Zustand, Gleichheit, untracked und Regeln zur Immutability. Signals & Reaktivität 03 effect() — wann ja, wann nein Mit Signals synchronisierte Seiteneffekte: localStorage, Logging, imperative APIs. Und ihre Stolperfallen. Signals & Reaktivität 03 linkedSignal() — editierbarer abgeleiteter Zustand Ein Signal, das sich zurücksetzt, wenn sich seine Quelle ändert, das du aber auch manuell setzen kannst. Signals & Reaktivität 03 resource, rxResource, httpResource Asynchrone Daten als Signals: status, value, error, reload, automatischer Abbruch. Stabil seit v22. Signals & Reaktivität 03 debounced() — verzögerte Signals Die „Debounce“-Variante eines Signals, ohne RxJS. Perfekt für die Suche. Signals & Reaktivität 03 Listen: suchen, filtern, sortieren, blättern Eine Kette von computed-Signals, die nur neu berechnet, was sich geändert hat — mit den Filtern in der URL, damit ein Link dieselbe Ansicht öffnet. Signals & Reaktivität 03 Observables von null an Was ein Observable ist, subscribe und unsubscribe, die Operatoren, die du jede Woche brauchst, cold vs. hot — und wann ein Signal reicht. Signals & Reaktivität 03 Signals ↔ RxJS toSignal, toObservable, takeUntilDestroyed, outputFromObservable — und wann RxJS weiterhin die richtige Wahl bleibt. Signals & Reaktivität 04 input() und output() Inputs als Signals (required, transform, alias) und typisierte Outputs. Daten nach unten, Events nach oben. Komponenten: Kommunikation 04 model() — Two-Way-Binding Banana-in-a-Box [( )] mit einer einzigen API. Wann du es nutzt und wann input + output besser ist. Komponenten: Kommunikation 04 viewChild & contentChild Queries als Signals: viewChild, viewChildren, contentChild, contentChildren, die Option read. Komponenten: Kommunikation 04 Lifecycle & DestroyRef Welche Hooks in der Signals-Ära noch zählen, afterNextRender, DestroyRef und typisiertes ngOnChanges. Komponenten: Kommunikation 04 Content Projection ng-content mit select, mehrere Slots, Standardinhalt und die Falle der bedingten Projektion. Komponenten: Kommunikation 04 ng-template & ngTemplateOutlet Templates als Werte: Render Props in Angular, typisierter Kontext und Anpassen von Komponenten. Komponenten: Kommunikation 05 Smart vs. Dumb Container vs. Presentational: wer den Zustand hält, wer nur anzeigt und wie du die beiden sauber trennst. Komponenten-Design 05 Generische Komponenten <T> Eine korrekt typisierte DataTable<T> oder Select<T>, mit Templates für Zellen. Komponenten-Design 05 Dynamische Komponenten NgComponentOutlet, createComponent mit inputBinding/outputBinding und ein Dashboard, das aus einer Konfiguration gebaut wird. Komponenten-Design 05 Direktiven & Host-Komposition Attribut-Direktiven, die host: {}-Metadaten und die Directive Composition API (hostDirectives). Komponenten-Design 05 Eigene Formular-Controls FormValueControl (Signal Forms) vs. ControlValueAccessor: eine Sternebewertung, in beiden Varianten. Komponenten-Design 05 Change Detection OnPush ist ab v22 der Standard, zone.js entfällt ab v21. Was das Rendering auslöst und wie du dir nicht die Finger verbrennst. Komponenten-Design 06 inject() & @Service() Der neue @Service()-Decorator ab v22, inject() vs. Konstruktor und der Injection-Kontext. Dependency Injection 06 Provider & die Injector-Hierarchie Root vs. Route vs. Komponente, useClass/useValue/useFactory/useExisting und die Modifier optional/self/skipSelf. Dependency Injection 06 InjectionToken & provideX() Typisierte Konfiguration, provideFeature()-Funktionen, makeEnvironmentProviders und Initializer. Dependency Injection 06 injectAsync() — Lazy Services Lade einen schweren Service erst, wenn du ihn brauchst, mit Prefetch im Leerlauf. Dependency Injection 07 Ordnerstruktur core / shared / features, was in welchen Ordner gehört und wie ein Feature von innen aussieht. Architektur der Anwendung 07 Shared vs. Feature Wann du eine Komponente nach Shared verschiebst und (vor allem) wann NICHT. Eine konkrete Checkliste. Architektur der Anwendung 07 Interfaces & Modelle Inline-Interface oder eigene Datei? DTO vs. Domänenmodell, type vs. interface, wohin damit. Architektur der Anwendung 07 State Management mit Signals Einfache Signal-Stores, Fassaden, lokaler vs. globaler Zustand und wann du NgRx brauchst. Architektur der Anwendung 07 Styleguide & Namensgebung Die aktuellen offiziellen Konventionen: Dateinamen ohne Suffixe, protected, readonly, Reihenfolge der Member. Architektur der Anwendung 07 Barrels, Aliase & Grenzen index.ts, Pfad-Aliase, die öffentliche API eines Features und Abhängigkeitsregeln, die sich automatisch prüfen lassen. Architektur der Anwendung 07 Fehler: @boundary & ErrorHandler Der neue @boundary-Block ab v22.2, der globale ErrorHandler, HTTP-Fehler und Fehler aus resource. Architektur der Anwendung 08 Modernes Routing & Lazy Loading loadComponent, Child Routes, Parameter als Inputs und Parameter-Vererbung (neuer Standard in v22). Routing 08 Guards & Resolver canActivate, canMatch, canDeactivate und resolve als Funktionen, mit Redirects über UrlTree / RedirectCommand. Routing 09 Signal Forms — die Grundlagen Formulare auf Basis von Signals: form(), [formField], schemabasierte Validierung. Stabil seit v22. Formulare 09 Signal Forms — fortgeschritten Eigene und feldübergreifende Validierung, async/HTTP mit Debounce, dynamische Listen, disabled/hidden, wiederverwendbare Schemas. Formulare 09 Typisierte Reactive Forms Typisierte FormGroup, nonNullable, FormArray — und wie sie neben Signal Forms bestehen. Formulare 10 HttpClient, Interceptors & die API-Schicht HttpClient ohne Setup (v21), Fetch als Standard (v22), funktionale Interceptors und eine API-Schicht mit DTO-Mapping. HTTP & Daten 11 Performance — eine Checkliste Was wirklich zählt: OnPush + Signals, track, @defer, Lazy Routes, Bilder, Bundles und Hydration. Qualität & Performance 11 Testen mit Vitest Vitest ist ab v21 der Standard-Runner. TestBed, Komponenten mit Signals, Services, HTTP und Harnesses. Qualität & Performance 11 DevTools: ein Blick in deine App Chrome DevTools und Angular DevTools Schritt für Schritt: was jedes Panel zeigt, mit Übungen, die auf dieser Website funktionieren. Qualität & Performance 11 Angular Aria Headless, barrierefreie Komponenten, die du nach Belieben stylst: Tabs, Accordion, Menü, Listbox... Qualität & Performance 12 SSR, Prerendering & Render Modes Wann auf dem Server gerendert wird, wann beim Build und wann nur im Browser: RenderMode pro Route, app.routes.server.ts und die echten Kosten. SSR & Hydration 12 Hydration: Event Replay & inkrementell Wie der Browser das Server-HTML übernimmt, ohne es neu zu rendern: vollständige Hydration, Event Replay, @defer (hydrate on …) und Mismatch-Fehler. SSR & Hydration 12 Servertauglicher Code window gibt es auf dem Server nicht: PLATFORM_ID, afterNextRender, DOCUMENT, TransferState, der HTTP-Cache und PendingTasks. SSR & Hydration 13 Micro Frontends Wann es sich lohnt, eine App in mehrere Deployments aufzuteilen und wann es nur Komplexität ist: Native Federation, Module Federation, iframes, Web Components. Architektur im großen Maßstab 13 Web Components mit Angular Elements createCustomElement: eine Angular-Komponente, die überall als HTML-Tag nutzbar ist, plus Kommunikation zwischen Apps über Events und BroadcastChannel. Architektur im großen Maßstab 13 Monorepo, Bibliotheken & Grenzen Ein Workspace mit mehreren Apps und Bibliotheken: ng generate library, Nx, Secondary Entry Points, Publishing und Abhängigkeitsregeln. Architektur im großen Maßstab 13 Hexagonale Architektur (Ports & Adapters) Eine Domäne ohne Angular, Ports als abstrakte Klassen und austauschbare Adapter: HTTP, localStorage oder In-Memory, ohne die UI anzufassen. Architektur im großen Maßstab 14 Signals unter der Haube Der reaktive Graph: Producer und Consumer, Push-Pull, warum computed lazy und glitch-frei ist, das Diamond-Problem und wann Effects laufen. Fortgeschrittene Reaktivität 14 Fortgeschrittenes RxJS: Operatoren höherer Ordnung switchMap, mergeMap, concatMap und exhaustMap an einem Live-Diagramm, dazu Retry mit Backoff, shareReplay und wie du Leaks vermeidest. Fortgeschrittene Reaktivität 14 NgRx SignalStore State Management im großen Stil auf Signals: withState, withComputed, withMethods, rxMethod, Entities und Hooks — und wann ein einfacher Store reicht. Fortgeschrittene Reaktivität 14 Zustandsautomaten mit Signals Keine unmöglichen Zustände mehr: ein typisierter Automat auf Signals, mit Übergängen, Guards und einem Live-Zustandsdiagramm. Fortgeschrittene Reaktivität 15 WebSockets: Echtzeit, die das Netz übersteht Ein typisierter Socket als Signals: Reconnect mit Backoff und Jitter, Heartbeat, ein Postausgang im Offline-Modus und SSR-Sicherheit. Echtzeit & offline 15 Optimistische Updates & Rollback Eine sofortige UI, die ehrlich bleibt: Snapshot und Rollback, Antworten in falscher Reihenfolge, Idempotenzschlüssel. Echtzeit & offline 15 Offline-first: Service Worker & Caching Der Angular Service Worker: Caching-Strategien, Update-Hinweise und ein Postausgang für Änderungen, die offline entstehen. Echtzeit & offline 16 Web Workers Schwere Berechnungen, ohne die UI zu blockieren: ein echter Worker in der Seite, Message Passing und wann es sich nicht lohnt. Fortgeschrittene UI & Performance 16 Riesige Listen: Virtual Scroll 100.000 Zeilen ohne Ruckeln: CDK Virtual Scroll, itemSize, trackBy und die Alternativen (Paginierung, Infinite Scroll). Fortgeschrittene UI & Performance 16 Moderne Animationen & View Transitions animate.enter und animate.leave statt des veralteten @angular/animations, CSS-Transitions und View Transitions bei der Navigation. Fortgeschrittene UI & Performance 16 Memory Leaks finden und beheben Subscriptions, Timer und Listener, die ihre Komponente überleben – wie du sie in den DevTools findest und schließt. Fortgeschrittene UI & Performance 17 Sicherheit: XSS, Sanitizing & CSP Was Angular automatisch gegen XSS tut, wann bypassSecurityTrust gefährlich wird, dazu CSP mit Nonce, Trusted Types und XSRF. Sicherheit & Globalisierung 17 Authentifizierung: Tokens & Refresh Ein Interceptor, der das Token anhängt, bei 401 einmal erneuert und die wartenden Requests wiederholt — dazu, wo du das Token aufbewahrst. Sicherheit & Globalisierung 17 OAuth 2.1 & OpenID Connect mit PKCE Der Authorization-Code-Flow mit PKCE Schritt für Schritt: Verifier und Challenge, State und Nonce, das ID-Token und warum ein BFF sicherer ist. Sicherheit & Globalisierung 17 Internationalisierung (i18n) $localize, das i18n-Attribut, ICU plural/select, ein Build pro Sprache vs. Übersetzungen zur Laufzeit und Formatierung nach Locale. Sicherheit & Globalisierung ↑ ↓ bewegen↵ öffnenesc schließen