Framework Angular : fonctionnalités avancées | Mode E-Learning

Présentation du cours

• Présentation du cours

Rappels

• Objectifs du module
• Rappels sur l’écosystème JavaScript
• Rappels sur TypeScript
• Pourquoi des applications Single Page Application ?
• Introduction sur les frameworks et bibliothèques JavaScript

Introduction à Angular

• Objectifs du module
• Présentation d’Angular
• Les grands principes d’Angular
• Installation du poste de développement
• Utilisation de la ligne de commande Angular @angular/cli
• Création d’un premier projet Angular
• Démonstration – Lancer le serveur de développement et visualiser le résultat sur un navigateur
• Anatomie d’un projet Angular
• TP à réaliser

Les composants

• Objectifs du module
• Rappels sur le pattern MVC
• Comprendre les architectures orientées composants
• Anatomie d’un composant
• Démonstration – Créer un composant manuellement
• Démonstration – Créer un composant avec la CLI
• Le cycle de vie des composants
• TP à réaliser
• Corrigé du TP

L’affichage dynamique

• Objectifs du module
• Découvrir le Data Binding
• Démonstration – Saisie et affichage dynamique du nom d’utilisateur
• Utiliser les directives d’Angular
• Démonstration – Affichage conditionnel d’un bloc de texte
• Démonstration – Ajouter et supprimer des utilisateurs dynamiquement
• Formater les données avec les pipes
• Démonstration – Normaliser l’affichage des noms d’utilisateur dans la liste
• TP à réaliser
• Corrigé du TP

Les services

• Objectifs du module
• Rôle et responsabilité des services dans MVC
• Les services dans Angular
• Injection de dépendances
• Cycle de vie des services
• Démonstration – Création d’un service Angular manuellement
• Démonstration – Création d’un service Angular avec la commande ng generate
• TP à réaliser
• Corrigé du TP

Les routes

• Objectifs du module
• Comprendre le routing et la navigation
• Créer des routes simples
• Démonstration – Création d’une route simple
• Créer des routes avec des paramètres
• Démonstration – Création d’une route avec arguments
• Protéger ses routes avec les Guards
• TP à réaliser
• Corrigé du TP

Les formulaires

• Objectifs du module
• Rappel sur les formulaires HTML
• Démonstration – Création de formulaires basiques
• Présentation du module FormsModule
• La validation de données avec les FormsModule
• Démonstration – Transformation du formulaire avec FormsModule
• Démonstration – Création d’un validateur personnalisé
• TP à réaliser
• Corrigé du TP

Programmation asynchrone

• Objectifs du module
• JavaScript et les limites du multithreading
• Les callbacks
• Les promesses
• Les async/await
• Comparaison des méthodes de gestion de l’asynchronisme
• Démonstration – Coder du morse avec des callbacks, des promesses et des async/await
• TP à réaliser
• Corrigé du TP

Travailler avec une API REST

• Objectifs du module
• Rappels sur le protocole HTTP
• Différences entre REST et SOAP
• Démonstration – Où trouver des API REST publiques ?
• Le module HttpClient
• Les Observables
• Gestion des états et des erreurs
• Démonstration – Afficher une citation aléatoire grâce à QuotesAPI
• TP à réaliser
• Corrigé du TP

RxJS

• Objectifs du module
• Présentation de RxJS
• Pourquoi utiliser RxJS dans un projet Angular ?
• Utilisation des Observables
• Démonstration – Mise en place d’un Observable
• Les opérateurs RxJS
• Démonstration – Utilisation des opérateurs
• TP à réaliser
• Corrigé du TP

Les bonnes pratiques

• Objectifs du module
• Utiliser des classes pour cadrer l’utilisation des modèles
• Les modules
• Communication entre les composants
• Conventions de nommage et règles de codage avec ESLint
• Optimisation du temps de chargement avec le lazy loading
• Travailler le visuel simplement avec PureCSS.