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.
Ouverture vers l'Intelligence Artificielle
Le formateur proposera, lorsque pertinent, un éclairage sur les usages complémentaires de l’intelligence artificielle en lien avec le programme : automatisation de tâches, assistance à l’analyse et à la création de contenus, optimisation des processus ou encore support à la prise de décision. Ces apports permettront d’illustrer de nouvelles pratiques tout en sensibilisant aux bonnes règles d’utilisation responsable (sécurité, fiabilité des résultats, respect des données).
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
Accessibilité
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.
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.
Moyens techniques
Le suivi pédagogique, administratif et logistique est assuré et coordonné par nos services afin de garantir le bon déroulement de l’action de formation.
Les stagiaires bénéficient d’un encadrement complet tout au long de la formation.
Pour les formations réalisées en centre, les participants disposent d’un espace d’accueil, de salles configurées techniquement selon les besoins pédagogiques et d’un matériel dédié.
Des ressources pédagogiques sont mis à disposition des participants pendant la formation. Une documentation pédagogique est remise à échéance de la formation au format papier ou numérique.
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.
