Angular

• Développer une application Angular
• Réaliser des tests pour garantir une maintenabilité dans le temps
• Appréhender l’écosystème d’Angular dans sa globalité (librairies externes)

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.

Jour 1

A la découverte d’un nouveau framework et première prise en main des fondations du framework

Module 1 : Initiation à Angular

• Configuration de son IDE: Webstorm vs Vscode
• Architecture globale d’une application Angular
  • module
  • composants
• Les différents modules bundler et executor
• Les bases du CLI

Ateliers:

• Bootstrapper une application Angular
• Créer votre premier composant à l’aide du CLI
• Imbriquer les composants

Module 2:  Rendu dynamique et cycle de vie

• DataBinding
  • les différents types de databindings
  • Différence entre propriété et attributs
• Les différents cycle de vie d’un composant

Ateliers:

• Afficher une personne dans une card
• Réagir à l’événement click d’un bouton pour afficher une autre personne de manière aléatoire.

Module 3:  Réaliser des requêtes réseaux

• Le client Http d’Angular
  • Les différentes manières d’enregistrer le client HttpClient
  • Les différentes méthodes du client Http
  • Les différents types de réponse possible
• Comprendre comment lire les diagrammes Marble
• Comprendre les différents opérateurs de base d’RxJs

Ateliers:

• Réaliser un appel au serveur pour afficher une personne
• Réaliser un appel au serveur lors de l’évènement click sur un bouton

Module 4:  Réaliser un routing de base

• Appréhender le routing
  • La philosophie de routing dans une app de type CSR
  • La configuration de base du routing en Angular
• Configurer un routing
• Naviguer dans son application

Ateliers:

• Mettre en place un système de routing au sein d’une application Angular
• Naviguer par défaut sur une route
• Naviguer vers une route en particulier

Module 5:  Le code flow d’Angular

• Les directives structurelles built-in
  • ngIf
  • ngFor
  • ngSwitch
• Le nouveau code flow d’Angular
  • @if
  • @for
  • @switch

Ateliers:

• Utilisation de la directive *ngFor pour créer la vue d’une liste de personne

Module 6:  Communication composants – Parents / Enfants

• Communication Parent – Enfant
  • L »annotation @Input
  • La configuration de l’annotation
  • La transformation d’un Input de manière réactive
  • Rendre un input required
• Communication Enfant – Parent
  • L’annotation @OutPut
  • Émettre des données à l’aide de emit
  • Rendre un OutPut totalement réactif

Ateliers:

• Créer un composant customisable à l’aide d’Input et d’Output

Jour 2

Vers des notions plus poussées du framework mais vitales pour créer des applications plus poussées comportant des formulaires et ayant des UIs plus riches.

A la fin des ces deux jours, le candidat aura les connaissances nécessaires pour passer la certification level 2 de l’organisme Angular Training.

Module 1:  L’injection de dépendances

• Les services en Angular
  • L’annotation @Injectable
  • Les différentes manières d’enregistrer un service
  • Injecter son service
  • Le bubbling d’injection
  • La configuration de l’injection
• Le fonctionnement de la Dependency Injection en Angular
  • Le rôle de l’Injector
  • Le rôle du DI Token
  • Le rôle du Provider
  • Les différentes résolutions de valeurs d’injections

Ateliers:

• Créer et utiliser son propre service
• Réaliser un traitement à l’initialisation de l’application

Module 2:  Les pipes

• Introduction aux Pipes
  • Qu’est ce qu’un Pipes ?
  • A quoi servent-ils ?
  • Les Pipes dit Pure
  • Les Pipes dit Impure
  • Les différents pipes built-in d’Angular
• Créer ses propres pipes

Ateliers:

• Formater une date correctement grâce au pipe date
• Créer son propre pipe permettant d’afficher une valeur par défaut dans le cas où aucune valeur existe

Module 3:  Les directives

• Introduction aux directives
  • Qu’est ce qu’une directives
  • Les différents type de directives
  • Les différents sélecteurs d’une directives
• Interagir avec les éléments du DOM
  • La class ElementRef
  • La class Renderer

Ateliers:

• Utiliser la directive ngSwitch
• Utiliser le nouveau control flow ngSwitch
• Créer une directive affichant une icon en fonction d’une condition

Module 4:  Les formulaires de type Template Driven

• Les formulaires
  • Pourquoi les formulaires
  • Les différents types de formulaires
• Les formulaire de type Template driven
  • Le module FormsModule
  • Les directives ngForm / ngModel
  • Deep dive dans le code de ngModel
  • La validation
  • Le retour utilisateurs des erreurs de validations
• Les formulaire de type Réactive
  • Le module ReactiveFormsModule
  • Les directives FormGroup et FormControl
  • La validation
  • Les formulaires réactifs autonomes
