Angular

• 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

• 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

• Connaissances ECMAScript 6: POO, classes, arrow function, scopes – en particulier const/let et this en JS, Promise
• Connaissances TypeScript aideront 
• Connaissances RxJS aideront

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