ANGULAR

Angular

Angular n'est pas qu'un simple framework populaire — c'est l'Ă©pine dorsale des applications web d'entreprise mondialement utilisĂ©es. En 2026, alors que les outils de dĂ©veloppement basĂ©s sur l'IA deviennent essentiels Ă  la productivitĂ©, cette formation va au-delĂ  de l'enseignement de la syntaxe Angular.

Nos formateurs experts (Google Developers Experts, contributeurs du framework Angular et mainteneurs de NG-ZORRO) vous enseigneront comment exploiter les outils LLM comme Claude pour accélérer votre développement. Mais voici la différence critique : **utiliser un LLM ne signifie pas accepter aveuglément le code généré**. Cette formation insiste sur la compréhension de chaque ligne produite, ce qui vous permet de déboguer, optimiser et maintenir efficacement vos applications.

Que vous soyez développeur frontend ou ingénieur full-stack, vous apprendrez à :

  • CrĂ©er des applications Angular robustes et Ă©volutives avec les patterns modernes (signaux, composants autonomes, architecture composable)
  • Écrire des tests avec 100% de couverture pour garantir la maintenabilitĂ© Ă  long terme
  • MaĂźtriser l'Ă©cosystĂšme Angular (injection de dĂ©pendances, routage, formulaires, gestion d'Ă©tat avec NgRx Signal Store)
  • Être productif avec le dĂ©veloppement assistĂ© par IA tout en maintenant une comprĂ©hension complĂšte de votre codebase

À la fin, vous aurez une expĂ©rience pratique avec une application complĂšte de rĂ©pertoire de personnel construite progressivement Ă  travers les exercices, vous pourrez passer les certifications Angular Training Level 1 & 2, et surtout — vous obtiendrez l'expertise pour construire des applications prĂȘtes pour la production qui durent.

✓ Formation officielle SFEIR InstituteNiveau IntermĂ©diaire⏱ 4 jours (28h)

Ce que vous allez apprendre

  • DĂ©velopper des applications Angular prĂȘtes pour la production avec les patterns modernes
  • Exploiter les outils LLM pour la productivitĂ© tout en comprenant et en maintenant le code gĂ©nĂ©rĂ©
  • Écrire des tests unitaires complets garantissant 100% de couverture et une maintenabilitĂ© Ă  long terme
  • MaĂźtriser l'Ă©cosystĂšme Angular dans sa globalitĂ© (DI, routage, formulaires, gestion d'Ă©tat, testing)

Prérequis

  • JavaScript moderne (scope, arrow functions, classes, notion du 'this', programmation asynchrone avec les promises)
  • Connaissances basiques en TypeScript (typage basique, interfaces)
  • ComprĂ©hension des Observables vs Promises

Public cible

  • DĂ©veloppeurs frontend, DĂ©veloppeurs Full-stack JavaScript / Node.js, DĂ©veloppeurs web construisant ou maintenant des applications Angular, DĂ©veloppeurs cherchant Ă  maĂźtriser Angular moderne avec des workflows assistĂ©s par IA

Programme de la Formation

33 modules pour maĂźtriser les fondamentaux

Cours 1 : Jour 1 : Fondations & PremiĂšre Prise en Main avec les Essentiels d'Angular

Objectifs
  • Configurer un environnement de dĂ©veloppement Angular avec les outils modernes (IDE, CLI, systĂšme de build)
  • Initialiser de nouveaux projets Angular avec une configuration appropriĂ©e et intĂ©gration de Material
  • Utiliser efficacement les commandes CLI d'Angular pour les workflows de dĂ©veloppement quotidiens
Sujets abordés
  • →Configuration de l'IDE : WebStorm vs VS Code
  • →Installation d'Angular et initialisation de projet
  • →IntĂ©gration d'Angular Material
  • →Commandes CLI et workflow de dĂ©veloppement moderne
  • →SystĂšme de build et bundlers
Activités

Bootstrapper une application Angular

Créer votre premier composant avec le CLI

Configurer l'environnement de développement

Objectifs
  • Comprendre la structure des composants et crĂ©er des composants avec les patterns modernes autonomes
  • Utiliser l'interpolation de template et les expressions pour afficher des donnĂ©es dynamiques
  • MaĂźtriser le bootstrapping des composants et les phases du cycle de vie
