Angular 17 Training Course

Introduction

• Overview of Angular
• Comparing Angular with React and Vue
• Survey of Angular 17 features and architectural changes
• Setting up the development environment

Getting Started

• Initiating a new Angular 17 project via the Angular CLI
• Exploring the project structure and file organization
• Running and serving the application
• Displaying data through interpolation and expressions

Components

• The role of components within Angular 17
• Creating and utilizing components
• Transferring data between components via inputs and outputs
• Leveraging component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Applying built-in directives like ngIf, ngFor, ngSwitch, and others
• Developing and implementing custom directives

Pipes

• The purpose of pipes in the context of Angular 17
• Using built-in pipes such as date, currency, and json
• Creating and applying custom pipes

Services

• The function of services in Angular 17
• Building and utilizing services
• Injecting dependencies through providers

Modules

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

Data Binding

• Differentiating between one-way and two-way data binding
• Implementing property binding, event binding, and banana-in-a-box syntax
• Utilizing template reference variables

Routing

• The importance of routing in Angular 17
• Defining and configuring routes
• Navigating between routes using routerLink and router.navigate()
• Managing route parameters, query parameters, and fragments

Forms

• Contrasting template-driven and reactive forms
• Building and validating forms using form controls, form groups, and form arrays
• Applying built-in validators like required, minLength, and maxLength
• Developing and using custom validators

HTTP Client

• The role of the HTTP client in Angular 17
• Constructing and executing HTTP requests for backend communication
• Handling asynchronous data streams with observables
• Modifying or handling HTTP requests and responses via interceptors

New, Declarative Control Flow

• An explanation of the new template control block syntax and its ability to simplify tasks like conditional rendering, looping, and empty collection handling
• Demonstrations of using new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• A comparison of the new syntax against previous iterations like *ngIf, *ngSwitch, and *ngFor
• How the new control blocks support zoneless applications utilizing signals

Deferred Loading Blocks

• The concept of deferred loading and its impact on enhancing web application performance and user experience
• An introduction to the @defer control block for lazy-loading content and dependencies
• Examples of applying @defer to scenarios involving loading components, directives, pipes, animations, and styles
• The interaction between the @defer block and the new view transitions API

View Transitions API

• The purpose and advantages of the view transitions API for customizing animations and transitions
• An introduction to the withViewTransitions directive enabling the use of this API
• Examples of using withViewTransitions with various transition types like fade, slide, zoom, and flip
• How the view transitions API integrates with the Angular router and browser history

Other Features and Improvements

• A summary of additional features and enhancements in Angular 17, including:
• Support for passing @Component.styles as a string
• Lazy-loadable Angular animation code
• Compatibility with TypeScript 5.2
• The stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 now the minimum requirement
• Esbuild becoming the default builder and Vite powering the default dev server

Conclusion and Further Learning