Angular – Initiation au développement avec Angular
3 jours - 21 heures
Objectifs
Comprendre les fondements du framework Angular et de son écosystème, Savoir créer des composants, formulaires, services, routages et appels API, Utiliser les dernières fonctionnalités Angular : Standalone Components, inject(), Signals, Déployer une application Angular et écrire des tests unitaires
Participants
Développeurs web, intégrateurs, chefs de projets techniques
Prérequis
Bonne maîtrise de JavaScript (ES6). Connaissances de base en HTML et CSS recommandées.
Pédagogie
La pédagogie est basée sur le principe de la dynamique de groupe avec alternance d'apports théoriques, de phases de réflexion collectives et individuelles, d'exercices, d'études de cas et de mises en situations observées. Formation / Action participative et interactive : les participants sont acteurs de leur formation notamment lors des mises en situation car ils s'appuient sur leurs connaissances, les expériences et mettront en œuvre les nouveaux outils présentés au cours de la session.
Spécificités pédagogiques de la session à distance
Formation dispensée en visio-formation avec un séquencement adapté. Configuration et accès à notre outil de visio-formation. Accès à la bibliothèque pédagogique virtuelle durant la formation afin de partager les exercices, contrôler les résultats obtenus et déployer l’ensemble du séquencement pédagogique. La durée exacte des modules définis ci-après est susceptible de varier en fonction de la vitesse d’appropriation des concepts enseignés de la part du stagiaire.
Public Visé
Collaborateurs - Développer ses compétences, s’affirmer comme expert dans son domaine, sécuriser son parcours professionnel ; Entreprises ou organisations - Accélérer les évolutions de carrière des collaborateurs, augmenter l’efficacité et l’employabilité des équipes… ; Demandeur d’emploi - Développer son employabilité, favoriser sa transition professionnelle...
Profil de l'intervenant
Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.
Accessibilité
Moyens techniques
Encadrement complet des stagiaires durant la formation. Espace d’accueil, configuration technique des salles et matériel pédagogique dédié pour les formations en centre. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.
Moyens techniques relatifs aux sessions à distance
Encadrement complet des stagiaires durant la formation. Accès à notre service technique durant l’animation pour toute limite rencontrée. Accès à l’espace de conversation instantané durant la session pour interagir avec le formateur et les participants. Transmission d’un email de contact pour réaction privée durant la session. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.
Méthodes d'évaluation des acquis
Exercices individuels et collectifs durant la formation. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis de fin de stage sont adressées avec la facture.
Méthodes d'évaluation des acquis de la formation à distance
Exercices individuels et collectifs communiqués durant la formation via la bibliothèque pédagogique virtuelle mise à disposition ou directement par le formateur. Ces activités constituent les modalités de suivi et d’évaluation du Stagiaire de la part du formateur. Suivi permanent du formateur durant l’animation et durant les exercices pratiques.
Programme
Environnement et premiers pas
- Présentation de l’environnement Angular moderne : VSCode, Node.js, npm
- Installation de l’Angular CLI et création d’un premier projet
- Structure d’un projet Angular (fichiers, dossiers, modules, scripts)
- Compilation incrémentale, hot reload
- Présentation du modèle Standalone Components
Introduction à TypeScript
- Comparatif TypeScript vs EcmaScript
- Types de données, opérateurs (?, !, etc.)
- Fonctions, fléchées et classiques, passage d’argument
- Généricité, classes, interfaces, décorateurs
- Nullable, valeurs par défaut
Architecture Angular
- Philosophie MVVM / MVW
- Notions de composants, services, directives, pipes
- Décorateurs Angular : @Component, @Injectable, etc.
- Cycle de vie des composants : OnInit, OnChanges, OnDestroy
- Liaison de données : unidirectionnelle, bidirectionnelle, interpolation, binding d’attributs et d’événements ([], (), [()])
Binding de variables
- Data Binding : simplirection ou bidirectionnel
- Les directives importantes : ViewChild
- La gestion des Events et l'objet $event
Gestion des formulaires réactifs
- Présentation des formulaires Angular
- FormGroup, FormControl, FormArray
- Binding des données au formulaire
- Validation native et personnalisée
- Gestion des erreurs, ngSubmit, affichage conditionnel
- Soumission et format JSON
Routage et navigation
- Configuration du module de routage
- Définir les routes, paramètres, redirections
- Routes imbriquées, route par défaut
- Guards et intercepteurs de navigation
- Lazy loading de modules ou composants (standalone)
Directives Angular
- Directives structurelles : *ngIf, *ngFor, *ngSwitch
- Directives d’attribut : ngClass, ngStyle, attr.*
- Création de directives personnalisées
- Communication avec @Input, @Output
- Gestion des événements dans une directive
Gestion multilingue
- Présentation de la gestion i18n dans Angular
- Chargement de traductions JSON ou via ngx-translate (selon le besoin)
Les Pipes
- Introduction au concept de Pipe
- Pipes intégrés (date, uppercase, currency, etc.)
- Création de Pipes personnalisés
- Différence entre pipes purs et impurs
Services et injection de dépendance
- Création d’un service injectable
- Fournisseurs (providers), portée des services
- Utilisation de inject() dans les composants standalone
- Types de services : classe, valeur, fabrique
Appels HTTP et RxJS
- Utilisation de HttpClientModule et HttpClient
- Appels REST avec GET, POST, PUT, DELETE
- Gestion des erreurs, typage des réponses
- Introduction aux Observables avec RxJS
- Promesses et async/await
- Opérateurs courants : map, filter, switchMap, etc.
- Présentation des Angular Signals (v16+) pour la réactivité déclarative
Tests unitaires
- Introduction au TDD
- Tests avec Jasmine ou Jest
- Mise en place de Jest dans un projet Angular
- Tests de composants, services, pipes
- Utilisation de TestBed et des utilitaires Angular Testing
- Lancement des tests en ligne de commande