• La validation custom

Ateliers:

• Créer formulaire de création d’une personne (template driven)
• Créer un formulaire d’update de la personne (template driven)
• Rendre les formulaires réactives
• Créer son propre validator
• Rendre les formulaires autonomes

Jour 3

Dans cette troisième journée, les notions d’expertise d’ Angular seront abordées.

Module 1:  Vers un routing plus avancés

• Le lazy loading
  • Qu’est ce que le lazy loading
  • A quoi sert le lazy loading
  • Comment lazy loader un module
  • La notion de routes enfants
• Les Guards
  • Qu’est ce qu’un guards
  • A quoi sert un guards
  • Les différents guards et leur utilisation

Ateliers:

• Mettre en place un lazy loading
• Mettre en place un guard
• Mettre en place un resolver

Module 2:  Intercepter vos requêtes HTTP

• L’Interceptor
  • Qu’est ce qu’un Intercepteur ?
  • A quoi sert un intercepteur ?
  • Dans quel cas en a t’on besoin ?
  • Comment écrire et enregistrer un intercepteur
• Le context HTTP
  • Qu’est que c’est ?
  • Comment et quand l’utiliser

Ateliers:

• Mettre en place un intercepteur
• Mettre en place un context http de cache

Module 3:  Vers des directives plus poussées

• Les directives de template
  • Qu’est ce que c’est ?
  • ng-template
  • ng-container
  • ng-content
  • ngTemplateOutlet
  • ngComponentOutlet
• Les annotations de template
  • Qu’est que c’est ?
  • Comment et quand l’utiliser ?
  • @ViewChild et @ViewChildren
  • @ContentChild et @ContentChildren
• Les annotations de binding
  • Qu’est ce que c’est ?
  • @HostListener
  • @HostBinding
• Les directives structurelles
  • A quoi sert une directives structurelles
  • La micro syntax d’une directive structurelle
  • les limites de cette syntaxe

Ateliers:

• Téléporter du template
• Agrémenter une directive d’un listener d’évent et de binding de style
• Ecrire votre première directive structurelle

Module 4:  Créer ses propres composant de formulaire

• ControlValueAccessor
  • Qu’est ce que c’est ?
  • Comment l’utiliser ?
  • Les différents Hooks
• NgValidators
  • Qu’est ce que c’est ?
  • Comment l’utiliser ?
  • Les différents Hooks

Ateliers:

• Créer son propre élément de formulaire

Module 5:  Change Detection

• Comment fonction un cycle de changement de détection
  • en développement
  • en production
• Les différents mode de changement de détection
  • Default
  • OnPush

Ateliers:

• Démonstration réalisée par le formateur.

Jour 4

Ce quatrième jour est particulièrement accès sur le testing d’Angular

Module 1:  State Management

• Le state management
  • Qu’est ce que c’est ?
  • Pourquoi l’utiliser
  • Quand l’utiliser
• NgRx
  • le store
  • le reducer
  • les actions
  • les selectors
  • les effets
• NgXs
  • le store
  • les actions
  • les sélecteurs

Ateliers:

• Mettre en place un state avec NgRx
• Mettre en place un state avec NgXs

Module 2:  Les testes unitaires

• Le testing en Angular
• Tester ses composants
• Tester ses services
• Tester ses directives
• Testers ses pipes
• Introduction de la librairie Angular testing

Ateliers:

• Tester une application de bout en bout unitairement

Module 3:  PWA

• Qu’est ce qu’une PWA ?
• Comment intégrer le package @angular/pwa
• Les stratégies de caches par le package @angular/pwa

Module 4:  Server Side Rendering

• Qu’est ce que le server side rendering?
• Qu’est ce que le prerendering
• Comment intégrer le server side rendering ?
• Comment hydrater son application Angular

Jour 5

Ce cinquième jour est orienté sur la modernisation du framework et les dernières nouveautés

Module 1:  Standalone Components

• Un monde sans modules
  • Les standalone components
  • Le bubbling d’injection
  • Le bootstrapping
• La fonction Inject
  • la composition api
  • guards sous forme de class
  • interceptors sous forme de class

Ateliers:

• Transformer une application complète sous format standalone sans oublier d’adapter les testes

Module 2:  Signals

• Qu’est ce que Signals
• Interopérabilité Signals et Rxjs
• Input et Output Signals

Ateliers:

• Transformer l’application pour qu’elle n’utilise uniquement des signals

Module 2:  Performance et Core Web Vitals

• Qu’est ce que les Core Web Vitals
• Lazy loader des composants au runtime
• Déférer une partie de votre vue

Ateliers:

• Lazy loader un composant de modal
• Charger à la demande une partie de votre vue