Sujets abordés
  • →Architecture et structure des composants
  • →Composants autonomes vs NgModules
  • →Interpolation de template et expressions
  • →Bootstrapping des composants
  • →Cycle de vie des composants
Activités

Créer des composants imbriqués

Comprendre les bases de la communication entre composants

Objectifs
  • Concevoir et construire des structures de composants hiĂ©rarchiques pour des applications complexes
  • ImplĂ©menter les relations parent-enfant et les patterns d'architecture d'application
Sujets abordés
  • →Construire des arbres de composants
  • →Relations parent-enfant
  • →Patterns d'architecture d'application
Activités

Construire une hiérarchie de composants pour un répertoire du personnel

Objectifs
  • MaĂźtriser le systĂšme de rĂ©activitĂ© Signal et crĂ©er des templates rĂ©actifs avec des valeurs calculĂ©es
  • Appliquer diffĂ©rents types de data binding (interpolation, propriĂ©tĂ©, Ă©vĂ©nement, bi-directionnel) de maniĂšre appropriĂ©e
  • Optimiser les performances des templates en utilisant les signals et NgOptimizedImage
Sujets abordés
  • →SystĂšme de rĂ©activitĂ© avec Signals (signals, computed, effect)
  • →Types de data binding (interpolation, propriĂ©tĂ©, Ă©vĂ©nement, bi-directionnel)
  • →DiffĂ©rence entre propriĂ©tĂ© et attribut
  • →Variables de template
  • →NgOptimizedImage pour les performances
Activités

Afficher des données dynamiques avec signals

Créer des templates réactifs avec le binding approprié

Objectifs
  • GĂ©rer les interactions utilisateur et les Ă©vĂ©nements en utilisant efficacement la syntaxe de binding d'Ă©vĂ©nements d'Angular
  • ImplĂ©menter le binding bi-directionnel avec ngModel pour les contrĂŽles de formulaire
  • Comprendre la propagation d'Ă©vĂ©nements et construire des patterns d'interaction utilisateur rĂ©actifs
Sujets abordés
  • →Syntaxe du binding d'Ă©vĂ©nements
  • →Objets Ă©vĂ©nement et propagation
  • →Binding bi-directionnel avec ngModel
  • →Patterns d'interaction utilisateur
Activités

Gérer les clics de bouton et les entrées de formulaire

Réagir aux interactions utilisateur avec les signals

Objectifs
  • ImplĂ©menter les lifecycle hooks des composants pour l'initialisation et le nettoyage
  • GĂ©rer les ressources efficacement en utilisant OnDestroy et les patterns de nettoyage appropriĂ©s
  • Utiliser les patterns d'initialisation basĂ©s sur les signals pour les applications Angular modernes
Sujets abordés
  • →Phases du cycle de vie des composants
  • →Hooks OnInit, OnDestroy, OnChanges
  • →Nettoyage et gestion des ressources
  • →Patterns d'initialisation basĂ©s sur les signals
Activités

Implémenter les lifecycle hooks pour l'initialisation des données

Objectifs
  • CrĂ©er des composants rĂ©utilisables en utilisant les dĂ©corateurs @Input et @Output
  • ImplĂ©menter les patterns de communication parent-enfant via les inputs et les Ă©vĂ©nements de sortie
  • Utiliser les inputs/outputs basĂ©s sur les signals pour la communication de composants moderne et type-safe
Sujets abordés
  • →Inputs de composants (@Input decorator)
  • →Outputs de composants (@Output decorator)
  • →Patterns d'Ă©mission d'Ă©vĂ©nements
  • →Validation et inputs requis
  • →Inputs et outputs basĂ©s sur les signals
Activités

Créer des composants personnalisables avec inputs

Construire des patterns de communication parent-enfant

Objectifs
  • Utiliser les pipes Angular intĂ©grĂ©s pour formater les donnĂ©es dans les templates
  • CrĂ©er des pipes personnalisĂ©s pour Ă©tendre la fonctionnalitĂ© des templates
  • Appliquer efficacement les pipes avec la composition et le chaĂźnage pour la transformation de donnĂ©es
