Objectifs
Angular est un framework de développement d’applications web porté par Google. Sans doute le plus polyvalent et le plus complet des frameworks actuels, il offre une expérience de développement sans comparaison. Durant cette formation Angular de perfectionnement, nous plongerons dans les concepts avancés (zones, lazy loading, aot, …) d’Angular et découvrirons son écosystème (@ngrx, material, PWA, …).
Concrètement, cette formation vous apportera les compétences et connaissances nécessaires pour:
-
Comprendre les concepts avancés qui portent Angular
-
Augmenter les performances d’une application Angular
-
Intégrer les librairies externes incontournables
A qui s'adresse cette formation
Public :
Ce cours s'adresse aux Chefs de projet Web, Architectes techniques, Développeurs front-end.
Prérequis :
Pour suivre ce cours de niveau Avancé, il est nécessaire d'avoir une bonne connaissance de JavaScript et TypeScript. Avoir eu un premier contact réel avec une application Angular version 2 ou plus est également conseillé.
Contenu du cours
Concepts avancés : Injection de dépendances
Principes de l’injection de dépendance
Injection hiérarchique
Inject anything : InjectionToken
Concepts avancés : Zones
Principes de fonctionnement
Utilisation dans Angular
Concepts avancés : Change detection strategies
Principe et utilité
État de la vue (component)
Propagation du changement
Concepts avancés : Lazy Loading
Améliorer les performances de démarrage
Route integration : loadChildren, children
Preloading
Modules partagés
Concepts avancés : Ahead of Time Compilation
AOT vs JIT
Mise en place
Concepts avancés : Route guards & resolve
Les différents types de Guards
CanActivate, CanActivateChild : protéger une route
CanDesactivate : sécuriser la sortie
Pre-fetching avec resolve
Concepts avancés : Internationalisation i18n
i18n marker
Singulier / pluriel & select
ng-xi18n
AOT gotchas
Écosystème : @ngrx/store
Concept : immutable data store
Reducers & Actions
Écosystème : Sever Side Rendering
Platform-server
Bootstraper depuis le serveur
Pages statiques & pages dynamiques
Écosystème : PWA
Service Workers
Static Content Cache
Route Redirection
Push Notifications
Écosystème : @angular/material
Étude et mise en oeuvre de quelques composants
Material & CDK