- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation Angular Avance
Angular est un framework de développement d’applications web porté par Google. Sans doute le plus polyvalent et le plus complet des frameworks actuels, il offre une expérience de développement sans comparaison.
Durant cette formation, nous plongerons dans les concepts avancés (zones, lazy loading, aot, …) d’Angular et découvrirons son écosystème (@ngrx, material, PWA, …).
Objectifs pédagogiques
Concrètement, cette formation Angular Avancé vous aurez acquis les connaissances et compétences nécessaires pour :
- Connaître l’architecture et les fonctionnalités avancées d’Angular
- Maîtriser les grands principes de la programmation réactive
- Développer une application web dynamique et performante
- Réaliser des tests unitaires
Objectifs opérationnels
Savoir utiliser les fonctionnalités avancées d'Angular pour développer des applications web évolutives.
Programme
Contenu du cours, module par module
11 modules
- Introduction au cli Nx, comparaison avec angular cli
- Définition d’un monorepo et création d’un workspace
- Architecture applicative, structure typique
Travaux pratiques
Description : Création d’un workspace avec Nx, ajout de 2 applications backoffice, public. Création de librairie
- Techniques pour améliorer les temps de démarrage de l’application
- Chargement dynamique des modules via la navigation (lazy loading avec les routes)
- Stratégies de préchargement des modules : PreloadAllModules et autres options
- Chargement différé de composants spécifiques
- Contrôle fin de la détection des changements (ChangeDetectorRef, NgZone)
- Introduction aux Signals (Angular 16+) : une nouvelle approche pour gérer les changements d’état, en complément ou en alternative à RxJS
Travaux pratiques
Description : Découpage du backouffice en modules fonctionnels, implémentation du loadChildren pour chaque module, mise en place du PreloadAllModules, Lazy-loading au niveau composant
- Pourquoi optimiser la structure des templates Angular
- Optimisation des listes dynamiques avec trackBy pour et *ngFor
- Utilisation des budgets et anticipation les dérives de performance
- Approfondissement de RxJS : gestion des flux asynchrones
- Bonnes pratiques de désabonnement
- Comparatif RxJS vs Signals (use cases)
Travaux pratiques
Description : Affichage d’une liste avec *ngFor + trackBy, gestion du loading avec async pipe. Désabonnement automatique, Amélioration de la détection de changement
- Comprendre les mécanismes de sécurité de navigation dans Angular
- Mise en place de Route Guards et de chargement préalable de données (Resolve)
- Les différents types de Guards (accès, sortie, enfants de routes)
- Protéger les accès avec CanActivate, CanActivateChild
- CanDeactivate : sécuriser la sortie
- Préchargement des données avec Resolve
Travaux pratiques
Description : Ajout canActivate,canDeactivate sur les routes backoffice, préchargement
- Mise en place de Redux dans une application Angular avec la plateforme @ngr
- Gestion de l’état applicatif (store)
- Débugging avec @ngrx/store-devtools
- Création d’actions asynchrones avec @ngrx/effects
- Introduction à ComponentStore et autres alternatives allégées
Travaux pratiques
Description : Mise en place d’un Store, création d’actions, reducers, selectors, appels http asynchrones avec @ngrx/effects, debug avec @ngrx/store-devtools
- Manipuler les formulaires dynamiques avec FormControl et FormGroup
- Composants de formulaires personnalisés réutilisables via ControlValueAccessor
- Règles de validation spécifiques, synchrones et asynchrones
- Utiliser le typage natif des formulaires (Typed Forms, Angular 14)
Travaux pratiques
Description : Formulaire réactif avec FormGroup fortement typé. Validateurs synchrones et asynchrones. Ajout d’un champ avec validateur personnalisé.
- Complémentarité entre tests unitaires et tests E2E
- Tests unitaires avec Jest
- Couverture de test, configuration des exceptions
- Tests e2e avec Cypress
Travaux pratiques
Description : Tests de validation de formulaire avec Jest. Tests de composants avec mocks. Mesure du code coverage. Création d’un test E2E Cypress : ajout et affichage d’une formation.
- Pourquoi cette nouveauté ?
- Mise en place d’un component standalone
- Une nouvelle architecture sans module
- Passage d’une architecture modulaire à un 100% standalone
- Standalone APIs globales : provideRouter, provideHttpClient, etc
Travaux pratiques
Description : Migration d’un SessionsModule en StandaloneComponent. Remplacement de NgModule par provideRouter, provideHttpClient, etc. Chargement d’un composant standalone via le routeur.
- Internationalisation : i18n marker
- Gestion des textes à traduire
- Gestion du pluriel
Travaux pratiques
Description : Utilisation de i18n markers ($localize). Ajout de messages avec contextes (meaning, description). Pluriel sur les messages (ex : nombre de formations). Chargement dynamique des fichiers de traduction.
- Principes et avantages du Server Side Rendering (SSR)
- Angular Universal avec ServerModule
- Rendu côté serveur avec un moteur back-end et @nguniversal/express-engine
Travaux pratiques
Description : Ajout d’Angular Universal avec ng add. Mise en place de ServerModule. Création d’un serveur Express personnalisé. Test du rendu SEO friendly.
Travaux pratiques
Cette formation est technique car Angular est un framework utilisé principalement dans les projets web professionnels importants ce qui signifie que le « ticket d’entrée » des compétences est plus élevé que pour Vue.js ou ReactJS. Même si dans les pré-requis nous demandons de connaître Angular il faut veiller à valider que les fondamentaux Angular sont bien acquis par les participants avant de les développer.
Beaucoup de concepts de cette formation ne sont pas directement liés entre eux (dépôt multi-projets, performances, organisation du code, sécurité, redux, programmation réactive, etc.) aussi il ne nous a pas semblé pertinent pédagogiquement de proposer un projet fil rouge mais plutôt des ateliers ciblés sur un objectif pédagogique précis afin d’isoler la complexité. Nous structurons donc notre apprentissage par la pratique autour de petits ateliers progressifs toujours selon une approche inductive comme « Quels sont les risques de disposer de plusieurs dépôts de composants ? que pourrait-on faire pour disposer d’un référentiel commun à toutes les équipes pour tous les projets ? Est-ce que Angular propose une solution dans ce sens ? », etc.
Tous les sujets conceptuels de la formation (monodépôt, gestion de la synchronisation de notre application, Angular Standalone, etc.) sont validés sous forme de quiz (à quoi ça sert ?) et nous réservons les ateliers pratiques pour valider les acquis opérationnels dans la mise en œuvre d’Angular.
Programme mis à jour le 22/06/2026
Public concerné
Ce cours s’adresse aux développeurs et architectes souhaitant enrichir leurs connaissances sur Angular dans le but de concevoir une application web dynamique et performante. Ce même public peut également avoir la charge des tests et de la maintenance d’une application existante. Les développeurs concernés sont à l’aise avec les fondamentaux de la programmation réactive et ont déjà pris part à un ou plusieurs projets de développement avec Angular.
Prérequis
Les participants à cette formation possèdent de bonnes connaissances préalables d’Angular validées par la mise en œuvre d’un ou plusieurs projets de développement. Les technologies connexes du web (JavaScript, HTML, CSS...) sont également connues ainsi que les principaux outils de développement propres au champ d’action front-end.
La formation Angular : Développer une application web (ANGR) constitue une porte d'entrée idéale.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,7/5
31 avis
« Mon avis sur le contenu du stage : "L'enchainement théorie -> démonstration par le formateur -> exercice pratique -> correction pour chaque chapitre de la formation était parfait." Mon avis sur le formateur : "Non seulement le formateur avait un haut niveau de compétences techniques mais il maitrisait parfaitement la pédagogie nécessaire à ce genre de formation. Il a su s'adapter à notre niveau, nos besoins et questions. Le tout toujours dans une bonne ambiance. Il a su nous donner l'envie de mettre tout de suite en pratique dans nos projets pro ou perso nos nouvelles connaissances et ce même après nos journées bien remplies ! " Ce que j'ai le plus apprécié : "Le fait que l'on ai eu les liens et identifiants assez tôt : machine virtuelle, teams, espace perso, etc afin de pouvoir tout tester et de pas perdre de temps au début de la formation" »
RVLA POSTE DISFE « Mon avis sur le formateur : "Le formateur s'assure toujours de la bonne compréhension, de l'avancement de chaque stagiaire et ne laisse personne en arrière, a une maîtrise visible et réelle des sujets de la formation, a de la disponibilité pour des questions au-delà du cadre ou simplement, consulte les stagiaires sur les points souhaités d'approfondissement." Ce que j'ai le plus apprécié : "Exhaustivité des éléments fournis par courriel en amont de la formation." Ce que j'ai le moins apprécié : "Quelques difficultés pour accéder au bureau de la VM (resté bloqué dans la console de gestion), palliées par installation sur le poste du stagiaire du nécessaire." »
PL « Mon avis sur le formateur : "A l'écoute pour toutes les personnes qui avaient des problèmes, il prenait bien son temps avec chacun d'entre nous pour qu'on comprenne et ses explications étaient claires et concises, on sent qu'il maîtrise très bien le sujet. Il a aussi su bien s'adapter aux conditions de formation à distance." Mon avis sur la salle de formation : "Formation à distance donc nous étions chacun chez nous" Ce que j'ai le plus apprécié : "Les travaux pratiques" »
BOUKHARI NassimOXYL
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- React : AvancéRéf. REJA2 joursAvancéProchaine session : 12 oct.1 700 €
- Nest.JS : Développer vos APIs avec le framework Node.JSRéf. NEST4 joursFondamentalProchaine session : 2 nov.2 490 €
- Node.js avancéRéf. NJSA3 joursAvancé
- Design Applicatif : Architecturer une application pour ses besoins présents et futursRéf. DAAA2 joursIntermédiaireProchaine session : 5 nov.1 740 €