Advanced Angular Programming

Course Overview

Advanced Routing

• Lazy Loading Standalone Components
• Route Guards
• CanActivate, CanActivateChild, CanDeactivate, Resolve
• Functional Guards
• Child Routes (Nested Routes)
• Multiple/Auxiliary Router Outlets
• Router Events

Using NgModules

• When to use NgModules
• Creating a project that uses NgModules
• NgModule Basics (@NgModule decorator)
• NgModule Metadata Properties (declarations, imports, exports, providers, bootstrap)
• Setting up Routing for Modules
• Providing Services in NgModules
• Module level HttpClient Configuration
• Lazy Loading Modules
• Feature Modules vs. Root Module
• Shared Modules / Core Module patterns
• Using Standalone Components within NgModules
• Importing NgModules into Standalone components
• When to still use NgModules

Observables & RxJS

• Introduction to Observables
• What are Observables? (vs. Promises)
• Advanced RxJS Operators for HTTP (map, filter, tap, switchMap, mergeMap, forkJoin, catchError, retry)
• Managing Subscriptions (AsyncPipe, takeUntil, take(1))
• Creating Observables
• Error Handling Strategies
• Caching HTTP Responses

Unit Testing Angular Applications

• Introduction to Unit Testing (Jasmine, Karma/Jest)
• Setting up the Testing Environment (Angular CLI generates boilerplate)
• Writing Test Suites (describe) and Specs (it)
• Using Matchers (expect)
• Setup and Teardown (beforeEach, afterEach, etc.)
• Testing Standalone Components
• Configuring TestBed for Standalone Components (imports)
• ComponentFixture, DebugElement
• Testing Services (with and without dependencies)
• Mocking Dependencies
• Testing Asynchronous Code (async, fakeAsync, tick)
• Testing Components with Inputs/Outputs
• Testing Routed Components (RouterTestingModule)
• Testing with HttpClientTestingModule
• Code Coverage

Debugging Angular Applications

• Overview of Debugging Techniques
• Using Browser Developer Tools (Breakpoints, Console)
• Viewing TypeScript Code in Debugger
• Using debugger Keyword
• Debug Logging (console.log)
• Angular DevTools Browser Extension
• Inspecting Component Structure
• Profiling Change Detection
• Understanding and Debugging Common Errors

Lab Exercises

• Advanced Routing
• NgModules Lab
• Observables & RxJS
• Unit Testing for Angular
• Debugging Angular Applications

Prerequisites

Students must have a solid understanding of core Angular concepts as taught in our Introduction to Angular course and be familiar with browser applications and web development tools. Practical experience in developing one or more small to medium-sized Angular applications is helpful.