Description
En passe de devenir la référence des frameworks front-end dans le développement d’applications web, Angular apporte, au-delà du support ECMAScript et du typescript, un véritable écosystème qui permet d’améliorer les performances des applications mais aussi la productivité des équipes de développement. Nouvelle approche de conception, capacités d’industrialisation et réutilisation accrues, intégration des standards du développement web et outillage spécialisé rendent cette plateforme plus attractive et l’impose comme la solution de prédilection pour les projets applicatifs web.
Angular intègre les règles fondamentales de sécurité en vigueur actuellement côté frontend.
Vous apprendrez à utiliser une IA pour générer la structure des différentes schématiques Angular afin d’augmenter votre productivité.
A l’issue de la formation, le stagiaire sera capable de développer des applications web évolutives avec Angular.
Objectifs
- Comprendre les concepts clés d'Angular et ses dernières évolutions
- Développer une application web Angular avec Javascript et Typescript
- Tester et sécuriser son développement
- Créer des composants réutilisables et modulaires
- Utiliser les API Angular
- Connaître les bonnes pratiques de développement
Récapitulatif
Public
Architectes, développeurs, chefs de projets…
Prérequis
Avoir des connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Comprendre les concepts clés d'Angular et ses dernières évolutions
- JS, EcmaScript et TypeScript
- Notion de Single Page Application
- Les Framework JS (Vue, React, Angular)
- Créer une SPA “from scratch” en JS
- Exemple de travaux pratiques : Le participant doit développer une mini-application SPA (ex : liste de tâches) avec JavaScript natif, permettant d'ajouter et supprimer des éléments dynamiquement.
Développer une application web Angular avec Javascript et Typescript
- Commandes Angular-CLI et scaffolding
- Structure d'un workspace Angular et outils intégrés
- Ecosystème Angular et librairies annexes
- Environnement de développement (IDEs et extensions utiles)
- Pratique
- Création d'un workspace Angular
- Utilisation des commandes Angular CLI
- Exemple de travaux pratiques : le participant doit initialiser un projet Angular, créer un premier composant via la CLI et visualiser le rendu dans le navigateur.
Identifier et utiliser les fondamentaux du Framework Angular et ses nouveautés
- Les syntaxes de base avec angular
- Les modules
- Les components et les templates
- Le data binding
- Les directives
- Les pipes
- Les services
- Pratique
- Création de components standolnes ou modulaires
- Découvrir les directives de comportement (hidden, class, ...) et créer une directive
- Découvrir les directives de structures (*ngif, *ngfor, ...) et structures de contrôle (@if, @for…)
- Découvrir les pipes (dates, chaînes, etc) et créer un pipe
- Exemple de travaux pratiques : participant doit créer un composant de liste d'utilisateurs avec des directives *ngIf et *ngFor, et un pipe de formatage pour l'affichage.
Créer des composants réutilisables et modulaires
- Rappels sur le principe des modules Angular ainsi que l'approche standalone
- Installation et utilisation de librairies (utilisation d'une librairie de composants graphiques)
- Création de modules et patterns connus (Shared Module pattern)
- Communication entre components
- Fonctionnalités de Routing et chargement de modules
- Pratique
- Installer Angular Material et créer un thème ou module pour regrouper les éléments graphiques
- Découper son application en plusieurs modules à partir d'un diagramme UML
- Créer un Shared Module pour partager les fonctionnalités transverses de son application
- Exemple de travaux pratiques : le participant doit créer un module partagé avec des composants réutilisables (boutons, modales) et intégrer Angular Material avec un thème personnalisé.
Utiliser les API Angular
- Formulaires
- Template driven forms vs Reactive Forms
- Services
- Notion d'injection de dépendance
- Utiliser le module HttpClient
- Créer et utiliser ses propres services
- Pratique
- Création d'un Reactive Form
- Consommation d'une API REST (introduction RxJS)
- Exemple de travaux pratiques : le participant doit créer un formulaire réactif de création d'utilisateur et consommer une API REST pour enregistrer les données.
Tester et sécuriser son développement
- Outils et API de test Angular (Protractor, Karma, Testbed, )
- Ecrire des tests
- Outils annexes
- Pratique
- Tester un composant
- Tester un service
- Exemple de travaux pratiques : le participant doit écrire un test unitaire pour un service de gestion de tâches et vérifier son bon fonctionnement avec Jasmine
Connaître les bonnes pratiques de développement
- Outils de documentation
- Mises à jour Angular
- Générer une documentation à partir de la JS DOC et d'outils comme COMPODOC
- Exemple de travaux pratiques : le participant doit documenter un composant à l'aide de commentaires JSDoc et générer une documentation HTML avec COMPODOC.