Angular Boot Camp

Outline:

1. Class Objectives and Roadmap
2. The How and Why of Angular

• Angular and the web platform
• Single-page apps (SPAs) vs traditional web applications
• Where Angular fits

3. The Angular Developer Experience

• Opinionated
• Performant
• Strict by default

4. Development Environment Setup
5. Class Materials Overview
6. Angular Application Essentials
7. Creating a New Angular Application

1. Introduction to Components
2. Anatomy of an Angular Component
3. Defining a Custom Component
4. Displaying Data
5. Handling Events
6. Binding Data

• To properties
• To attributes
• To CSS classes and styles

7. Template Control Flow

• Conditionals - @if @else
• Loops - @for
• Switches - @switch
• Assignments - @let
• Legacy: *ngIf, *ngFor, *ngSwitch, etc.

8. Transforming Data with Pipes
9. Component Hierarchy

• Creating components with the Angular CLI
• Component hierarchy and the DOM
• Legacy: Angular Module

10. Component Inputs and Outputs
11. Component Patterns

1. Essentials of Routing
2. Configuring the Router

• HTML5 vs hash routes

3. Defining Routes

• Route Parameter

4. Lazy Loading

• Preloading

1. Essentials of Services

• Why Services?
• Creating and Injecting Services
• Legacy: Angular Modules and Provider Definition

2. Sending and Receiving Data

• Intro to the Angular HttpClient
• Comparison to fetch, XHR

3. Intro to Dependency Injection

• Why DI?
• How DI is Used in Angular

4. Intro to Observables and RxJS
5. Using the async Pipe

1. Essentials of Form
2. Reactive Forms
3. Form Controls, Groups, and Arrays
4. Form Builder
5. Validation

• Built-in Validators
• Custom Validators
• Integrating Third-Party Validation Libraries

1. Component-local state (and its limitations)
2. Managing Application State

• With routes
• With services
• With NgRx and similar libraries

1. Essentials of Signals
2. The Basics of Change Detection
3. The Signals API - input(), output(), model(), etc.
4. Signals and Forms
5. Signals and RxJS

1. Unit Testing
2. End-to-End (E2E) Testing
3. Component Testing
4. Mocks and Spies
5. Asynchronous Testing

1. Beyond Observables
2. Promises
3. Integrating Signals, Promises, and RxJS
4. More Advanced Examples and Use Cases

• Observable composing and chaining
• Wrapping an API with observables
• switchMap() and friends
• Error handling
• Loading data with retry()
• Custom operators
• Integration with signals

1. Route Guards
2. Static and Async Route Data
3. Nested Routes
4. Auxiliary Routes
5. Preloading Strategies
6. Router Events
7. Tracing and Debugging
8. Advanced Configuration

1. Nested Forms
2. Custom Validators
3. Integrating Third-Party Validation Libraries
4. Dynamic Form
5. Custom Form Controls

1. Scalable and Maintainable Styling Architecture
2. View Encapsulation
3. Modern CSS

1. Angular Material

• Setting defaults
• Customizing via Sass mixins
• Customizing via Material Design 3 theming
• Streamlining and reducing boilerplate

2. Nx DevTools
3. Advanced Security and Defensive Programming

• Sanitization
• XSRF

4. Advanced Accessibility Considerations
5. Internationalization and Localization
6. Content projection - ng-content
7. Using ng-container and ng-template
8. Deferrable Views - @defer
9. Custom Pipes
10. Advanced RxJS
11. Advanced State Management with NgRx
12. Advanced Dependency Injection

• Understanding constructor() vs inject()
• Multi-providers
• Injection tokens

13. Advanced Change Detection

• Zone.js default change detection
• OnPush change detection
• Signals

14. Directive Composition
15. Custom Directives
16. Template-Driven Forms

• Validator Directives
• Two-way data binding with ngModel

17. Component Lifecycle
18. Service Inheritance
19. Component Inheritance
20. Server-Side Rendering (SSR)
21. Dynamic Runtime Configuration

Upcoming Dates