Le programme ci-dessous décrit le programme type, détaillé par demi-journée. Si les délais le permettent, certains éléments peuvent être adaptés sur mesure à la demande des stagiaires.

Programme type détaillé 

Jour 1

MATIN

Concepts Angular avancés

• Modes de compilations (JIT, AOT)
• Mode production et processus de compilation
• Fonctionnement du change détection
• Services et injection de dépendances (IOC)

Composants et directes avancés

• Les différents types d’interaction entre composants
• Cycle de vie des composants
• Création de directes d’attribut
• Création de directes de structure
• Création dynamique de composants
• Pipes asynchrones
• Introduction à l’animation

TP

• Apprendre à développer des composants / directes avancés
• Utiliser des éléments Angular tels que ng-content, ContentChild, ViewChild, HostListener ou HostBinding

APRÈS MIDI   

Modules Angular   

• Agréger des composants en modules   
• Partager des modules
• Imports, exports, entryComponents, Factory d’initialisation d’un module
• Lazy loading

TP

• Analyser son application
• Mettre en place du lazy loading de modules pour optimiser les temps de chargement
• Comprendre comment partager des composants entre modules

Routage avancé

• Configuration du routage et modules de routage
• Stratégies de routage
• Route Guards
• Paramètres optionnels
• Utiliser les “Resolver”

TP

• Manipuler les routes
• Protéger ses routes avec les Guards
• Mise en place de Resolvers

Jour 2

MATIN

Observables et RxJS avancé

• Aborder les cas d’utilisation courants
• Présenter les techniques RxJS avancées pour y répondre
• Comprendre les opérateurs principaux :
• From, Of
• ConcatMap, SwitchMap
• ThrowError, CatchError
• TakeWhile, DelayWhen
• PublishReplay, Take,
• ...

TP

• Mettre en œuvre les techniques suivantes :
• Cache de données côté client
• Tâches de fond (polling)
• Réexécution de requêtes (retry)
• Limiter l'exécution d'une action en cas de clic multiple de l'utilisateur
• Animations et styles Angular avancés

Animations liées à un composant

• Optons et réutilisation d’animations
• Intégration de Angular Material (Responsive design, gestion du tactile)
• Techniques avancées sur les styles (encapsulation, préprocesseurs de CSS, …)

TP

• Intégrer des animations
• Utiliser SCSS
• Utiliser la librairie Matériel

APRÈS MIDI

Sécurité

• Sécuriser une application avec Angular
• Utiliser le mécanisme de token JWT

TP

• Développer un clavier virtuel pour authentifier un utilisateur
• Mettre en place JWT
• Internationalisation
• Rendre une application multilingue
• Utiliser ngx-translate

TP

• Afficher l’application en Français et en Anglais
• Créer un composant permettant de changer de langue

Créer un composant permettant de changer de langue

Jour 3

MATIN

Librairies Angular

• Créer une librairie avec angular-cli
• Exposer des services / composants / directes
• Builder et déployer une librairie

TP

• Créer une librairie de composants et l’intégrer dans l’application développée dans le cadre de la formation.
• Formulaires avancés
• Créer des formulaires réactifs avec Reactve

Form

• Formulaires imbriqués
• Synchronisation de données dans un formulaire complexe

TP

• Travailler sur le design d’un formulaire complexe dans lequel sont imbriqués des FormGroup et des FormArray
• Synchroniser les données d’un modèle objet au travers du formulaire

APRÈS MIDI

Concepts avancés

• Analyser et optimiser les performances de son application
• Progressive Webapp
• Mettre en place un Service Worker avec angular/cli
• Server Side Rendering (SSR) avec Angular

Universal

• Angular en dehors du web
• Initialisation aux projets mobile avec Ionic

TP

• Utilisation des plugins Chrome et des outils Angular pour analyser la performance de son application
• Création d’une application PWA avec support du mode offline
• Création d’une mini-application mobile avec Ionic