Objectives of the training
Angular est l’un des frameworks JavaScript qui a révolutionné la conception d’application web et qui permet de concevoir des applications web dynamiques, structurées et aisément maintenables.
L’objectif de cette formation est de vous apprendre à concevoir des applications web avec Angular, qui proposeront une expérience utilisateur riche, dynamique et performante.
Targeted audience
Informaticiens
Prerequisite
Des connaissances de base sur le langage JavaScript sont nécessaires. Trainers
Upcoming information
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.
Private or personalized training
If you have more than 8 people to sign up for a particular course, it can be delivered as a private session right at your offices. Contact us for more details.
Request a quote