Formation Angular Avancé

Cette formation Angular vous permettra de maîtriser les mécanismes internes d’Angular ainsi que les bonnes pratiques pour créer des applications maintenables et évolutives.

Vous apprendrez les nouveautés telles que :
- les signaux,
- l’hydration et les composants standalones, ainsi que
- l’écosystème (RxJS, NgRx, Angular Material, PWA).

Basée sur la dernière version d’Angular, cette formation approfondit les stratégies de détection de changements, le lazy loading et l’internationalisation.

Enfin, vous apprendrez à :
- optimiser les performances grâce à esbuild et Vite,
- mettre en place un state management avec NgRx, et
- configurer efficacement vos projets (prettier, eslint, jest)

Des exercices concrets vous permettront de produire une application Angular basée sur une API REST afin de consolider vos apprentissages.

La formation Angular Avancé est destinée à des développeur·se·s ayant déjà pratiqué le framework sur un projet et souhaitant comprendre le rôle des mécanismes internes du framework.

Vous débutez avec le framework Angular ?

Alors, jetez un œil à notre formation Angular !

Enfin, pour approfondir les fonctionnalités offertes par la librairie RxJS, nous vous suggérons à notre formation RxJS. En effet, cette formation couvre toutes les fonctions et opérateurs RxJS qui permettent de créer, combiner et transformer des Observables.

Les objectifs

• Comprendre les concepts avancés qui portent Angular
• Augmenter les performances d'une application Angular
• Intégrer les librairies externes incontournables

Pré-requis

• Avoir eu un premier contact avec une application Angular.
• Avoir une bonne connaissance de TypeScript et de JavaScript
• Avoir une connaissance suffisante des concepts de base utilisés dans Angular (Components, Services, Forms, Routing, Observables)
• Ordinateur portable à apporter

Le programme de la formation Angular Avancé

Jour 1 — Concepts avancés

• Rappels sur Angular
  • Component
  • Forms
  • Routing
  • Services
  • Observables
• JavaScript / Typescript
  • Tips & tricks
  • Pure functions
  • Arrays & Functional programming
• Functional Reactive Programming & RxJS
  • Concept
  • Principaux opérateurs
  • Opérateurs de combinaison
  • Gestion des exceptions
  • De l'API à la vue avec le pipe Async
  • Cycle de vie des observables et techniques de clôtures
• Zone & Change detection strategies (legacy)
  • Principe et utilité
  • État de la vue (component)
  • Propagation du changement
• Signaux
  • Présentation du nouveau système de rendering
  • Writable signals, Computed signals & Effects

Mise en pratique
- Grâce aux signaux, optimiser et simplifier les mécanismes de rendering de l'application développée

Jour 2 — PWA, Lazy Loading et Sécurité

• PWA (Progressive Web App)
  • Théorie et contexte
  • Cache
    • Static Content Cache
    • Dynamic Content Cache
  • Service Workers
  • Push Notifications
• Lazy Loading & Module architecture
  • Améliorer les performances de démarrage
  • Route integration
    • loadChildren
    • loadComponent
  • Stratégies de préchargement des modules (Preloading)
  • Modules partagés
  • Standalone components
• Injection de dépendances
  • Principes de l'injection de dépendance
  • Injection hiérarchique
  • Inject anything : InjectionToken
• Route guards & resolve
  • Les différents types de Guards
  • CanActivate, CanActivateChild : protéger une route
  • CanDeactivate : sécuriser la sortie
  • Pre-fetching avec resolve

Mise en pratique
- Initialiser et configurer un projet Angular scalable avec Angular Material, Prettier, Eslint, Jest, Esbuild et Vite
- Faire évoluer l'application en y intégrant plusieurs pages, un template complet et l'internationalisation
- En utilisant les concepts et opérateurs RxJS présentés, créer un panier et intégrer celui-ci dans plusieurs pages de l'application

Jour 3 — Écosystème

• Angular Material
  • Configuration et theming
  • Étude et mise en œuvre de plusieurs composants
  • Material & CDK
• Le "State Management Pattern" avec NgRx
  • Concept : Immutable data store
  • Store : Reducers & Actions par la pratique
  • Effects : Gestion des actions asynchrones
  • Entity : Performance et volumétrie
  • NgRx et les signaux : Exemple d'utilisation
  • Architecture : Implémentation du design pattern Facade avec NgRx
• Angular Universal (SSR)
  • Introduction au server-side rendering avec Angular Universal
  • Vers le futur du SSR avec l'"hydration"
• Internationalisation (aka I18N)
  • Angular I18N standard
  • @ngx-translate
    • Concept de la librairie
    • Chargement à chaud des traductions

Mise en pratique
- Implémenter un state management avec NgRx

Télécharger le programme

Le(s) formateur(s)

Benjamin BARBIER

Benjamin est développeur, spécialisé dans les technologies du web depuis 2009. Il a avant ça évolué quelques années dans le monde Java avant de basculer vers le monde du JavaScript et d'AngularJS en 2012 avec la version bêta du framework.

Benjamin a également été professeur de développement web pendant 3 ans à l'université de Lille 2 avant de fonder en 2014, avec 3 des membres de son équipe projet, Symbol-IT. Sa société de conseil en informatique est spécialisée dans les développements fronts avec des frameworks comme Angular ou Vue.js ainsi que dans le devops.

Aujourd'hui, Benjamin intervient principalement chez ses clients en tant que tech-lead pour les accompagner sur Angular en amenant le recul et les bonnes pratiques que ses années d'expérience ont pu lui apporter.

Voir son profil détaillé

Erwan BEAUCHAMPS

Ingénieur de formation, Erwan a découvert le monde du web alors qu'il travaillait à Londres. Lors de cette expérience, il a eu l'opportunité d'expérimenter le tout nouveau framework Angular à l'époque.
Grâce à cette expérience, Erwan, aujourd'hui freelance, n'a cessé d'approfondir ses connaissances de ce framework !
Erwan a eu la chance de collaborer avec de nombreuses entreprises comme Allianz, Amadeus, SETEC ou encore Hertz. Au cours de ces expériences professionnelles, il a pu échanger, approfondir et affiner ses connaissances.
Aujourd’hui formateur indépendant et créateur de formats e-learning, il a à cœur de transmettre sa passion pour Angular et pour le monde du web en général !

Voir son profil détaillé

Evan BOISSONNOT

Du plaisir, du fun, avant tout passer un bon moment, c'est ce qui caractérise l'état d'esprit d'Evan tous les jours.
Passionné de code depuis plus de 20 ans, Evan a mis à profit sa passion en créant une entreprise de développement logiciel (durant 8 ans, avec 14 salariés).

Soucieux de la qualité logicielle, et adepte des démarches craftmanship, TDD et BDD, il a une vision agile et essaye de s’améliorer et progresser en permanence.

Ses amours fous : .net avec C# (ASP.NET Core), JavaScript, Angular, Node.js
Ses IDEs favoris : Visual Studio, Visual Studio Code
Ses découvertes du moment : React, Python (oui, faut pas mourir idiot quand même :=p)

Evan continue aujourd’hui à développer, pour lui, pour ses clients (audits, conseils, et réalisation).
Former est pour Evan une vocation : il aime transmettre et souhaite donner le goût de coder au plus grand nombre !

Voir son profil détaillé

FAQ

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 166 formations au catalogue, 1643 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• 99% des participants qui se disent satisfaits de nos formations
• la possibilité de vous proposer un accompagnement personnalisé, du conseil ou un suivi après la formation