Angular avancé

Angular est la référence des infrastructures JavaScript côté client. Elle propose une refonte du cœur du framework en s’appuyant sur les nouveaux standards du Web. Elle permet d’optimiser la viabilité de votre application, d’optimiser ses performances et créer une librairie Angular pour pouvoir réutiliser votre code d'un projet à l'autre.

Vos projets deviennent de plus en plus complexes, et vous souhaitez ajouter encore plus d'outils à votre collection pour mieux les apprivoiser ?  Cette formation est pour vous.

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

• Approfondir la maîtrise d’Angular.
• Améliorer la productivité.
• Mettre à jour son application depuis les versions précédentes.
• Mettre en place une architecture robuste.
• Optimiser vos applications.
• Ajouter des tests pour améliorer la fiabilité.
• Savoir réutiliser des fonctionnalités en créant une librairie pour Angular.

Public concerné

Ce cours s'adresse principalement aux développeurs qui travaillent déjà avec Angular et qui ont une connaissance en Javascript et TypeScript.

Prérequis

De bonnes connaissances en Angular. 

Programme de la formation

Introduction 

• Les architectures orientées Micro-Service.
• Frontend et backend.
• Architecture en couche.
• Angular et WebServices REST.
• Angular 4 vs Javascript native et les autres Framework.
• Apports d’Angular, les principales nouveautés.
• Comprendre la philosophie du Framework. 
• Structure du framework.
• Les outils de développement.
• Les modules ES6. 
• Les Webpacks.
• Packaging, grunt, npm.
• Installation de npm et angular-cli.

Language Typescript 4.4

• Principe.
• Présentation.
• Transpilation avec Babel.
• Typage, variables et fonctions :
• • Annotations et inférence de types.
  • ​Types statiques et types dynamiques.
  • Type any et types primitifs.
  • Fonctions.
  • Paramètres de fonctions : options, par défaut, paramètre rest.
• Génériques:
• • Typage générique, vue d’ensemble.
  • Créer des génériques.
  • Contraintes de types.
• Modules:
• • Modules internes.
  • Implémenter des modules.
  • Organiser son code avec les modules.
  • Importer des modules externes.
• Concepts avancés:
• • Décorateurs.
  • Unions de types.
  • Alias.

Angular CLI 

• Création d'un squelette d'application.
• Les commandes ng-generate.
• ng-update.

Les Composants Angular 

• Les Web components:
• • Une spécification du W3C.
  • Création de balises personnalisées.
  • Les notions de :
  • • Templates.
    • Shadow DOM.
    • Custom Elements.
    • HTML Imports.
• Composant Angular:
• • Définition.
  • Structure.
  • Décorateurs et sélecteur.
  • Vue : Template et styles.
  • Le cycle de vie des composants.
  • La visibilité des composants.
  • Projection de contenu.
  • Récupération d’attributs.
  • Hiérarchie des composants.
  • Composants dynamique.
  • Debugging.
  • Modedev vs mode Prod.
  • JiT vs AoT.

Communication entre composants

• View et ContentChildren.
• Communication de valeurs : Input.
• Communication d’événements : Output.
• Composants « purs » de présentation vs. composants « impurs » conteneurs.

Les templates

• Templating & data-binding : @angular/common.
• Interpolation.
• Property binding.
• Classes et styles.
• Conditions et boucles.
• Event binding.
• Integration de Bootstrap.

Les Directives Angular 

• ngFor. 
• ngIf.
• ngSwitch.
• ngNonBindable.
• Création des directives personnalisées. 
• Affichage des données par profil grâce aux directives.

Les pipes Angular 

• Les transformateurs fournis.
• Les pipes et les filtres. 
• Créer ses propres pipes.

Routage

• Concepts de routage.
• Configuration des routes.
• Paramètres obligatoires (params).
• Paramètres optionnels (queryParams).
• Navigation (routerLink et navigate).
• Redirections.
• Activation des routes par profil avec Route Guards.
• AuthGuard, CanDeactivate, CanActivate.

Observables et rxjs 4.7

• La programmation réactive : concepts.
• Promesses.
• Introduction à RxJS.
• Observables:
• • Créer des observables.
  • Fonctions d'usine (Opérateurs de création).
  • Opérateurs et diagrammes de marbre.
  • Observables froids vs chauds.
  • Sujets et multidiffusion.
  • Fermeture implicite et explicite des observables.
• Conception et réflexion réactives:
• • Les étapes de la conception reactive.
  • Mise en œuvre structurée d'une solution reactive.
  • Combinaison des Opérateurs.
  • Étude de cas sur la conception réactive et la mise en œuvre de solutions réactives.
• Autres scénarios et opérateurs basés sur des études de cas:
• • Opérateurs de création avancés.
  • Opérateurs pour la gestion des erreurs.
  • Opérateurs de multidiffusion.
  • Opérateurs de filtrage.
  • Opérateurs de transformations.
  • Opérateurs de services publics.
  • Écrivez vos propres opérateurs.

Les Services et communication HTTP 

• Services fournis.
• Créer un service.
• Annotation Injectable.
• Providers, injection des services.
• Requêtes, réponses, communication avec une API.
• Méthodes et paramètres HTTP.
• HTTP providers. 
• Requêtes. 
• Transformation des données et Observables. 
• Options de requêtes.
• Authentification via JWT / Oauth – persistance des tocken.

Gestion d'état avec NGRX

• Gestion d'état avec façades et RxJS.
• L'approche Redux.
• Comparaison de diverses bibliothèques d'état comme NGRX, NGXS et Akita.
• Implémenter l'approche Redux avec NGRX.
• États de modélisation.
• Travailler avec des immuables.
• Actions et créateurs d'actions.
• Réducteur.
• Modules de fonctionnalités et chargement différé.
• Générer du code avec @ngrx/schemas.
• Plus de concepts et de bibliothèques NGRX
• • Sélecteurs et mémorisation.
  • Traiter les effets secondaires avec @ngrx/effects.
  • Gérer les entités avec @ngrx/entity.
  • Automatisez l'interaction entre NGRX et le backend avec @ngrx/data.
• Meilleures pratiques et modèles d'état
• • Conception de composants avec des composants intelligents et stupides.
  • Simplifiez l'utilisation des immuables avec les bibliothèques.
  • Normalisation des états.
  • Meta réducteur.
  • Persistance des états.
  • États et routage.

La gestion des formulaires 

• Créer un formulaire. 
• Les objets Control et ControlGroup.
• La validation d'un formulaire 
• Créer ses propres validateurs.
• La gestion des modifications.
• Groupes de champs avec FormBuilder.
• La gestion des erreurs.

Angular Library 

• Creation d'une Library.
• Building and packing the library.
• Consommation d'une Library.

Les bonnes pratiques  

• Modularisation. 
• Découpage du projet.
• Architecture du projet.
• Server-siderendering : quand ? pourquoi ? comment ?
• Autres.

Moyens pédagogiques

• Travaux pratiques. 
• NodeJs. 
• Un IDE (Visual Code ou autre).