Assimiler les fondamentaux d'Angular
Dès lors qu'Angular couvre tous les besoins d'une application web frontend, la quantité de fonctionnalités peut rendre l'apprentissage difficile. Son utilisation suppose aussi d'être à l'aise avec l'écosystème JavaScript.
Après avoir passé en revu les éléments essentiels de cet écosystème (NodeJS, Npm ou Yarn, le langage TypeScript, les linters, etc...), ce cours vous apprendra à utiliser les fonctionnalités les plus importantes d'Angular: celles qui permettent de faire face à la plupart des cas d'usage d'un projet.
(17,5 heures)
En présentiel ou en classe virtuelle
En français ou en anglais
Développeurs et développeuses HTML, JavaScript
Accessible aux personnes en situation de handicap
DélaiLe cours peut être organisé dans un délai d'un mois.
Objectifs
A l'issue du cours vous saurez:- créer et démarrer un projet avec la command line interface;
- déclarer un composant et des routes;
- manipuler des streams réactifs;
- requêter une API et présenter des données;
- créer des formulaire et valider la saisie utilisateur;
- écrire des composants réutilisables;
- livrer une application optimisée.
Prérequis
Ce cours demande une connaissance des bases du langage JavaScript et du langage HTML.
Méthodes pédagogiques
- Explication, pour chaque concept, du problème qu'il prétend résoudre.
- Mise en pratique d'un concept immédiatement après qu'il ait été présenté.
- Validation de chaque étape par exécution de tests unitaires.
- Exercice « fil rouge » pour obtenir en fin de cours une application complète.
- QCM en fin de chapitre pour s'assurer de l'acquisition des connaissances.
Programme détaillé
Introduction
- Le principe d'une single page application et les cas d'usage.
- Le langage TypeScript.
- L'environnement de développement: NodeJS, Npm, le compilateur Typescript, le compilateur Angular.
Prise en main du framework
- Les concepts de base: module, component, router, service, provider, directive, pipe.
- Les modules Angular:
form,core,router, etc... - La CLI pour créer, démarrer et builder un projet.
- La structure d'une application.
- Le bootstrapping.
- Le client HTTP pour requêter des API.
Mise en pratique: création et démarrage d'un projet Angular, étude des fichiers et dossiers créés par la CLI.
La déclaration d'un composant
- L'annotation
@Componentet ses propriétés. - La déclaration d'une route pour naviguer vers un composant, la protection avec les fonctions guards.
- L'accès aux propriétés du composant dans le template.
- L'injection de dépendances.
- L'application des css.
- L'utilisation du
Routerpour naviguer d'un composant à l'autre. - Les hooks.
Mise en pratique: écriture d'un composant simple, affichage de données et étude du cycle de vie du composant.
Les observable de RxJS
- Les principes de la programmation réactive.
- Les streams comme source de diffusion d'éléments.
- Les principaux streams: réponse à une requête HTTP, activation d'une route, action utilisateur, etc...
- Les opérateurs pour assembler un pipeline à partir d'un stream.
- Les bonnes pratiques pour éviter le callback hell.
- La souscription et la désouscription.
Mise en pratique: requêtage d'une API avec le HttpClient, écriture d'un pipeline
et
souscription.
L'écriture des templates
- Les boucles et les conditions, introduction aux control flows.
- Le formatage et la transformation des données avec les pipes.
- L'affichage de données asynchrones avec le pipe
async. - Les formulaires et la validation.
- La réaction aux actions utilisateurs.
- Les liens vers d'autres composants.
Mise en pratique: restitution de données retournées par l'API requêtée, création de formulaires et application de la validation.
Les composants réutilisables
<hello/>
- L'incorporation d'un composant réutilisable.
- L'échange d'information avec le composant parent (
@Input,@Output,EventEmitter). - La manipulation du DOM.
Mise en pratique: création d'un composant réutilisable, échange d'informations avec le composant parent.
Le build d'une application
- La gestion des variables d'environnement.
- La création d'un livrable optimisé avec la compilation ahead of time.
Mise en pratique: création d'un livrable optimisé et substitution des variables d'environnement.
Prix et financements
2 12
Réduction de 50% pour les associations reconnues d'utilité publique.
Sources de financements pour les organisations françaises:
- prise en charge tout ou partie du coût de la formation par votre opérateur de compétence (OPCO);
- Le dispositif FNE formation si votre organisation est éligible.
- Le plan de développement des compétences de votre entreprise (renseignez-vous auprès de votre service RH).