Programme détaillé

IDENTIFIER ET UTILISER LES SPECIFICATIONS ECMASCRIPT ES13

• JS, EcmaScript et TypeScript
• Notion de Single Page Application
• Les Framework JS (Vue, React, Angular)
• Démonstration :
• - Installation de l’environnement de travail
• - Code en direct (live-coding)

SAVOIR DEVELOPPER PLUS RAPIDEMENT ET TESTER DES APPLICATIONS 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

IDENTIFIER ET UTILISER LES FONDAMENTAUX DU FRAMEWORK ANGULAR ET SES NOUVEAUTES

• LES WORKSPACES ANGULAR
• - Le principe des workspaces
• - Le fichier de configuration angular.json
• LES SYNTAXES DE BASE AVEC ANGULAR
• - Le bootstrapping
• - Les modules
• - Les components et standalone components
• - Les templates
• - Le data binding
• - Les directives
• - Les blocs control-flow (@for, @if …)
• - Les Pipes
• - Les services
• Pratique :
• - Création de components et components standalone
• - Découvrir les directives de comportement (hidden, class, ...)
• - Créer une directive, Découvrir les directives de structures (*ngIf, *ngFor, ...)
• - Créer un pipe

ORGANISER ET MODULARISER SES DEVELOPPEMENTS AVEC ANGULAR

• Rappels sur le principe des modules Angular
• 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

S5 – UTILISER LES API ANGULAR

• Formulaires
• - Template driven forms vs Reactive Forms
• - Événements unifiés de changement d'état des formControl (reactive forms)
• SIGNALS et RxJS
• - Découverte des APIs Signals, RxJS et interopérabilité
• - Communication entre composants transverses (services et subjects, signals)
• Services
• - Notion d'injection de dépendance
• - Utiliser le module HttpModule
• - Créer et utiliser ses propres services
• Pratique :
• - Création d’un Reactive Form
• - Consommation d’une API REST (introduction RxJS)

SAVOIR INTEGRER LES TESTS UNITAIRES AU DEVELOPPEMENT

• Outils et API de test Angular (Protractor, Karma, Testbed, etc.)
• Ecrire des tests
• Outils annexes (Angular DevTools, Extensions VSCode ou autres IDEs)
• Pratique :
• - Tester un composant
• - Tester un service

IDENTIFIER LES BONNES PRATIQUES DE DEVELOPPEMENT ET DE MISE EN PRODUCTION

• Outils de documentation
• Mises à jour Angular
• Pratique :
• - Générer une documentation à partir de la JS DOC et d’outils comme COMPODOC