Sujets abordés
  • →Pipes built-in (date, currency, uppercase, lowercase, etc.)
  • →Pipes pures vs impures
  • →CrĂ©er des pipes personnalisĂ©s
  • →Composition et chaĂźnage de pipes
Activités

Formater des dates et des valeurs avec les pipes

Créer un pipe personnalisé pour les valeurs par défaut

Objectifs
  • CrĂ©er et utiliser des services avec le systĂšme d'Injection de DĂ©pendances d'Angular
  • Comprendre l'enregistrement des services et les scopes d'injection pour la fonctionnalitĂ© Ă  l'Ă©chelle de l'application
  • ImplĂ©menter les patterns d'initialisation appropriĂ©s et les hiĂ©rarchies de services
Sujets abordés
  • →Services et le @Injectable decorator
  • →Enregistrement et providers des services
  • →Injecter des services dans les composants
  • →Scopes d'injection et hiĂ©rarchies
  • →Patterns d'initialisation des services
Activités

Créer et utiliser votre premier service

Réaliser une initialisation au niveau de l'application

Objectifs
  • Utiliser les directives built-in pour contrĂŽler la structure et le style du DOM
  • CrĂ©er des directives d'attribut personnalisĂ©es pour Ă©tendre le comportement des Ă©lĂ©ments
  • ImplĂ©menter les patterns de communication des directives en utilisant les host bindings et ElementRef
Sujets abordés
  • →Directives d'attribut vs directives structurelles
  • →Directives built-in (ngIf, ngFor, ngSwitch)
  • →SĂ©lecteurs de directives et API
  • →ElementRef et manipulation du DOM
  • →Host bindings et dĂ©corateurs listener
Activités

Créer des directives d'attribut personnalisées

Utiliser efficacement les directives built-in

Cours 2 : Jour 2 : Construire des Applications Interactives avec Formulaires & Routage

Objectifs
  • Configurer et implĂ©menter le routage dans les Single Page Applications
  • Naviguer entre les routes en utilisant Ă  la fois les approches template et programmatiques
  • Passer et rĂ©cupĂ©rer les donnĂ©es via les paramĂštres de route et les query strings
Sujets abordés
  • →Philosophie du routage dans les Single Page Applications
  • →Configuration et dĂ©finition des routes
  • →Router outlets et navigation
  • →Patterns d'URL et paramĂštres
  • →MĂ©thodes de navigation (routerLink, service Router)
Activités

Configurer un routage de base

Naviguer entre les routes

Passer des données à travers les paramÚtres de route

Objectifs
  • Utiliser la syntaxe moderne de control flow Angular (@if, @for, @switch) pour la logique de rendu
  • Rendre les listes dynamiques de maniĂšre efficace avec des performances optimales
  • Migrer des directives structurelles hĂ©ritĂ©es vers la syntaxe moderne de control flow
Sujets abordés
  • →Nouveau control flow Angular (@if, @for, @switch)
  • →Directives structurelles built-in (*ngIf, *ngFor, *ngSwitch)
  • →Patterns de rendu conditionnel
  • →Rendu de listes et performances
  • →Migration de l'ancienne Ă  la nouvelle syntaxe
Activités

Rendre des listes dynamiques avec @for

Gérer l'UI conditionnelle avec @if/@switch

Objectifs
  • RĂ©cupĂ©rer les donnĂ©es des API REST en utilisant HttpClient et HTTP resources
  • GĂ©rer les rĂ©ponses HTTP et les erreurs de maniĂšre Ă©lĂ©gante dans les applications
  • Relier les Observables et les Signals pour les patterns de chargement de donnĂ©es rĂ©actifs
Sujets abordés
  • →Configuration et utilisation de HttpClient
  • →MĂ©thodes HTTP (GET, POST, PUT, DELETE)
  • →HTTP resources pour le chargement rĂ©actif de donnĂ©es
  • →Types de rĂ©ponse et gestion d'erreurs
  • →Relier les Observables et les Signals (toSignal, resource)
Activités

Récupérer des données d'une API REST

Afficher les données du serveur de maniÚre réactive

