Formation Angular avancé

Une formation Angular avancé et personnalisée pour les développeurs expérimentés.


Pourquoi une formation Angular avancé ?

Vous travaillez déjà avec Angular et vous ressentez les limites de l’auto-formation ? Rassurez-vous, vous n’êtes pas seul·e. Se contenter de la documentation officielle montre vite ses limites. Les bonnes pratiques (architecture, optimisation, etc.) nécessitent l’aide d’un expert.


Formation Angular avancé : pour qui ?

Cette formation s’adresse à des développeurs qui travaillent déjà avec Angular et dont les projets ont déjà démarré.

Si vous ne connaissez pas encore Angular et que vous allez démarrer un projet, direction notre formation formation Angular.


Objectifs de la formation Angular avancé

  • Approfondir la maîtrise d’Angular
  • Améliorer la productivité
  • Mettre à jour son application depuis les versions précédentes
  • Mettre en place une architecture robuste
  • Optimiser vos applications
  • Ajouter des tests pour améliorer la fiabilité
  • Savoir réutiliser des fonctionnalités en créant une librairie pour Angular

Programme de la formation Angular avancé

Ce programme, et donc sa durée et son tarif, ont vocation à être personnalisés, notamment en fonction des sujets qui sont pertinents ou non pour votre projet (il est rarement question de voir l’intégralité des éléments ci-dessous).

Les classiques d’Angular

Pour éviter la répétition, nous n’allons pas recopier ici les détails déjà présents dans le programme de la formation Angular classique, auquel vous pouvez vous référer. Mais il est quasiment sûr que vous aurez besoin des éléments suivants :

  • Bonnes pratiques et productivité
  • Architecture : pour remettre votre projet d’équerre
  • RxJS : la plus grosse difficulté dans Angular

Nouveautés Angular

Une formation Angular avancé est l’occasion de voir les nouveautés apportées par les nouvelles versions d’Angular, et de vous aider à migrer si nécessaire.

Optimisation avancée

En comprenant les mécanismes d’Angular, votre projet peut grossir indéfiniment et malgré tout votre application restera rapide à charger et fluide à l’usage.

  • Lazy-loading
  • Change detection : Default vs OnPush
  • zone.js
  • trackBy

State / store

La gestion du state dans une application est souvent considérée comme un sujet difficile. On choisit donc souvent une librairie, comme ngrx ou ngxs, mais ce sont des usines à gaz, qui aggravent la complexité du code.

Angular a déjà prévu une librairie pour cela : RxJS. Il faut d’abord la maîtriser (et la formation est faite pour cela), mais une fois que c’est le cas, elle suffit à mettre en place un store simple et efficace.

  • Création d’un store
  • Gestion du state (ReplaySubject)
  • Modification du state (dispatch)
  • Récupération du state (select)

Multilingue / internationalisation : @angular/localize

Un système de gestion des traductions est inclus nativement dans Angular.

  • Gestion des textes statiques
  • Gestion des textes dynamiques
  • Gestion du pluriel
  • Builds localisés

Reactive Forms : @angular/forms

Il existe des options avancées pour gérer des formulaires lourds et/ou dynamiques.

  • FormControl et FormGroup
  • Validateurs personnalisés

Créer une librairie réutilisable

Vous voulez réutiliser une fonctionnalité dans un autre projet ? Nous apprenons à créer une librairie réutilisable, calquée sur les conventions des modules Angular officiels.

  • Configuration spécifique des outils
  • Permettre de customiser un composant
  • Permettre à un service d’être extensible
  • NgModules et providers avancés
  • Export de l’API publique
  • Packaging et publication

Tests : @angular/*/testing

Eviter les régressions, anticiper les problèmes : Angular fournit plusieurs outils de test et le CLI automatise leur configuration et leur exécution.

Mobile : Ionic / Capacitor / Cordova

Vous ciblez les mobiles et tablettes ? Capacitor d’Ionic, qui remplace Cordova, est là pour vous aider. Il pourra aussi se charger de déployer en mode logiciel de bureau.

  • APIs mobiles
  • Build Android
  • Build iOS

Bureau : Electron

Il est aussi possible de déployer en mode logiciel via Electron.

WebSocket

Outre le HTTP, il existe un nouveau protocole, les WebSockets, qui permettent de la communication en temps réel. Cela peut être utile pour des messageries, des jeux, du live, etc.

Sécurité

Angular embarque nativement plusieurs mécanismes de sécurité.

  • Cross-Site Scripting (XSS)
  • Cross-Site Request Forgeries (CSRF/XSRF)
  • SubRessource Integrity (SRI)
  • Content Security Policy (CSP)

Angular Universal : @angular/platform-server

Le server-side rendering est une autre nouveauté majeure qui pourrait bien être une révolution : les pages de votre application peuvent être pré-générées par le serveur. Qu’est-ce que cela signifie ? Un chargement instantané de votre application, la possibilité de faire également un site web avec Angular et de faire jouer le référencement naturel. Démarré comme un projet à part, Universal a été intégré nativement dans Angular 4 et peut désormais se mettre en place grâce aux dernières mises à jour d’Angular CLI.

Angular Elements

Vous voulez réutiliser vos composants Angular dans d’autres projets qui tournent sous d’autres technologies (React, Vue.js, JavaScript natif…) ? C’est désormais possible grâce au nouveau package Angular Elements, qui permet de convertir les composants Angular en Web Components standards et natifs. Une révolution.

Cependant, cette fonctionnalité est encore en cours de développement pour un usage simple et optimal.

Cette formation m'intéresse

Formation Angular

Formation Angular avancé

Public : Développeurs

Pré-requis : Avoir déjà une bonne expérience avec Angular

Format intra ℹ️

  • ✅ Dans vos locaux ou à distance ℹ️
  • ✅ Session dédiée et garantie
  • ✅ Programme et durée sur mesure
  • ✅ Tarif forfaitaire pour une équipe
  • ✅ Choix des dates

Obtenir un devis

Financements compatibles ℹ️

  • ✅ Direct
  • ✅ Plan de formation
  • ✅ OPCA / OPCO (FAFIEC, Atlas, AFDAS...)
  • ✅ Qualiopi / Datadock
  • ❌ CPF / CPA / Pôle Emploi