Course Outline

Introduction

  • What is Angular?
  • Angular vs React vs Vue
  • Overview of Angular 17 features and architecture
  • Setting up the Development Environment

Getting Started

  • Creating a new Angular 17 project using Angular CLI
  • Exploring the project structure and files
  • Running and serving the application
  • Displaying data using interpolation and expressions

Components

  • Understanding the role of components in Angular 17
  • Creating and using components
  • Passing data between components using inputs and outputs
  • Using component lifecycle hooks

Directives

  • Understanding the difference between structural and attribute directives
  • Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
  • Creating and using custom directives

Pipes

  • Understanding the purpose of pipes in Angular 17
  • Creating and using built-in pipes such as date, currency, json, etc.
  • Creating and using custom pipes

Services

  • Understanding the role of services in Angular 17
  • Creating and using services
  • Injecting dependencies using providers

Modules

  • Understanding the role of modules in Angular 17
  • Creating and using modules
  • Importing and exporting modules

Data Binding

  • Understanding the difference between one-way and two-way data binding
  • Creating and using property binding, event binding, and banana-in-a-box syntax
  • Using template reference variables

Routing

  • Understanding the role of routing in Angular 17
  • Creating and configuring routes
  • Navigating between routes using routerLink and router.navigate()
  • Using route parameters, query parameters, and fragments

Forms

  • Understanding the difference between template-driven and reactive forms
  • Creating and validating forms using form controls, form groups, form arrays, etc.
  • Using built-in validators such as required, minLength, maxLength, etc.
  • Creating and using custom validators

HTTP Client

  • Understanding the role of HTTP client in Angular 17
  • Creating and using HTTP requests to communicate with backend services
  • Using observables to handle asynchronous data streams
  • Using interceptors to modify or handle HTTP requests or responses

New, Declarative Control Flow

  • Explaining the new template control block syntax and how it simplifies common tasks like conditional rendering, looping, and handling empty collections
  • Giving examples of using the new blocks, such as @if, @else, @switch, @case, @default, @for, and @empty
  • Comparing the new syntax with the previous one, such as *ngIf, *ngSwitch, and *ngFor
  • Mentioning how the new control blocks support zoneless applications with signals

Deferred Loading Blocks

  • Explaining the concept of deferred loading and how it can improve the performance and user experience of web applications
  • Introducing the new @defer control block that enables lazy-loading of the block's content and its dependencies
  • Giving examples of using the @defer block for different scenarios, such as loading components, directives, pipes, animations, and styles
  • Mentioning how the @defer block works with the new view transitions API

View Transitions API

  • Explaining the purpose and benefits of the view transitions API, which allows developers to customize the animations and transitions between views
  • Introducing the new withViewTransitions directive that enables the use of the view transitions API
  • Giving examples of using the withViewTransitions directive with different transition types, such as fade, slide, zoom, and flip
  • Mentioning how the view transitions API works with the Angular router and the browser history

Other Features and Improvements

  • Briefly summarizing some of the other features and improvements that Angular 17 offers, such as:
  • Support for passing in @Component.styles as a string
  • Angular's animations code is lazy-loadable
  • TypeScript 5.2 support
  • The core signal API is now stable
  • Node.js v16 support has been removed and the minimum support version is v18.13.0
  • Esbuild will be the default builder and the default dev server will use Vite

Summary and Next Steps

Requirements

  • An understanding of HTML, CSS, and JavaScript
  • Experience with TypeScript and RxJS
  • Web development experience

Audience

  • Developers who wish to learn how to use Angular 17 to create dynamic and responsive web applications
  • Developers who wish to upgrade their skills from previous versions of Angular
  • Programmers who wish to explore the new features and improvements of Angular 17
 28 Hours

Number of participants


Price per participant

Testimonials (1)