Advanced Angular Development (NGADV)

Kursinhalt

• Standalone Components - Concepts & Migration: Verstehen Sie die Unterschiede zwischen Standalone Components und Modules, tauchen Sie in den Angular-Bootstrapping-Prozess ein und lernen Sie, wie Sie ein bestehendes Projekt auf die Nutzung von Standalone Components migrieren.
• Components & Forms Deep Dive: Erkunden Sie fortgeschrittene Komponenten- und Formtechniken, einschließlich control flow syntax, deferred loading, content projection, cascading reactive forms und der Erstellung benutzerdefinierter Controls mit erweiterter Validierung und Fehlerbehandlung.
• Mastering Reactive Programming using RxJS: Meistern Sie RxJS-Konzepte wie observables, operators und Fehlerbehandlungsstrategien sowie praktische Debugging- und Testtechniken für die Implementierung benutzerdefinierter Observable Operators.
• Mastering Reactivity using Signals. Erlernen Sie den Umgang mit Signals und deren Interoperabilität mit Observables, Datenabrufmethoden und effektive Kommunikation zwischen Komponenten mithilfe fortgeschrittener Signaltechniken und dem Event Bus pattern.
• State Management using NgRx Classic & NgRx SignalStore: Entdecken Sie State Management Patterns, implementieren Sie sowohl NgRx Classic als auch SignalStore, verwalten Sie Side Effects und erstellen Sie benutzerdefinierte Store Features, während Sie Änderungen im State effizient verfolgen.
• Advanced Routing and App Initialization: Erhalten Sie tiefgehende Einblicke in dependency injection, app initialization, global error handling und fortgeschrittene Routing-Techniken einschließlich view transitions, auxiliary routes und router animations.
• Advanced Testing with Jasmine, Jest, Cypress and NgRx: Testen Sie Angular-Anwendungen umfassend mit Tools wie Jasmine, Jest und Cypress, einschließlich Unit Tests, komplexer Formularprüfungen, State Management Tests und End-to-End Tests.
• Reusability with Libraries, Nx & Angular Elements: Erstellen Sie wiederverwendbare Angular-Artefakte mit Libraries und Nx Workspaces und entwickeln Sie wiederverwendbare Komponenten wie einen AI-Chat mit Angular Elements.
• Real Time Micro-Frontends & Progressive Web Apps: Verstehen Sie Micro-Frontends und Progressive Web Apps, mit Fokus auf Echtzeit-verknüpfte Micro-Frontends, HTML5 APIs, service workers und die Installation und Aktualisierung von PWAs.
• Server Side Rendering (SSR): Lernen Sie SSR kennen, einschließlich build-time pre-rendering, der Optimierung von Komponenten für serverseitige Ausführung, hybrid rendering und incremental hydration für verbesserte Leistung.
• Optimizing Applications: Verwenden Sie Tools wie Chrome Dev Tools und Lighthouse zur Optimierung der Anwendungsleistung, analysieren Sie Bundles, verbessern Sie die Change Detection und stellen Sie sicher, dass Best Practices für Accessibility und Konfigurationsmanagement eingehalten werden.

Detaillierter Kursinhalt

Standalone Components: Concepts & Migration

• Standalone Components vs Modules
• Understanding the Angular Bootstrapping Process
• Registering Providers in app.config.ts
• Routing and app.routes.ts
• Migrate an existing Project to Standalone Components

Components & Forms Deep Dive

• Using & Migrating to Control Flow Syntax
• Deferred Loading & Selective Activation using @deferred
• Standalone Directives & Directives Composition Api
• Reusability with Content Projection
• Reactive Forms (FormGroup, Form Builder, FormControl, FormArray)
• Typed Forms Nullability, NonNullableFormBuilder, GetRawValue
• Partial Values, Optional Controls, Dynamic Groups and FormRecord
• Classic Form Events vs Unified Form Events
• Cascading Form Controls
• Implementing Custom Controls using ControlValueAccessor
• Typed Forms Validation & Custom Validators
• Handling FormErrors & ErrorStateMatcher

Mastering Reactive Programming using RxJS

