PLB CONSULTANT : 05. Angular - Développement d'applications web

Introduction

Objectifs du framework et Points forts d’Angular, comparaison avec ReactJS, VueJS

Bien comprendre les implications de la politique de versionning

Les dernières versions et ce qu’elles apportent

JavaScript ES5, ES6 et Typescript

Voir ou revoir les bases de la syntaxe JavaScript : Variables, tableaux, fonctions

Les améliorations d’ES6 avec les notions de classes et de modules, : Instanciation d’objet, les Arrow functions, l’interpolation de String

TypeScript  avec les Types et les annotations : 

Transpilation, configuration de la transpilation

Inférence de type, interfaces, Classes, Visibilité

Décorateurs

Atelier 1

Objectif : Être à l’aise avec la syntaxe TypeScript

Description : Manipulation de tableaux, boucles et fonction de call-back en JavaScript

Déclaration de classe et d’interface, instanciation d’objet

Premiers pas avec Angular

Les prérequis d’installation, rappels npm et nodejs

L’outil de développement Angular-CLI : ng et ses principales commandes

Modules et composants Angular

Atelier 2

Objectif : Prendre en main les commandes d’AngularCli et le cycle de développement

Description : Installation nodejs, npm, TypeScript

Installation Angular CLI

Création de projet, démarrage du serveur

Constatation du LiveReload, Debugger Chrome

L’approche composant

Principes généraux d'Angular, l’arbre de composants, Shadow Dom et templates

Comment déclarer un composant, les différentes syntaxes possibles, création via ng : les fichiers générés

les éléments de syntaxe des templates : Interpolation, Pipes, Utilisation de composant

Interactions entrée/sortie avec les composants  : Binding et événements

Le cycle de vie des composants et les interfaces de call-back proposés par Angular

Comment gérer le style des composants, le sélecteur CSS :host

Comparaison directive / composant. Créer ses propres directives

Atelier 3

Objectif : Savoir déterminer l’arbre de composants

Prendre en main la syntaxe de templating

Description : Création d’un composant menu et d’un composant liste

Développent Typescript des modèles

Gestion du onClick

Application de style via le sélecteur:host

Injection de dépendances

Le principe d’injection, son mécanisme dans Angular

Annotations concernés par l’injection

Les injecteurs hiérarchiques, Choisir son injecteur dans les composants 

Écrire sa classe service, cycle de vie et cas d’usage

Atelier 4

Objectif : Créer son premier service

Description : Création de deux composants service

Mock d’un appel HTTP

Service stateful encapsulant les données partagées

Programmation réactive et service HTTP

Programmation réactive : OK, on vous rappellera

Le standard ReactiveX, son implémentation avec RxJS

Le type Observable et la méthode subscribe()

Les principaux opérateurs disponibles, leurs importations

Les cas d’usage de le programmation réactive dans les application front-end

Exemple incontournable : Le service HTTP fourni par Angular

Les bonnes pratiques pour interagir avec le back-end : Mapping Objet, Intercepteurs, Gestion du CORS

Atelier 5

Objectif : Savoir dialoguer avec un back-end 

Description : Création des fonctionnalités CRUD dans le composant service

Le routage Angular

Comment gérer la navigation avec Angular ? Déclarer ses routes

Gérer les redirections, récupération les paramètres de navigation

Routage hiérarchique : comment s’organiser, les bonnes pratiques

Guards et resolver : Comment protéger l’accès à une route

S’abonner aux évènements de routage

Atelier 6

Objectif : Gérer la navigation d’une application

Description : Création d’un composant détail

Gestion de la navigation liste→detail

Protection de routes

Les formulaires Angular

Template-driven ou Model-driven ?

La directive ngModel

Les types FormGroup et FormControl. Comment gérer la réutilisation ?

Le support pour la validation de données, écrire ses propres validateurs, validation dynamique

Gestion des libellés d’erreurs

Atelier 7

Objectif : Savoir concevoir et valider des formulaires

Description : Modification du composant détail

Définition du formulaire et de ses validateurs

Gestion des erreurs et de la soumission

Support pour l’internationalisation

Support pour la localisation d’Anguler, Comment la locale est déterminée ?

Développer une application multi-lingue : Processus et outillage

Syntaxe du templating

Atelier 8

Objectif : Savoir internationaliser une application 

Description : Utiliser les fichiers de libellés (Français/Anglais) fournis

Intégrer les tests dans son développement

Le moteur de tests Karma et le framework Jasmine proposés

Écrire un test de composants, de service, isolation du code à tester

Les tests End to End avec Cypress

Exécuter les tests

Atelier 9

Objectif : Écrire des tests unitaires avec Angular 

Description : Écriture des tests unitaires pour tous les composants précédents

Se préparer pour la production

Profiling d’application, identifier les goulots d’étranglement

Polyfill et chargement différenciée en fonction des navigateurs

Gérer les différents environnement (dev et prod) 

Assembler pour la production, 

Comment déployer, Configuration du serveur et gestion du reload

Atelier 10

Objectif : Savoir déployer une application Angular en production 

Description : Assemblage pour la production

Configuration nodeJs

Déploiement