Angular : Concevoir et structurer des front‑ends professionnels Mixte : présentiel / à distance

• Comprendre les concepts clés d'Angular et ses dernières évolutions
• Développer une application web Angular avec Javascript et Typescript
• Tester et sécuriser son développement
• Créer des composants réutilisables et modulaires
• Utiliser les API Angular
• Connaître les bonnes pratiques de développement

• Développeurs front‑end

• Développeurs web full‑stack

• Chefs de projet techniques

• Architectes web

• Avoir des connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript
• Un questionnaire de positionnement sera réalisé au préalable pour adapter la formation à vos besoins

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.

• Exercices concrets
• Cas pratiques
• Quiz d'évaluation des connaissances

• Mise à disposition de postes de travail
• Vidéoprojecteur, tableau blanc, supports numériques
• Documentation pédagogique numérique

• Positionnement en amont de la formation :
• Un quiz de consolidation des pré-requis sera administré en amont de la formation
• Suivi « pendant » :
• Feuilles de présence
• Exercices pratiques
• Évaluation « fin de formation »
• Évaluation des acquis en fin de formation
• Formulaires d'évaluation de la formation
• Évaluation à froid :
• Suivi post-formation : Questionnaire de satisfaction à j+30

• Installer et configurer un projet Angular avec Angular CLI
• Utiliser les syntaxes modernes ES6/ES13 et TypeScript
• Créer des composants, modules et templates Angular
• Gérer les formulaires (template et réactifs) et leurs validations
• Implémenter des tests unitaires pour composants et services
• Appliquer les bonnes pratiques de développement Angular
• Consommer des API REST et utiliser RxJS/Signals

Délais d'accès à la formation

Le délai d'accès à la formation est variable en fonction du dispositif de financement utilisé, du planning des formateurs et des contraintes du client. Pour les formations inter-entreprises, vous pouvez consulter notre calendrier en ligne ou prendre contact avec nous. Nous traitons vos demandes sous 48 heures

Accessibilité

Si vous êtes en situation de handicap, merci de nous en informer afin de vous accompagner, vous orienter, et étudier les compensations nécessaires pour répondre au mieux à votre demande de formation. Certaines formations peuvent nécessiter une adaptation pour les personnes en fonction de leur handicap. Nous restons disponibles pour échanger ensemble et nous pourrons vous orienter vers un de nos partenaires : Agefiph, Cap Emploi

Contactez-nous pour échanger sur vos besoins !

Rachel Girardeau

✉️ formation@napsia.com

📞 05 62 84 10 13