Mastering Angular 18 Boot Camp (TT4168)

Geared for experienced web developers, our Mastering Angular 18 Boot Camp is a five-day, comprehensive hands-on program that explores the latest features and benefits Angular has to offer. Throughout the course, you’ll learn the practical “real-world” foundational and advanced Angular skills required to solve the usual challenges you might face when developing modern web applications with JavaScript.

Kicking off with an in-depth introduction to Angular CLI and TypeScript, the course propels you into the world of component-driven development, touching on vital topics like data-binding, directives, and services. As you advance through the curriculum, you’ll explore SPA routing, the RxJS library, forms, and unit testing, along with HTTP/REST protocols for server interaction.

By the end of this course, you’ll have built a comprehensive application that brings together all these elements: website structuring through components, dynamic interactivity via directives, and custom pipes for content refinement. You’ll know how to employ reactive forms for active user engagement and SPA routing for fluid navigation, fortified by efficient data management through services. All of this is underscored by a strong emphasis on unit testing, as well as practical REST API interactions for modern server communication.

You’ll leave the course equipped to construct robust, scalable, and feature-rich web applications using Angular 18, able to implement seamless user experiences, integrate with various data sources through REST APIs, and employ best practices in unit testing for sustainable, high-quality code.

Course Agenda

Please note that this course is available for earlier editions of Angular. Please inquire for details and options.

1. Overview of Angular Architecture
   • Angular Versioning
   • Data Binding
   • Component Architecture
     • Show concepts: how to render the content in the browser
   • Components and Dependency Injection
   • Services and Events
   • Common Component Lifecycles and Hooks
2. TypeScript
   • Angular, ES6 and TypeScript
   • Typing and Classes
   • Abstract Classes and Interfaces
   • Interface patterns
   • Annotations
   • Generics
   • Optional Chaining
   • Nullish coalescing
   • Decorators
   • Functional vs Procedural JavaScript
   • Functional Approach
   • Lab: Angular and TypeScript – Enhanced lab
3. Bootstrapping with Angular CLI
   • Angular CLI Overview
   • New Projects with CLI
   • Testing and Generating with CLI
4. Angular Basics
   • Configuration Files
   • Working with angular.json
   • Top-Level Directories
   • Contents of app folder
   • Angular DevTools
   • ng build
   • Lab: Creating Projects with Angular CLI
5. Components and Events
   • Data Binding and Components
   • Event Binding
   • Custom Events
   • Parent/Child Events
   • EventEmitter/emit()
   • New Input/Output function
   • Lab: Nested Components
6. Standalone Components
   • Project Setup and Configuration
   • Folder Structure
   • Components
   • Services
   • Routing
   • Versus non-standalone components
   • Versus modules
7. Third Party Libraries
   • Angular and the Need for Libraries
   • Options for adding Libraries
   • Working with npm install
   • Lab: Third-Party Libraries
8. Dynamic Views – Directives
   • View Encapsulation
   • Structural/Attribute Directives
   • Conditional Styling
   • @if/@else
   • @for
   • @defer
   • Lab: Working with Directives
9. Pipes
   • Overview of Pipes
   • Built-in Pipes
   • Formatting and Conversions
   • Parameterizing Pipes
   • Pure vs. Impure Pipes
   • Customizing Pipes
   • Lab: Built-in and Custom Pipes
10. Signals and State
    • What are Signals?
    • How to read the value of a signal?
    • How to modify the value of a signal?
    • The update signal API
    • Read-only signals
    • The computed() Signal API
    • How do we subscribe to a signal?
    • Using effects
11. Forms and the Forms API – focus on Reactive Forms
    • Template Forms – Overview
    • User Input/Interactions
    • Model-Driven Reactive Forms
    • FormBuilder API
    • Reactive Form Validation
    • Form’s new control state change events
    • Lab: Reactive Forms
12. SPA – Routing
    • Overview of the SPA Concept
    • Routing for Page Display
    • Working with ActivatedRoute
    • Location Strategies
    • Nested Routes
    • Route redirects as functions
    • Lab: Routing
13. Services (Dependency Injection)
    • Angular’s DI Framework
    • Components and Injectables
    • Tree-shakeable providers
    • Services Architecture
    • Service Interfaces and DI
    • Constructor Injection
    • Inject function
    • Scenarios for use
    • Lab: Services
14. Modules
    • Overview of Modules
    • Feature Modules
    • Feature Module Routing
    • Shared Modules
    • Lab: Modules
15. Angular and REST
    • REST in Angular
    • Promises, Observables, Subject
    • HttpClient and Observables
    • Deprecation of HttpClientModule
    • Async Pipes and HttpClient Interceptors
    • Angular working with axios
    • Lab: Rest with axios
16. Working with RxJS
    • Working with RxJS in Angular
    • RxJS Operators
      • SwitchMap, tap, map, forkJoin, combineLatest, …
    • Most used operators
    • Asynchronous operations
    • Manipulate stream
    • Lab: Working with RxJS
17. Testing and Angular
    • Testing Dependencies
    • Options for Testing in Angular
    • Using Jest in Angular
    • Using the Web Test Runner
    • Lab: Unit Testing
18. Zoneless
    • The Need for Zoneless Angular
      • Performance considerations
    • Zone Change Detection
    • Advantages and Trade-offs

Bonus Content / Time Permitting

Errors, Debugging and Standalone

1. Angular Error Handling and Debugging
   • With Chrome DevTools
   • With VS Code
   • Http client request errors
   • Lab: Debugging Angular
2. Angular coding style guide and Best Practices