Gérer les erreurs HTTP

Objectifs
  • Construire des formulaires pilotĂ©s par template avec validation et affichage d'erreurs
  • ImplĂ©menter la gestion de l'Ă©tat du formulaire et la gestion de la soumission
  • Utiliser les validateurs built-in pour assurer l'intĂ©gritĂ© des donnĂ©es
Sujets abordés
  • →FormsModule et directive ngModel
  • →État du formulaire et validation
  • →Retour utilisateur et affichage d'erreurs
  • →Gestion de la soumission de formulaire
  • →Validateurs built-in
Activités

Créer un formulaire de création de personne

Implémenter la validation de formulaire

Afficher les messages d'erreur de validation

Objectifs
  • Construire des formulaires rĂ©actifs complexes en utilisant FormGroup et FormControl
  • ImplĂ©menter des validateurs personnalisĂ©s pour les rĂšgles de validation spĂ©cifiques au domaine
  • CrĂ©er des composants de formulaire rĂ©utilisables avec les patterns rĂ©actifs
Sujets abordés
  • →ReactiveFormsModule et FormControl/FormGroup
  • →Construction de formulaires programmatique
  • →Patterns de validation de formulaire
  • →Validateurs personnalisĂ©s
  • →Formulaires rĂ©actifs autonomes (sans NgModule)
Activités

Construire des formulaires avec FormGroup/FormControl

Implémenter une logique de validation complexe

Créer des composants de formulaire réutilisables

Objectifs
  • Construire des formulaires modernes en utilisant l'API de formulaire basĂ©e sur les signals d'Angular
  • ImplĂ©menter la gestion de formulaires type-safe avec les signals pour une meilleure expĂ©rience dĂ©veloppeur
  • CrĂ©er des contrĂŽles de formulaire personnalisĂ©s avec les patterns de composition basĂ©s sur les signals
Sujets abordés
  • →API de formulaire basĂ©e sur les signals
  • →Directive Field et composition de formulaires
  • →Gestion d'Ă©tat de formulaire avec les signals
  • →Validation avec les signal forms
  • →Gestion de formulaires type-safe
Activités

Construire des formulaires avec l'API moderne de signal form

Implémenter des patterns de validation

Créer des contrÎles de formulaire personnalisés

Objectifs
  • Évaluer et choisir l'approche de formulaire appropriĂ©e pour diffĂ©rents cas d'usage
  • Migrer les formulaires existants entre les approches pilotĂ©es par template, rĂ©actives et basĂ©es sur les signals
  • Optimiser les performances des formulaires en fonction des exigences du projet
Sujets abordés
  • →Formulaires pilotĂ©s par template vs rĂ©actifs vs signal
  • →Quand utiliser chaque approche
  • →StratĂ©gies de migration
  • →ConsidĂ©rations de performance
Activités

Comparer les différentes approches de formulaires

Choisir la bonne stratégie de formulaire pour votre cas d'usage

Objectifs
  • Combiner le routage avec le chargement de donnĂ©es rĂ©actif pour une navigation transparente
  • MaĂźtriser les patterns de composition de signals pour les scĂ©narios rĂ©actifs complexes
  • ImplĂ©menter les workflows CRUD complets avec le flux de donnĂ©es rĂ©actif
Sujets abordés
  • →Combiner le routage avec le chargement de donnĂ©es
  • →Patterns de composition de signals
  • →linkedSignal pour les dĂ©pendances calculĂ©es
  • →RxMethod et opĂ©rations asynchrones
  • →Workflows CRUD complets
Activités

Construire une page de détail/édition avec routage

Implémenter des opérations CRUD complÚtes

Maßtriser le flux de données réactif

Cours 3 : Jour 3 : Patterns Avancés & Architecture

Objectifs
  • ImplĂ©menter le lazy loading et le code splitting pour une taille de bundle optimale
  • Configurer les structures de routage imbriquĂ©es avec les routes enfants et les feature modules
  • Optimiser les performances de l'application en utilisant les stratĂ©gies de preloading
Sujets abordés
  • →Lazy loading et code splitting
  • →Feature modules et routage
  • →Routes enfants et routage imbriquĂ©
  • →ParamĂštres de route et query strings
  • →StratĂ©gies de preloading de route
