- Référence : AGAV
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
2050€ HT
Choisir une date et RéserverFormation Angular Avancé
4.7 sur 5 étoiles
5 étoiles
4 étoiles
3 étoiles
2 étoiles
1 étoile
Durée
3 jours
Niveau
Intermédiaire
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
AGAV
Éligible CPF
Non
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, …).
Objectif opérationnel :
Savoir utiliser les fonctionnalités avancées d'Angular pour développer des applications web évolutives.
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
Public :
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 ce test.
Jour 1
Définition d’un monorepo et création d’un workspace
Architecture applicative, structure typiqueTravaux pratiquesObjectif : Comprendre l’intérêt d’un monorepo et d’un structuration projet application/librairies
Description : Création d’un workspace avec Nx, ajout de 2 applications backoffice, public. Création de librairie
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 à RxJSTravaux pratiquesObjectif : Savoir optimiser le chargement des pages
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
Optimisation des listes dynamiques avec trackBy pour et *ngFor
Utilisation des budgets et anticipation les dérives de performance
Bonnes pratiques de désabonnement
Comparatif RxJS vs Signals (use cases)Travaux pratiquesObjectif : Mettre en place des templates performants. Contrôler les souscriptions.
Description : Affichage d’une liste avec *ngFor + trackBy, gestion du loading avec async pipe. Désabonnement automatique, Amélioration de la détection de changementJour 2
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 ResolveTravaux pratiquesObjectif : Savoir protéger les routes via des Guards et précharger les données avec Resolve
Description : Ajout canActivate,canDeactivate sur les routes backoffice, préchargement
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éesTravaux pratiquesObjectif : Savoir gérer l’état global avec NgRx et déclencher des effets asynchrones
Description : Mise en place d’un Store, création d’actions, reducers, selectors, appels http asynchrones avec @ngrx/effects, debug avec @ngrx/store-devtools
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 pratiquesObjectifs : Savoir créer des formulaires complexes avec validation et implémenter des champs dynamiques et des validateurs personnalisés.
Description : Formulaire réactif avec FormGroup fortement typé. Validateurs synchrones et asynchrones. Ajout d’un champ avec validateur personnalisé.Jour 3
Tests unitaires avec Jest
Couverture de test, configuration des exceptions
Tests e2e avec CypressTravaux pratiquesObjectif : Savoir écrire des tests unitaires avec Jest.et e2e avec Cypress
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.
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, etcTravaux pratiquesObjectifs : Savoir passer d’un module Angular classique à une architecture 100% standalone. Utiliser les provide* APIs.
Description : Migration d’un SessionsModule en StandaloneComponent. Remplacement de NgModule par provideRouter, provideHttpClient, etc. Chargement d’un composant standalone via le routeur.
Gestion des textes à traduire
Gestion du plurielTravaux pratiquesObjectif : Savoir concevoir des applications multilingues
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.
Angular Universal avec ServerModule
Rendu côté serveur avec un moteur back-end et @nguniversal/express-engineTravaux pratiquesObjectif : Savoir générer une version server-rendered du site public.
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.
NX et les projets grand échelle
Introduction au cli Nx, comparaison avec angular cliDéfinition d’un monorepo et création d’un workspace
Architecture applicative, structure typiqueTravaux pratiquesObjectif : Comprendre l’intérêt d’un monorepo et d’un structuration projet application/librairies
Description : Création d’un workspace avec Nx, ajout de 2 applications backoffice, public. Création de librairie
Optimiser les performances et la réactivité
Techniques pour améliorer les temps de démarrage de l’applicationChargement 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 à RxJSTravaux pratiquesObjectif : Savoir optimiser le chargement des pages
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
Optimisation des templates
Pourquoi optimiser la structure des templates AngularOptimisation des listes dynamiques avec trackBy pour et *ngFor
Utilisation des budgets et anticipation les dérives de performance
RxJS avancé
Approfondissement de RxJS : gestion des flux asynchronesBonnes pratiques de désabonnement
Comparatif RxJS vs Signals (use cases)Travaux pratiquesObjectif : Mettre en place des templates performants. Contrôler les souscriptions.
Description : Affichage d’une liste avec *ngFor + trackBy, gestion du loading avec async pipe. Désabonnement automatique, Amélioration de la détection de changementJour 2
Navigation sécurisée
Comprendre les mécanismes de sécurité de navigation dans AngularMise 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 ResolveTravaux pratiquesObjectif : Savoir protéger les routes via des Guards et précharger les données avec Resolve
Description : Ajout canActivate,canDeactivate sur les routes backoffice, préchargement
NGRX (Workflow redux)
Mise en place de Redux dans une application Angular avec la plateforme @ngrGestion 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éesTravaux pratiquesObjectif : Savoir gérer l’état global avec NgRx et déclencher des effets asynchrones
Description : Mise en place d’un Store, création d’actions, reducers, selectors, appels http asynchrones avec @ngrx/effects, debug avec @ngrx/store-devtools
Reactive Forms
Manipuler les formulaires dynamiques avec FormControl et FormGroupComposants 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 pratiquesObjectifs : Savoir créer des formulaires complexes avec validation et implémenter des champs dynamiques et des validateurs personnalisés.
Description : Formulaire réactif avec FormGroup fortement typé. Validateurs synchrones et asynchrones. Ajout d’un champ avec validateur personnalisé.Jour 3
Tests unitaires et E2E
Complémentarité entre tests unitaires et tests E2ETests unitaires avec Jest
Couverture de test, configuration des exceptions
Tests e2e avec CypressTravaux pratiquesObjectif : Savoir écrire des tests unitaires avec Jest.et e2e avec Cypress
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.
Angular Standalone
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, etcTravaux pratiquesObjectifs : Savoir passer d’un module Angular classique à une architecture 100% standalone. Utiliser les provide* APIs.
Description : Migration d’un SessionsModule en StandaloneComponent. Remplacement de NgModule par provideRouter, provideHttpClient, etc. Chargement d’un composant standalone via le routeur.
Internationalisation
Internationalisation : i18n markerGestion des textes à traduire
Gestion du plurielTravaux pratiquesObjectif : Savoir concevoir des applications multilingues
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.
Server Side Rendering : Angular Universal
Principes et avantages du Server Side Rendering (SSR)Angular Universal avec ServerModule
Rendu côté serveur avec un moteur back-end et @nguniversal/express-engineTravaux pratiquesObjectif : Savoir générer une version server-rendered du site public.
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.
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.
Dates et lieux
1
2
3
4
5
1
2
3
4
5
Votre formation prise en charge jusqu'à 100% des coûts pédagogiques ! *
Depuis 2011, Atlas (ex-Fafiec) a sélectionné PLB Consultant pour vous proposer les meilleures formations autour du développement objet avec .NET, Java et C++.
- Sessions inter-entreprise sur Paris et Lille.
- Sessions intra-entreprise sur toute la France.
* jusqu'à 100% des coûts pédagogiques selon votre branche d'activité dans la limite des fonds mutualisés dédiés aux actions collectives et en application des critères de prise en charge en vigueur (cf conditions détaillées sur le site d'Atlas)
Vous pouvez retrouver le lien direct vers cette formation sur le site d'Atlas, à l'adresse suivante :
Avis des participants à la formation Angular Avancé
Les avis figurant ci-dessous 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.
RV
5/5
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"
PL
5/5
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."
BOUKHARI Nassim
5/5
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"
CE
4/5
Mon avis sur le contenu du stage :
"La formation répond à mes attentes seulement en partie car il me manque des bases pour faire une formation angular avancée"
Mon avis sur la salle de formation :
"Personnel agréable et bon accueil"
Ce que j'ai le plus apprécié :
"Le cadre et l'environnement de la formation agréables et calmes"
Ce que j'ai le moins apprécié :
"Rien à signaler"
P
5/5
Mon avis sur le contenu du stage :
"Niveau technique excellent pour mon niveau. TP très bien. Support de cours en ligne EXCELLENT, super idée et super pratique avec le menu pour pouvoir retrouver ce que l'on cherche."
Mon avis sur le formateur :
"Super intervenant, avec des cas concrets qui prend en compte nos demandes au fur et à mesure."
Mon avis sur la salle de formation :
"Mis à part teams car formation à distance, difficile d'évaluer le reste"
PG
5/5
Mon avis sur le contenu du stage :
"contenu dense, mais dû au fait que je n'avais pas exactement le niveau requis pour la formation"
Mon avis sur le formateur :
"Matthieu est un très bon animateur, avec un très bon niveau technique. Il n'hésite pas à sortir parfois du scénario pour illustrer ses propos ou répondre à des questions, quitte à se mettre parfois en difficulté, en toute honnêteté et transparence, ce qui est un gage de qualité."
ABDOUL Sharif
5/5
Mon avis sur le formateur :
"Explique très bien et sait bien ce qu'il fait. Toujours à l'écoute en cas de problème."
Mon avis sur la salle de formation :
"Formation en télé-présence "
Ce que j'ai le plus apprécié :
"Les travaux pratiques pour mieux comprendre le théorique."
BF
5/5
Mon avis sur le contenu du stage :
"la formation est super intéressante , ça va beaucoup m'aider pour améliorer la qualité de notre code angular et optimiser la performance . "
Mon avis sur le formateur :
"l'animateur est a l'écoute , explique super bien et interagie avec tt les participants de la formation . "
PIASCO Matthieu
5/5
Mon avis sur le contenu du stage :
"En complète corrélation avec mes attentes, mes besoins et mes besoins projet"
Mon avis sur le formateur :
"Excellent formateur. Très bon orateur maîtrisant à la perfection son sujet."
MJ
5/5
Mon avis sur le contenu du stage :
"La formation à répondu à de nombreuses problèmatiques projet."
Mon avis sur le formateur :
"De très bon conseils, très compétent et pédagogue."
INGANI Jude
4/5
Mon avis sur le contenu du stage :
"Contenu élargi sur le sujet et très intéressant"
Mon avis sur le formateur :
"Intervenant accessible à l'écoute de tous et connaissant bien son sujet"
CR
4/5
Mon avis sur le contenu du stage :
"Globalement très bien, j’aurais aimé avoir un poil plus de temps pour pratiquer... Mais bon, 3 jours c’est court donc ça reste très bien"
DC
5/5
Mon avis sur le contenu du stage :
"tres dense"
Ce que j'ai le plus apprécié :
"disponibilités"
LA
5/5
MOLINA Thibaud
5/5
PD
4/5
ML
4/5
BH
5/5
ALTIERI Guillaume
5/5
LG
4/5
PV
5/5
JL
5/5
AS
5/5
PJ
4/5
KI
5/5
ZC
4/5
Ces formations peuvent aussi vous intéresser :
React : Avancé
- 2 jrsMaîtriser les fonctionnalités avancées de React
- Niveau : Avancé
- Référence : REJA
- Niveau : Intermédiaire
- Certification : Certified Vue.JS Developer
- Référence : IVJS
Maîtrisez Express, l’API REST, l’asynchrone et l’accès aux données (MongoDB, Redis)
- Niveau : Fondamental
- Référence : INOJ
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
4,7/5
94% de nos participants
sont satisfaits ou
très satisfaits
Formateurs experts
validés par
PLB
%
Des participants
recommandent
nos formations
