Angular 20 Course: Master Modern Web Development with Signals & Standalone Components

Module 1: Foundational Concepts

  • Introduction to Angular and its Ecosystem:
    • What is a framework? Angular’s role in modern web development.
    • Comparison of Angular vs. other frameworks.
    • Understanding the key features of Angular 20.
  • Prerequisites and Environment Setup:
    • A quick review of HTML, CSS, and modern JavaScript (ES6+).
    • Introduction to TypeScript: basic types, classes, interfaces, and decorators.
    • Installing Node.js, npm, and the Angular CLI (v20).
    • Scaffolding a new Angular project using the CLI.
  • Project Structure and Core Building Blocks:
    • Diving into the Angular project file structure.
    • Understanding the role of standalone components, pipes, and directives.
    • Introduction to Angular’s architecture: components, templates, and styling.
    • Using the CLI to generate components, services, and other artifacts.

Module 2: The Component-Based Architecture

  • Components and Templates:
    • Creating and nesting components.
    • Component lifecycle hooks (ngOnInit, ngOnDestroy, etc.).
    • Data Binding in templates:
      • Interpolation {{ }}
      • Property Binding []
      • Event Binding ()
      • Two-way Binding [()] with ngModel.
  • Working with Directives:
    • Understanding built-in directives and their modern alternatives in Angular 20:
      • *ngIf ➡️ @if and @else
      • *ngFor ➡️ @for with track function
      • [ngClass] and [ngStyle]
    • Creating custom attribute and structural directives.

Module 3: Advanced Framework Features

  • Dependency Injection and Services:
    • Understanding the concept of Dependency Injection (DI).
    • Creating and providing services.
    • The @Injectable() decorator and service scope (providedIn).
  • Reactive Programming with RxJS and Signals:
    • Introduction to RxJS: Observables, Subjects, and common operators (map, filter, debounceTime).
    • Angular 20’s new Signals API:
      • Creating signal(), computed(), and effect().
      • The benefits of signals: fine-grained reactivity and improved performance.
      • Integrating Signals with existing RxJS Observables using toSignal() and toObservable().
    • Zoneless Change Detection: The shift away from Zone.js and the benefits for performance and debugging.
  • Routing and Navigation:
    • Setting up the Angular Router.
    • Defining routes, route parameters, and query parameters.
    • Implementing route guards (CanActivate, CanDeactivate).
    • Lazy loading components and routes for performance optimization.
    • Asynchronous route data fetching using route resolvers.

Module 4: Forms and Data Handling

  • Managing User Input with Forms:
    • Template-Driven Forms: using ngModel and directives.
    • Reactive Forms: FormGroup, FormControl, and FormBuilder.
    • Validation: built-in and custom validators.
  • Connecting to a Backend with HTTP:
    • Making API calls using HttpClient.
    • Handling HTTP requests (GET, POST, PUT, DELETE).
    • Managing asynchronous data flow with RxJS Observables.
    • Centralizing logic with HTTP Interceptors.

Module 5: Real-World Application Development

  • Project-Based Learning:
    • Building a complete, real-world application (e.g., a simple e-commerce or a task management app).
    • Integrating all previously learned concepts: components, routing, services, forms, and HTTP.
    • Using third-party libraries like Angular Material for UI components.
  • Testing and Deployment:
    • Unit Testing components and services with Jasmine and Karma/Vitest.
    • End-to-End (E2E) testing with Cypress or Playwright.
    • Understanding production builds and optimizations (ng build).
    • Deploying the Angular application to a hosting provider.