Advanced Angular Development (NGADV) – Details

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