Angular : Concevoir et structurer des front‑ends professionnels

Jour 1 :

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.

Jour 2 :

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é.

Jour 3 :

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.