Activités

Implémenter des feature modules lazy-loaded

Configurer les routes enfants

Optimiser la taille du bundle avec le lazy loading

Objectifs
  • ImplĂ©menter les guards de route pour protĂ©ger les routes en fonction de l'authentification et de l'autorisation
  • Utiliser le chaĂźnage et la composition des guards pour les scĂ©narios de contrĂŽle d'accĂšs complexes
  • GĂ©rer la redirection de route et prĂ©venir les changements non enregistrĂ©s avec les guards
Sujets abordés
  • →Types de guards (CanActivate, CanDeactivate, CanMatch)
  • →Syntaxe de guard fonctionnel
  • →Guards d'authentification et autorisation
  • →Patterns de redirection de route
  • →ChaĂźnage et composition de guards
Activités

Implémenter des guards d'authentification

Protéger les routes en fonction des rÎles utilisateur

Gérer les changements non enregistrés

Objectifs
  • ImplĂ©menter les resolvers pour prĂ©-charger les donnĂ©es avant l'activation de la route
  • Lier les donnĂ©es du resolver aux inputs des composants pour un flux de donnĂ©es transparent
  • GĂ©rer les dĂ©faillances de resolver de maniĂšre Ă©lĂ©gante avec les patterns de gestion d'erreurs
Sujets abordés
  • →Pattern resolver et prĂ©-chargement de donnĂ©es
  • →ImplĂ©mentation de resolver
  • →Resolvers fonctionnels
  • →Binding d'entrĂ©e de composant avec resolvers
  • →Gestion d'erreurs dans les resolvers
Activités

Implémenter des resolvers pour les données de route

Charger les données avant l'initialisation du composant

Gérer les défaillances de resolver gracieusement

