Framework Angular – Fonctionnalités avancées

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.

Public :
Informaticiens

Prérequis :
Des connaissances de base sur le langage JavaScript sont nécessaires.

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h02.
Présentation du cours

• Présentation du cours

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h41.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 1h04.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 1h02.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h58.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h53.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 1h04.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h53.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h47.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 1h10.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h56.
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

Cours
Ce module vous propose la consultation d’une vidéo d’une durée de 0h48.
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