Description
Cette formation vise à développer des compétences avancées en JavaScript, TypeScript et Angular, en se concentrant sur les spécifications ECMAScript ES13 et les frameworks JavaScript. Les participants apprendront à créer des Single Page Applications, à utiliser Angular CLI pour le développement rapide, et à maîtriser les fondamentaux d'Angular, y compris les composants, les directives et le routing. La formation inclut également des pratiques sur les tests unitaires et les bonnes pratiques de développement. Elle s'adresse principalement aux développeurs souhaitant approfondir leurs connaissances en développement web moderne.
Objectifs
- Identifier et utiliser les spécifications EcmaScript 6 (ES6)
- Développer plus rapidement et tester des applications web Angular avec JavaScript et TypeScript
- Identifier et utiliser les fondamentaux du Framework Angular et ses nouveautés
- Organiser et modulariser ses développements avec Angular
- Utiliser les API AngularIntégrer les tests unitaires au développement
- Identifier les bonnes pratiques de développement et de mise en production
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é
Identifier et utiliser les spécifications 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 développer 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 nouveautés
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 développements 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
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 intégrer les tests unitaires au développement
- 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 développement 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