Jour 1
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
Jour 2
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 : Appel d'une API Rest offrant 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
Jour 3
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’Angular, 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
