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