Angular
Des bases solides pour développer des applications avec Angular
Présentation du cours
Angular est un des plus anciens et des plus répandus des frameworks frontend moderne. C’est un framework très complet, pensé pour être productif, tout en étant pensé pour maintenir les applications sur le long terme.
Avec cette formation rédigée et délivrée par nos experts (certifiés Angular Developper Level 2 & 3 et même Google Developer Expert), nous vous proposons de découvrir Angular à travers une formation complète vous permettant d’acquérir les connaissances pour construire des applications Angular dans les règles de l’art et qui vivront dans le temps.
Les librairies importantes de l’écosystème Angular seront abordées, ainsi que la manière de tester une application Angular. Tous les labs pour lesquels la démarche Test Driven Development est pertinente (ils seront marqués avec l’indication TDD) seront réalisés avec cette méthode pour préparer aux mieux les participants à faire un développement de qualité.
Les participants ayant suivi la formation dans son intégralité seront en mesure de passer l’examen de certification Angular Developer Level 1.
Objectifs pédagogiques
- Développer une application Angular
- Mettre en place des tests pour garantir sa maintenabilité dans le temps
- Gérer correctement l’état de l’application
Public cible
- Développeurs frontend
- Développeurs Full-stack type JavaScript / Node.js
- Développeur backend type Java intéressé par le développement Angular front-end
- Développeur web intéressé par le développement d’une application Angular
- Tout public intéressé par le développement d’une application Angular
Prérequis
- Connaissances ECMAScript 6: POO, classes, arrow function, scopes – en particulier const/let et this en JS, Promise
- Connaissances TypeScript aideront
- Connaissances RxJS aideront
Programme
Jour 1
Module 1 : Introduction
- Introduction du cours
- Présentation des speakers et tour de table
- Objectifs et agenda de la formation
- Présentation du Framework Angular (historique, status, versions, outils, philosophie…), de l’écosystème, des uses cases, les points forts et différenciants
Module 2 : Initiation à TypeScript
- Présentation de TypeScript
- Superset d’ECMAScript 6
- Les classes en TypeScript
- class vs interface vs type
- Comprendre les types génériques
- Configuration du mode strict
Labs
- Premiers pas avec TypeScript
Module 3 : Initiation à RxJS
- Présentation de RxJS
- Promise vs Observables
- Logique de stream avec les Observables
- Pipe et opérateurs de base (map, filter, mergeMap, switchMap, debounceTime, distinctUntilChanged, tap), multiplexing (share) et factory (of, combineLatest)
- Conserver le stream
Labs en TDD
- Premiers pas avec RxJS
Module 4 : Une architecture à base de composants et modules
- Architecture d’une application Angular
- Command Line Interface (CLI)
- Structure d’un composant
- Présentation de l’utilisation de la directive *ngFor
Labs
- Créer un projet Angular avec la CLI
- Créer son premier composant Angular
- Mettre en œuvre une première directive : *ngFor
Module 5 : Exploration des composants
- Le cycle de vie d’un composant
- Data Binding : associer les données du contrôleur et la vue
- Events : réagir aux actions de l’utilisateur(click, saisie, etc…)
- Faire communiquer des composants entre eux
Labs en TDD
- Data binding
- Events
- Components communication
Jour 2
Module 6 : Rendre son application dynamique
- Ajouter de la navigation entre plusieurs page via un routeur
- Utiliser fetch pour récupérer des données côté serveur
Labs
- Navigation
- Server communication (with fetch)
Module 7 : L’injection de dépendance
- Providers et dependancy injection : comprendre l’Inversion of Control en Angular
- Introduction de la fonction inject **NEW**
- Récupérer des données via HttpClient
Labs en TDD
- Providers et dependancy injection
- Fonction inject **NEW**
- Server communication (with HttpClient)
Module 8 : Au delà des composants
- Utiliser les pipes pour formater les données dans la vue
- Utiliser des directives pour augmenter les composants
Labs en TDD
- Pipe
- Directive
Module 9 : Les formulaires template driven
- Template driven forms : gérer ses formulaires par des contraintes côté template
Labs
- Template driven forms
Module 10 : Les formulaires réactifs
- Reactive form : gérer ses formulaires côté contrôleur
- CustomFormControl : créer sa propre brique de formulaire
Labs en TDD
- Reactive form
- CustomFormControl
Jour 3
Module 11 : Navigation avancée
- Charger dynamiquement une partie de l’application via du lazy loading
- Le contrôle d’accès aux pages via les guards
Labs
- LazyLoading
- Guards
Module 12 : Interceptors
- Agir sur toutes les requêtes http via interceptors
Labs en TDD
- Interceptors
Module 13 : Le template en détail
- Quelques éléments avancés pour gérer le template de son composant
- Agir sur l’élément sur lequel est attaché la directive via Host Binding
- Manipuler la structure du DOM avec les Structural Directive
Labs en TDD
- Templating
- Host Binding
- Structural Directive
Module 14 : State management avec Ngrx
- Gérer l’état de son application avec Ngrx
Labs en TDD
- State management avec Ngrx
Module 15 : State management avec Ngxs
- Gérer l’état de son application avec Ngxs
Labs en TDD
- State management avec Ngxs
Module 16 : State management avec Elf
- Gérer l’état de son application avec Elf
Labs en TDD
- State management avec Elf
Jour 4
Module 17 : Détection de changement
- Comment agir sur la détection de changement d’Angular ?
Labs
- Change detection
Module 18 : Tester une application Angular de bout en bout
- Concept : tests unitaires VS tests de bout en bout (e2e)
- Faire un test e2e avec Cypress
Labs
- tests e2e
Module 19 : Modern Angular
- Standalone components ou comment se passer des NgModules
- Se passer des classes et utiliser des fonctions pour les guards avec canMatch **NEW**
- Se passer des classes et utiliser des fonctions pour les interceptor **NEW**
Labs
- Standalone components
- Functional guards / canMatch **NEW**
- Functional interceptor **NEW**
Module 20 : Progressive Web App
- PWA : comment donner un côté plus natif à nos applications
Labs
- PWA
Module 21 : SSR
- Server Side Rendering : servir nos applications sans JavaScript côté client
Labs
- Server Side Rendering
Nos sessions de formations
Ce cours vous intéresse ?
Demandez un devis
personnalisée ? Contactez-nous