Formation Angular avancé

1. Comprendre la compilation d'Angular

• Qu'est-ce qu l'AoT, le JiT, les ngFactories.
• Mode production / mode debug : quelles différences ?
• Qu'est-ce que Webpack, comment est-il utilisé par Angular ?
• Le processus de compilation décrit pas à pas.
• Configuration du compilateur : options avancées de angular.json et tslint.json.

2. Tout savoir sur le module system et l'injection de dépendances

• Comment fonctionne l'injecteur de dépendances ?
• Utiliser directement la classe Injector : pourquoi, comment ?
• Comprendre toutes les options du NgModule (imports, exports, entryComponents, provides…).
• Bien comprendre comment partager des composants entre modules.
• Écrire ses propres providers : valeur, classe et fonction (factory).
• Utiliser les clés d'injection (injection token).
• Mettre en place du lazy loading de modules pour optimiser les temps de chargement.

Utiliser des fonctions avancées des modules :

• grâce à l'initialiseur de composants (APP_INITIALIZER), nous attendrons d'avoir reçu la langue de l'utilisateur avant d'afficher l'application,
• grâce aux intercepteurs HTTP (HTTP_INTERCEPTORS), nous afficherons une barre de loading dès l'instant où une requête ajax est en cours.

3. Routing avancé

Les notions avancées de routing feront gagner votre code en simplicité :

• les Resolver,
• les Guard,
• les Child routes.

Nous aborderons également les cas d'utilisations avancés suivants :

• rediriger vers la page de login si l'utilisateur n'est pas connecté, puis revenir sur la page demandée initialement.
• mettre en place une page "404".

 

4. RxJS avancé

 

Dans cette section nous aborderons plusieurs cas d'utilisation courants et présenterons les techniques et outils avancés pour y répondre avec RxJS.

Nous explorerons ainsi une grande partie de la puissance de la bibliothèque RxJS (version 6+).

Exemple de cas d'utilisations :

• mettre en place un système de récupération récurrent de données (polling), suivant plusieurs stratégies (automatique, semi-automatique…),
• mettre en place un système de cache côté client,
• comment travailler avec une bibliothèque qui renvoit des promesses,
• comment limiter l'exécution d'une action en cas de clic multiple de l'utilisateur,
• réessayer une requête get si elle a n'a pas abouti à cause d'une coupure de réseau
• etc…

Exemple d'opérateurs et constructeurs abordés :

• Observable.create(),
• throwError, catchError,
• from, of,
• concatMap, switchMap, (différences avec mergeMap)
• debounceTime, throttleTime,
• takeWhile, delayWhen,
• publishReplay, refCount, take,
• AsyncSubject…

Les opérateurs et constructeurs vus en initiation feront l'objet d'un rappel :

• BehaviorSubject, map, mergeMap, tap, timer,
• bonnes pratiques avancées (unsubscribe, pipe async…),
• notions de mutabilité.

5. Animations et style Angular avancés

• Animations liées au workflow d'un composant.
• Animations liées au statut d'un attribut.
• Réutiliser les animations (aimation(), useAnimation()…).
• Toutes les options des animations.
• Intégration de Angular Material.
• Les différentes techniques d'isolation du css (ViewEncapsulation): Shadow DOM, émulée.

6.Les techniques avancées de composants

• Les directives (@Directive).
• Les directives structurelles (comment fonctionnent le *ngIf, *ngFor…).
• Les templates embarquées (ng-template, ngTemplateOutlet, TemplateRef…).
• La projection de contenu (ng-content).
• Le Host.
• Accéder aux sous composants avec ViewChild et ElementRef.
• Connaître les étapes de cycle avancés : (ngAfterViewInit…).

Cas d'utilisation avancés :

• mettre en place un système de pagination qui fonctionne de manière générique avec différents types de listes,
• créer une directive, utilisable avec n'importe quel composant, qui traque les clics sur ce composant.

 

7. Mise en place d'un server side rendering (SSR)

 

• Les enjeux du SSR.
• Créer avec angular-cli un projet qui peut être rendu côté serveur.
• Comment fonctionne le SSR avec Angular Universal.
• Comment renvoyer un code d'erreur correct depuis le serveur SSR (404, 401, 500…).
• Comment forwarder le Host pour que le serveur Rest génère des urls correctes.

8. Techniques Angular de Progressive Web App

• Mettre en place un Service Worker avec le client @angular/cli.

9. Tests

• Ecrire et lancer les tests,
• Mocker les appels http.

10. Internationalisation

• Internationalisation avec ngx-translate.

11. Utiliser Angular en dehors du web

• Initialiser un projet desktop avec Electron.
• Initialiser un projet mobile hybride avec Ionic.