• Introduction to RxJS
• Observables, Observers & Use Cases
• Unsubscribing DestroyRef & takeUntilDestroyed
• Imperative vs Declarative Reactivity
• Data- vs Action-Streams
• Mouse & DOM Events as Observables
• Subject Types & Stateful Services
• Base Operators: Mapping, Filtering, Merging,
• Understanding Marble Diagrams & Debugging Observables
• Combination & Transformation Operators
• Retry & Error Handling Strategies
• Implementing & Testing Custom Observable Operators

Mastering Reactivity using Signals

• Introduction to Signals (WritableSignal, Computed, Effects)
• Signals vs Observables
• Signals & Observables Interoperability
• Deep Signals & Linked Signals
• Data Retrieval using resource() and rxResource()
• Nesting Components using Signals, input, output & model
• View Queries: viewChild, -Children, contentChild, -Children
• Creating View Models using Deep Signals
• Communication between Components using Event Bus Pattern
• ngAfterSignalUpdate Lifecycle Hook

State Management using NgRx Classic & NgRx SignalStore

• Overview State Management Patterns
• NgRx Classic vs Signal Store
• Introduction to the Classic NgRx & Redux Pattern
• Implementing NgRx Store, Reducers & Selectors using createFeature
• Actions & createActionGroup
• Effects, Facades, @ngrx/entity & @ngrx/data
• Creating a Signals Store using @ngrx/signals
• NgRx and Signals Interoperability
• Side Effects using rxMethod
• Signals Store, Entity & Custom Data Services
• Implementing and using Custom Store Features
• Tracking State changes

Advanced Routing and App Initialization

• Dependency Injection in Depth: Resolution modifiers and Dependency providers
• Using Constructor vs inject for DI
• App initialization & Interceptors
• Global Error Handling & Http-Error Interceptor with Retry-Patterns
• Using Preloading Strategies & Functional Resolvers
• Functional Route Guards
• Route Redirect Functions
• Binding Router-Params to Component Inputs & routerOutletData
• View Transition Api
• Auxiliary Routes: Common use cases
• Router Animations & Anchor Scrolling

Advanced Testing with Jasmine, Jest, Cypress and NgRx

• Introduction Angular Testing Tools (Jasmine, Karma, Jest & Cypress)
• Testing Classes, Pipes, Directives
• Testing Services using HttpClientTestingModule & HttpTestingController
• Testing Component Interaction (Read, Write, Emit, Inputs)
• Complex Forms Testing & Deferrable Views
• Testing Observables & Signals
• Material Testing using Component Harnesses
• Async Component Testing (done, fakeAsync, waitForAsync)
• Marble-testing RxJS
• Testing NgRx Classic: Mock Store, Mock Selectors, Reducers, Effects, Facades
• Testing Signal Store & Custom Features
• Using Jest for Unit Testing (Setup, Changes in spec, Snapshot Tests)
• Introduction to End-2-End Testing using Cypress

Reusability with Libraries, Nx & Angular Elements

• Angular Building Blocks: Workspace, Apps, Libraries
• Reusable Artifacts using Angular Libraries
• Introduction to Nx Workspaces
• Creating a reusable AI Chat Component using Angular Elements

Real Time Micro-Frontends & Progressive Web Apps

• Introduction to Micro-Frontends
• Real Time connected Micro-Frontend processing Cloud Events
• Introduction to Progressive Web Apps
• HTML 5 APIs
• Understanding and Configuring Service Workers & Manifests
• Installing & Updating Progressive Web Apps

Server Side Rendering (SSR)

• Introduction to Server Side Rendering (SSR)
• Build-time pre-rerendering
• Optimize Components using Platform Specific Code
• Hybrid Rendering
• Introduction to Hydration & Incremental Hydration

Optimizing Applications

• Using Chrome Dev Tools & Lighthouse for Performance Optimization
• Understanding & Using Page Traces & Web Vitals
• Analyzing and Optimizing Bundles & Components
• Build Optimizations using Angular CLI
• Optimizing Images using NgOptimizedImage
• Data-Loading Strategies, Virtual- & Infinite Scrolling,
• Understanding, Profiling & Optimizing Angular Change Detection
• Zoneless Change Detection
• Using @angular/localize
• Accessibility A11y: Best Practices & Linting
• Using Linting and Autoformat with Prettier
• Configuration Management & Containers