Téléchargez le parcours au format PDF
3 jours
Perfectionnement / Avancé
Présentiel Classe à distance
Partager
Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML, CSS et JavaScript › Angular 20 et versions antérieures - Développement d'applications Web
Validez les prérequis
Afin de vérifier que vous disposez bien des prérequis nécessaires à cette formation, nous vous invitons à réaliser ce test.
Temps estimé : 4 minutes.
Passer le testObjectifs de formation
A 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 de votre formation
-
#
M2I START AVANT VOTRE FORMATION
Contextualisation du projet de formation et prise en compte des besoins de chacun
- Positionnement initial de l’apprenant par rapport aux objectifs
- Définition des priorités et des objectifs personnels de l’apprenant
- Vidéos de mise en situation
- Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
-
#
M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ¹
Programme
Jour 1 - Matin
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 (préconfiguré depuis Angular 17)
- 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) - désormais fortement encouragés
- Introduction aux directives :
- @Component
- @Input
- @Output
- Architecture MVVM + zones d'exécution sans Zone.js (zone-less rendering activé par défaut)
Exemple de travaux pratiques (à titre indicatif)
- Création d'un projet Angular 20 et exploration du code généré (fonctionnement avec main.ts, bootstrapApplication...)
Jour 1 - Après-midi
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 (@Component + bootstrapApplication)
- Les nouveaux templates syntaxiques :
- Interpolation ({{ }})
- Property binding [prop]
- Event binding (event)
- Two-way binding [(ngModel)]
- Nouvelles directives structurelles @if, @for, @switch :
- Syntaxe plus intuitive (remplaçant *ngIf, *ngFor)
- Pipes intégrés et création de pipes personnalisés
- Création et injection de services (avec inject () recommandé)
- Injection contextuelle via les options de providers (provideService, provideHttpClient...)
Exemples de travaux pratiques (à titre indicatif)
- Création d'une application avec des composants autonomes
- Manipulations de données via services et affichage via binding avancé
Jour 2 - Matin
Formulaires Angular avec typage fort
- Types de formulaires :Template-driven vs Reactive
- Création de formulaires avec :
- FormsModule
- ReactiveFormsModule et FormBuilder
- Nouveauté Angular 17 / 18+ : 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
Exemple de travaux pratiques (à titre indicatif)
- Création de formulaires réactifs modernes avec typage strict
Jour 2 - Après-midi
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
Exemple de travaux pratiques (à titre indicatif)
- Intégrer une API REST externe dans un service et affichage dans le composant (avec ngIf / @if)
Jour 3 - Matin
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...)
- Rappel : avec les composants standalone, le routage est simplifié
- Le concept de SCAM (Single Component Angular Module) : obsolète depuis Angular 15+
- Chargement différé de composants via loadComponent ()
Exemples de travaux pratiques (à titre indicatif)
- Configuration d'un router avec plusieurs vue (home, about, produit)
- Navigation avec routerLink et paramètres dynamiques
Jour 3 - Après-midi
Les signals (Angular Reactive Signals API)
- Présentation des signals introduits depuis Angular 16+ :
- Signal(), computed(), effect()
- Réactivité sans RxJS, plus fluide et plus ergonomique
- 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 (optionnel)
- Tests de composants standalone
- Nouveautés Angular 20 : simplification de la configuration des tests pour composants autonomes
- E2E testing amélioré avec Playwright (préconisé) au lieu de Protractor
Exemples de travaux pratiques (à titre indicatif)
- 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
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
-
#
M2I BOOST APRÈS VOTRE FORMATION
Réactivation et consolidation des acquis en situation de travail
- 30 jours d’accompagnement personnalisé sur myM2i inclus ²
- Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
- ¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
- ² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2I, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation
Accessibilité de la formation
Le groupe M2I s'engage pour faciliter l'accessibilité de ses formations. Toutes nos formations sont accessibles aux personnes en situation de handicap : les détails de l
Modalités et délais d’accès à la formation
Les formations M2I sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 12 jours ouvrés.
