Angular
Des bases solides pour développer des applications avec Angular
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
Sujets abordés
- →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
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
- →Les différents cycle de vie d'un composant
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
- →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
- →Communication Enfant - Parent
- →L'annotation @OutPut
- →Émettre des données à l'aide de emit
- →Rendre un OutPut totalement réactif
Activités
Créer un composant customisable à l'aide d'Input et d'Output
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 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
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 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
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 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
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
Sujets abordé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
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 ?
- →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
Activités
Mettre en place un intercepteur
Mettre en place un context http de cache
Sujets abordés
- →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
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 fonction un cycle de changement de détection
- →en développement
- →en production
- →Les différents mode de changement de détection
- →Default
- →OnPush
Activités
Démonstration réalisée par le formateur.
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
- →Testers 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
- →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
Activités
Transformer une application complète sous format standalone sans oublier d'adapter les testes
Sujets abordés
- →Qu'est ce que Signals
- →Interopérabilité Signals et Rxjs
- →Input et Output Signals
Activités
Transformer l'application pour qu'elle n'utilise uniquement des signals
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