Développer des applications Angular robustes avec composants, RxJS, API REST et bonnes pratiques
Connaître les bases d'Angular, c'est bien. En maîtriser les fonctionnalités avancées pour construire des applications robustes, maintenables et performantes, c'est ce qui fait la différence en production. Cette formation couvre les composants, les services, le routage, les formulaires, la programmation asynchrone avec RxJS et les bonnes pratiques de développement Angular. Pour les informaticiens qui veulent aller plus loin que les tutoriels de démarrage.
Est-ce pour vous ?
Informaticiens
Préalables
Des connaissances de base sur le langage JavaScript sont nécessaires.
Ce que vous saurez faire
- ✓ Structurer une application Angular avec les bonnes pratiques de composants et de services
- ✓ Gérer la programmation asynchrone efficacement avec RxJS et les observables
- ✓ Consommer des API REST, protéger les routes et optimiser les performances de l'application
Contenu de la formation
1 Rappels
- Rappels sur l’écosystème JavaScript
- Rappels sur TypeScript
- Pourquoi des applications Single Page Application ?
- Introduction sur les frameworks et bibliothèques JavaScript
2 Introduction à Angular
- 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
3 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
4 L’affichage dynamique
- 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
5 Les services
- 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
6 Les routes
- Comprendre le routing et la navigation
- Créer des routes simples
- Créer des routes avec des paramètres
- Protéger ses routes avec les Guards
7 Les formulaires
- 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é
8 Programmation asynchrone
- 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
9 Travailler avec une API REST
- 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
10 RxJS
- 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
11 Les bonnes pratiques
- 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
Voir plus
📌 Informations pratiques
Formation 100% à distance. Accessible en tout temps de n’importe où pendant un an. Si vous avez des questions concernant l'inscription, la langue d’enseignement ou les modalités d’annulation, consultez notre FAQ
Intervenants
Information à venir