Angular
Angular est un framework sorti en septembre 2016. Adopté par les plus grandes entreprises, ce framework offre un écosystème aux développeurs qui leur permet de créer des applications Web robustes, fiables et facilement évolutives sur le long terme, rapidement en se concentrant sur la logique business.
Cette formation rédigée par nos formateurs experts et qualifiés sur la technologie (certifiés Angular Developer Level 2 & 3, Google Developer Expert et contributeurs sur le framework) seront à même de vous proposer une formation complète correspondant à vos besoins et vous permettant d'acquérir les connaissances nécessaires (débutant à expertise complète) afin de réaliser des applications robustes, évolutives et maintenables dans le temps.
Les librairies (NgRx, NgXs) et les tests occupant une grande part dans l'écosystème d'Angular, certains modules seront fortement orientés vers ceux-ci et tous les exercices vus au cours de la formation seront testés avec une couverture de tests à 100%.
Les participants à cette formation pourront passer la certification Level 1 et Level 2 de l'organisme Angular Training et prendre les vouchers associés à travers SFEIR.
Ce que vous allez apprendre
- 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)
Prérequis
- Modern Javascript (scope, arrow function, class, notion du this, programmation asynchrone avec les promises)
- Notion sur Typescript (typage basiques)
- Notion sur ce qu'est un Observable vs une Promise
Public cible
- Développeurs frontend, Développeurs Full-stack type JavaScript / Node.js, 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
Programme de la Formation
22 modules pour maîtriser les fondamentaux
Cours 1 : A la découverte d'un nouveau framework et première prise en main des fondations du framework
Sujets abordés
- →Configuration de son IDE: Webstorm vs Vscode
- →Architecture globale d'une application Angular (module, composants, architecture module less)
- →Les différents bundler et executor
- →Approche moderne d'utilisation du CLI
- →Les bases du CLI
Activités
Bootstrapper une application Angular
Créer votre premier composant à l'aide du CLI
Imbriquer les composants
Sujets abordés
- →DataBinding (les différents types de databindings, différence entre propriété et attributs)
- →Signals et réactivité (comprendre les Signals et leur intérêt, modifier un Signal, utiliser un Signal)
- →Les différents cycle de vie d'un composant
- →Les différents hooks d'un composant
- →La dérivation des Signals (dérivation synchrone, dérivation asynchrone)
Activités
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
Sujets abordés
- →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, httpResource quand et comment l'utiliser)
- →Comprendre comment lire les diagrammes Marble
- →Comprendre les différents opérateurs de base d'RxJs
Activités
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
Sujets abordés
- →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
Activités
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
Sujets abordés
- →Les directives structurelles built-in (ngIf, ngFor, ngSwitch)
- →Le nouveau code flow d'Angular (@if, @for, @switch)
Activités
Utilisation de la directive *ngFor pour créer la vue d'une liste de personne
Sujets abordés
- →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, Input based Signals)
- →Communication Enfant - Parent (l'annotation @OutPut, émettre des données à l'aide de emit, rendre un OutPut totalement réactif, Output based Signals)
Activités
Créer un composant customisable à l'aide d'Input et d'Output
Cours 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
Sujets abordés
- →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)
Activités
Créer et utiliser son propre service
Réaliser un traitement à l'initialisation de l'application
Sujets abordés
- →Introduction aux Pipes (qu'est ce qu'un Pipe ?, à quoi servent-ils ?, les Pipes dit Pure, les Pipes dit Impure, les différents pipes built-in d'Angular)
- →Créer ses propres pipes
Activités
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
Sujets abordés
- →Introduction aux directives (qu'est ce qu'une directive, les différents types de directives, les différents sélecteurs d'une directive)
- →Interagir avec les éléments du DOM (la classe ElementRef, la classe Renderer)
Activités
Utiliser la directive ngSwitch
Utiliser le nouveau control flow ngSwitch
Créer une directive affichant une icon en fonction d'une condition
Sujets abordés
- →Les formulaires (pourquoi les formulaires, les différents types de formulaires)
- →Les formulaires 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 formulaires de type Réactive (le module ReactiveFormsModule, les directives FormGroup et FormControl, la validation, les formulaires réactifs autonomes)
- →Les Signals form (expérimentale) (déclarer et initialiser un signal Form, la Directive Field, la validation)
- →La validation custom
Activités
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
Refactorisation en Signal Form
Cours 3 : Les notions d'expertise d'Angular
Sujets abordés
- →Le lazy loading (qu'est ce que le lazy loading, à quoi sert le lazy loading, comment lazy loader un module, la notion de routes enfants)
- →Les Guards (qu'est ce qu'un guard, à quoi sert un guard, les différents guards et leur utilisation)
Activités
Mettre en place un lazy loading
Mettre en place un guard
Mettre en place un resolver
Sujets abordés
- →L'Interceptor (qu'est ce qu'un Intercepteur ?, à 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)
Activités
Mettre en place un intercepteur
Mettre en place un context http de cache
Sujets abordés
- →Les directives de template (ng-template, ng-container, ng-content, ngTemplateOutlet, ngComponentOutlet)
- →Les annotations de template (@ViewChild et @ViewChildren, viewChild et viewChildren Signals, @ContentChild et @ContentChildren, contentChild et contentChildren Signals)
- →Les annotations de binding (@HostListener, @HostBinding, utiliser la propriété host de l'annotation)
- →Les directives structurelles (à quoi sert une directive structurelle, la micro syntax d'une directive structurelle, les limites de cette syntaxe)
Activités
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
Sujets abordés
- →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)
Activités
Créer son propre élément de formulaire
Sujets abordés
- →Comment fonctionne un cycle de changement de détection (en développement, en production)
- →Les différents modes de changement de détection (Default, OnPush)
- →Zoneless
Activités
Démonstration réalisée par le formateur
Cours 4 : State Management, Testing et sujets avancés
Sujets abordés
- →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)
Activités
Mettre en place un state avec NgRx
Mettre en place un state avec NgXs
Sujets abordés
- →Le testing en Angular
- →Tester ses composants
- →Tester ses services
- →Tester ses directives
- →Tester ses pipes
- →Introduction de la librairie Angular testing
Activités
Tester une application de bout en bout unitairement
Sujets abordés
- →Qu'est ce qu'une PWA ?
- →Comment intégrer le package @angular/pwa
- →Les stratégies de caches par le package @angular/pwa
Sujets abordés
- →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
Sujets abordés
- →Créer une librairie en Angular
- →Builder sa librairie
- →Gestion des assets dans la librairie
- →Best practices and pitfall by a maintainer of Ng Zorro
Sujets abordés
- →Architecture Microfrontend
- →Différence entre host et remote
- →Initier un host
- →Initier un remote
- →Communication entre host et remote
- →Partage de dépendances entre host et remote
Sujets abordés
- →Qu'est ce que les Core Web Vitals
- →Lazy loader des composants au runtime
- →Déférer une partie de votre vue
Activités
Lazy loader un composant de modal
Charger à la demande une partie de votre vue
Processus Qualité
L'engagement de SFEIR Institute : une démarche d'excellence pour garantir la qualité et la réussite de toutes nos formations. En savoir plus sur notre démarche qualité
- Lectures / Apports théoriques (Slides) — Présentation de concepts via des supports visuels (PowerPoint, PDF).
- Démonstration technique (Démos) — Le formateur réalise une manipulation ou une procédure devant les apprenants.
- Laboratoires dirigés (Labs) — Mise en pratique guidée sur logiciel, machine ou environnement technique.
L'atteinte des objectifs de la formation est évaluée à plusieurs niveaux pour garantir la qualité de la prestation :
- Évaluation continue des acquis : Vérification des connaissances tout au long de la formation via des méthodes participatives (en fonction de la formation: quiz, exercices pratiques, mises en situation) sous la supervision du formateur.
- Mesure de la progression : Dispositif d'auto-évaluation comparatif comprenant un diagnostic initial pour situer le niveau de départ, suivi d'une évaluation finale pour valider l'évolution des compétences.
- Évaluation de la qualité : Questionnaire de satisfaction en fin de session pour mesurer la pertinence et l'efficacité de la formation ressentie par les participants.
Prochaines sessions
Former plusieurs collaborateurs
- Tarifs dégressifs (plusieurs places)
- Session privée ou sur-mesure
- En présentiel ou à distance