Objectifs
  • ImplĂ©menter les intercepteurs HTTP pour les prĂ©occupations transversales (authentification, logging, gestion d'erreurs)
  • Transformer les requĂȘtes et les rĂ©ponses globalement en utilisant les chaĂźnes d'intercepteurs
  • GĂ©rer les erreurs et implĂ©menter la logique de retry au niveau de l'intercepteur
Sujets abordés
  • →Pattern intercepteur et cas d'usage
  • →Transformation de requĂȘte/rĂ©ponse
  • →Gestion d'erreurs et logique de retry
  • →Injection de token d'authentification
  • →HTTP context pour un comportement conditionnel
Activités

Créer un intercepteur d'authentification

ImplĂ©menter la mise en cache de requĂȘte

Gérer les erreurs HTTP globalement

Objectifs
  • Utiliser la projection de contenu pour crĂ©er des composants flexibles et rĂ©utilisables
  • ImplĂ©menter les slots nommĂ©s pour les projections de contenu multiples
  • Construire les composants wrappers transparents avec les patterns de projection basĂ©s sur les signals
Sujets abordés
  • →ng-content pour la composition de composants
  • →Slots nommĂ©s et projections multiples
  • →Composants wrapper transparents
  • →Patterns de projection basĂ©s sur les signals
  • →États de chargement et overlays
Activités

Créer un composant overlay réutilisable

Utiliser la projection de contenu pour la flexibilité

Construire des patterns d'état de chargement

Objectifs
  • CrĂ©er des composants gĂ©nĂ©riques en utilisant ngTemplateOutlet pour le rendu dynamique de templates
  • Utiliser ViewChild pour interroger et interagir avec les rĂ©fĂ©rences de template
  • Construire des composants hautement composables par la composition pilotĂ©e par template
Sujets abordés
  • →ng-template pour les templates rĂ©utilisables
  • →ng-container pour le regroupement logique
  • →ngTemplateOutlet pour les templates dynamiques
  • →ViewChild et rĂ©fĂ©rences de template
  • →RequĂȘtes de contenu et gĂ©nĂ©riques
Activités

Créer des composants de liste générique

Implémenter la composition pilotée par template

Utiliser ViewChild pour l'interaction entre composants

Objectifs
  • CrĂ©er des directives structurelles personnalisĂ©es pour la manipulation avancĂ©e du DOM
  • Utiliser TemplateRef et ViewContainerRef pour l'instanciation impĂ©rative de composants
  • MaĂźtriser les patterns de composition de directives pour la logique de template complexe
Sujets abordés
  • →Syntaxe de directive structurelle (*directive)
  • →TemplateRef et ViewContainerRef
  • →CrĂ©er des directives structurelles personnalisĂ©es
  • →CrĂ©ation impĂ©rative de composants
  • →Patterns de composition de directives
Activités

Créer une directive structurelle personnalisée

Implémenter l'instanciation conditionnelle de composants

Maßtriser les patterns de templating avancés

Cours 4 : Jour 4 : Testing, Gestion d'État & Sujets AvancĂ©s

Objectifs
  • Écrire des tests unitaires complets pour les composants, services et directives Angular
  • Atteindre 100% de couverture de code avec des stratĂ©gies de test efficaces
  • Mocker les appels HTTP et les dĂ©pendances en utilisant les utilitaires de test Angular
Sujets abordés
  • →Outils de test et configuration (Vitest, utilitaires de test Angular)
  • →Test de composants avec TestBed
  • →StratĂ©gies de test de composants
  • →Test de services et appels HTTP
  • →Test de directives et pipes
  • →Angular Testing Library pour des tests rĂ©alistes
  • →Mocking et test doubles
  • →Couverture de test et bonnes pratiques
Activités

Écrire des tests de composant complets

Tester les services avec HTTP mocké

Atteindre 100% de couverture de code

Objectifs
  • Concevoir et implĂ©menter la gestion d'Ă©tat scalable en utilisant NgRx Signal Store
  • GĂ©rer les mutations d'Ă©tat complexes, l'Ă©tat dĂ©rivĂ© et les opĂ©rations asynchrones
  • Tester les applications basĂ©es sur le store avec l'isolation et le mocking appropriĂ©s
Sujets abordés
  • →Patterns et principes de gestion d'Ă©tat
  • →NgRx Signal Store vs NgRx classique
  • →CrĂ©ation et provisionnement de stores
  • →SĂ©lecteurs d'Ă©tat et valeurs calculĂ©es
  • →withComputed pour la dĂ©rivation d'Ă©tat
  • →withProps pour les actions paramĂ©trĂ©es
  • →withMethods et patchState pour les mutations
  • →RxMethod pour les opĂ©rations asynchrones
  • →Store hooks pour l'initialisation
  • →Providers scoped par route
  • →Patterns de gestion d'entitĂ©s
  • →Test des composants basĂ©s sur le store
Activités

Construire un store complet pour le répertoire du personnel

Implémenter des mutations d'état complexes

Gérer les effets secondaires asynchrones avec RxMethod

Tester les applications basées sur le store

Objectifs
  • Optimiser les performances de l'application en utilisant la stratĂ©gie de change detection OnPush
  • Construire des applications zoneless avec des performances amĂ©liorĂ©es et moins de surcharge JavaScript
  • DĂ©boguer les problĂšmes de change detection et surveiller les implications de performance
Sujets abordés
  • →MĂ©canisme de change detection
  • →StratĂ©gie OnPush pour l'optimisation
  • →Applications zoneless
  • →Implications de performance
  • →Debugging de change detection
Activités

Optimiser avec la stratégie OnPush

Construire des applications zoneless

Objectifs
  • Transformer les applications Angular en Progressive Web Apps avec support offline
  • ImplĂ©menter les Service Workers pour les stratĂ©gies de caching et les opĂ©rations en arriĂšre-plan
  • Activer les patterns offline-first pour une meilleure expĂ©rience utilisateur
Sujets abordés
  • →Fondamentaux et avantages des PWA
  • →IntĂ©gration du package @angular/pwa
  • →Fondamentaux des Service Workers
  • →Communication avec les Service Workers
  • →StratĂ©gies de caching
  • →Patterns offline-first
Activités

Ajouter les capacités PWA à une application Angular

Implémenter la communication avec les service workers

Objectifs
  • Configurer le Server-Side Rendering pour les performances amĂ©liorĂ©es et le SEO
  • ImplĂ©menter les patterns de code compatibles avec le serveur et gĂ©rer correctement l'hydratation
  • Optimiser les stratĂ©gies de rendu pour les diffĂ©rents scĂ©narios de dĂ©ploiement
Sujets abordés
  • →Avantages et cas d'usage du SSR
  • →Modes de rendu (dĂ©veloppement, production, prĂ©rendering)
  • →Patterns de code compatible avec le serveur
  • →HTTP et hydratation
  • →ConsidĂ©rations de performance
  • →Optimisation SEO
Activités

Configurer SSR pour une application Angular

Gérer la récupération de données cÎté serveur

Optimiser l'hydratation

Objectifs
  • CrĂ©er et structurer des librairies Angular publiables pour la rĂ©utilisation du code
  • Construire, empaqueter et distribuer les librairies Angular vers npm
  • GĂ©rer les dĂ©pendances et le versioning pour la maintenabilitĂ© de la librairie
Sujets abordés
  • →CrĂ©er des librairies publiables
  • →Structure de projet de librairie
  • →Construction et packaging avec ng-packagr
  • →Gestion des dĂ©pendances
  • →Gestion des assets dans les librairies
  • →Documentation et versioning
  • →Publication sur npm
Activités

Créer une librairie de composants partagés

Construire et publier une librairie Angular

Objectifs
  • Concevoir et implĂ©menter des architectures micro-frontends en utilisant Native Federation
  • Partager efficacement les dĂ©pendances entre les applications hĂŽte et distantes
  • Activer la communication transparente entre les applications micro-frontends indĂ©pendantes
Sujets abordés
  • →Architecture micro-frontends
  • →Concepts de Module Federation
  • →Applications hĂŽte et distantes
  • →Partage de dĂ©pendances
  • →Communication entre micro-frontends
  • →Native Federation (spĂ©cifique Ă  Angular)
Activités

Configurer une architecture micro-frontends

Partager des dépendances entre applications

Objectifs
  • Optimiser les performances de l'application pour respecter les standards Core Web Vitals
  • ImplĂ©menter le lazy loading et les deferred views pour des temps de chargement initiaux plus rapides
  • Surveiller et analyser les mĂ©triques de performance pour l'amĂ©lioration continue
Sujets abordés
  • →Core Web Vitals et mĂ©triques
  • →StratĂ©gies d'optimisation d'images
  • →Lazy loading de composants au runtime
  • →Deferred views pour le contenu below-the-fold
  • →Analyse et optimisation de bundle
  • →Monitoring de performance
Activités

Optimiser les images pour le web

Implémenter des composants lazy-loaded

Différer les vues non critiques

Formations associées

Prochaines sessions

2 novembre 2026
Distanciel ‱ Français
S'inscrire

Processus Qualité

L'engagement de SFEIR Institute : une démarche d'excellence pour garantir la qualité et la réussite de toutes nos formations. En savoir plus sur notre démarche qualité

Méthodes pédagogiques mobilisées
  • Lectures / Apports thĂ©oriques (Slides) — PrĂ©sentation de concepts via des supports visuels (PowerPoint, PDF).
  • DĂ©monstration technique (DĂ©mos) — Le formateur rĂ©alise une manipulation ou une procĂ©dure devant les apprenants.
  • Laboratoires dirigĂ©s (Labs) — Mise en pratique guidĂ©e sur logiciel, machine ou environnement technique.
Dispositif d'évaluation et de suivi

L'atteinte des objectifs de la formation est évaluée à plusieurs niveaux pour garantir la qualité de la prestation :

  • Évaluation continue des acquis : VĂ©rification des connaissances tout au long de la formation via des mĂ©thodes participatives (en fonction de la formation: quiz, exercices pratiques, mises en situation) sous la supervision du formateur.
  • Mesure de la progression : Dispositif d'auto-Ă©valuation comparatif comprenant un diagnostic initial pour situer le niveau de dĂ©part, suivi d'une Ă©valuation finale pour valider l'Ă©volution des compĂ©tences.
  • Évaluation de la qualitĂ© : Questionnaire de satisfaction en fin de session pour mesurer la pertinence et l'efficacitĂ© de la formation ressentie par les participants.

3 160€ € HT

par apprenant