Angular est le framework front-end de référence pour les applications d’entreprise complexes. Cette formation couvre Angular 20 avec son architecture moderne : composants standalone, Signals pour la réactivité sans Zone.js, et la nouvelle syntaxe de templates. Vous construirez une application complète avec formulaires typés, appels API REST et routage, en appliquant les bonnes pratiques actuelles du framework.

Public visé

Développeurs et chefs de projets.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

Initiation à la programmation

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Utiliser la version 20 du framework Angular
Développer et tester complètement une application
Appliquer les bonnes pratiques de développement

Programme

Jour 1

Architecture, installation et premier test avec Angular 20

Architecture moderne d’une application Angular 20 :
- Application standard (Modules) vs approche avec Standalone Components
Installation de l’environnement avec Angular CLI v20
Premier projet : création via CLI et déploiement local avec Vite
TypeScript :
- Présentation rapide de TypeScript 5.x
- Types, classes, interfaces et modules ES
- Asynchrone : promesses et async / await
Rôle des composants autonomes (standalone)
Introduction aux directives :
- @Component
- @Input
- @Output
Architecture MVVM + zones d’exécution sans Zone.js

Travaux pratiques

Création d’un projet Angular 20 et exploration du code généré

Création de la première application et initiation aux templates

Démarrer “from scratch” avec ng new et composants standalone
Création d’un composant à la main
Les nouveaux templates syntaxiques :
- Interpolation ({{ }})
- Property binding [prop]
- Event binding (event)
- Two-way binding [(ngModel)]
Nouvelles directives structurelles @if, @for, @switch
Pipes intégrés et création de pipes personnalisés
Création et injection de services
Injection contextuelle via les options de providers

Travaux pratiques

Création d’une application avec des composants autonomes
Manipulations de données via services et affichage via binding avancé

Jour 2

Formulaires Angular avec typage fort

Types de formulaires : Template-driven vs Reactive
Création de formulaires avec :
- FormsModule
- ReactiveFormsModule et FormBuilder
Formulaires fortement typés avec TypedFormGroup, FormControl
Utilisation optimisée :
- Gestion de la validation
- Erreurs
- Affichage dynamique
Mise en pratique : formulaire de login ou entrée produit

Travaux pratiques

Création de formulaires réactifs modernes avec typage strict

HTTP, RxJS et accès au backend

Présentation de RxJS 8+ :
- Nouveaux opérateurs simplifiés
- Différences entre Promises, Observables et Signals
Requêtes HTTP via la nouvelle API HttpClient avec provideHttpClient()
Utilisation de HttpClient.get, post, interceptors, catchError
Présentation de httpResource
Accès aux API REST
Présentation de async / await vs subscribe dans les composants

Travaux pratiques

Intégrer une API REST externe dans un service et affichage dans le composant

Jour 3

Routage modulaire et composants autonomes

Le Router Angular 20 :
- Déclaration avec provideRouter()
- Définition des routes dans fichiers séparés
- Techniques d’organisation modulaire des routes (lazy loading, guards, resolvers)
Avec les composants standalone, le routage est simplifié
Chargement différé de composants via loadComponent()

Travaux pratiques

Configuration d’un router avec plusieurs vues (home, about, produit)
Navigation avec routerLink et paramètres dynamiques

Les signals (Angular Reactive Signals API)

Présentation des signals introduits depuis Angular 16+ :
- Signal(), computed(), effect()
- Réactivité sans RxJS
Comparaison Signals vs Observables
Cas d’usage :
- Intégration dans les composants
- Gestion de l’état

Les tests dans Angular 20

Unités : avec Jasmine / Karma ou Jest
Tests de composants standalone
Simplification de la configuration des tests pour composants autonomes
E2E testing amélioré avec Playwright

Travaux pratiques

Création d’un signal et observation des résultats dynamiques
Tests unitaires de service et composant
Test E2E avec Playwright : script de login ou navigation

Modalités d’évaluation des acquis

En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Pour aller plus loin

Cette formation donne accès à cette formation :

Angular - Avancé

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-ANGULAR-100 — Angular - Initiation. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : angular, développement, initiation, typescript, web. Cylian Formation, Dijon.