Formation Angular

Mise à jour : 2025
100 heures
Projets
Quiz

Angular excelle dans le développement d'applications Web complexes, offrant une architecture maintenable pour un travail d'équipe optimal.

4.9

2112 avis

21 671

inscrits

Les notions abordées dans la formation

Compréhension de l'architecture Angular et des types de rendu.
Utilisation des composants, de l'interpolation et des liaisons de données.
Manipulation des requêtes HTTP pour interagir avec des APIs.
Gestion de la navigation avec le routeur Angular et le lazy loading.
Mise en œuvre et validation des formulaires avec ReactiveFormsModule.
Création et utilisation de directives.
Utilisation et création de pipes personnalisés pour le traitement des données.
Test d'applications Angular avec des outils intégrés et des frameworks.
Utilisation des composants Material.
Internationalisation et rendus côté serveur (SSR) et génération de sites statiques (SSG).

Qu'est-ce qu'Angular ?

Angular est un framework JavaScript open-source développé par Google, conçu pour créer des applications web modernes, dynamiques et performantes. Il est basé sur TypeScript, une surcouche typée de JavaScript, offrant un code plus robuste et maintenable. Angular se distingue par son architecture modulaire et son système basé sur les composants, qui facilite l'organisation et la réutilisation du code.

Le framework excelle en termes de performance, notamment grâce à Ivy, son moteur de rendu rapide et optimisé. Angular permet également de développer des Progressive Web Applications (PWA), rendant vos applications utilisables sur mobiles, tablettes et même hors ligne, tout en partageant une base de code unique.

Angular est un framework "opinionated", c'est-à-dire qu'il propose une manière optimale de structurer et développer des applications web. Il prend en charge toutes les fonctionnalités essentielles : gestion des requêtes HTTP, routage avancé, formulaires réactifs, support pour les applications mobiles progressives, rendu côté serveur (SSR) et gestion des états réactifs avec les signaux. Grâce à cette approche tout-en-un, vous n'avez pas besoin de dépendances externes pour couvrir les besoins communs des applications modernes.

Angular offre aussi une expérience complète pour les développeurs, avec des outils comme Angular CLI pour simplifier la gestion des projets, une documentation exhaustive, et un support actif de la communauté. Que ce soit pour des projets simples ou complexes, Angular fournit une base solide pour créer des applications performantes et évolutives.

Les prérequis pour suivre cette formation

Des connaissance en HTML & CSS sont nécessaires
Des connaissance en JavaScript sont nécessaires

Obtenez un certificat de réussite

Pour chaque formation que vous accomplirez, vous obtiendrez une certification que vous pourrez partager sur Linkedin.

Projets réalisés pendant la formation

Dans ce projet, nous mettrons en pratique toutes les notions théoriques abordées dans la formation pour développer une application en plusieurs chapitres, étape par étape, afin d'acquérir une maîtrise parfaite du framework.

Plan de la formation

Afficher tout

Chapitre 1 : Introduction
7 leçons 01:21:26
- À l'abordage
- Présentation d'Angular
- Les différents types de rendu
- Angular CLI, Vite et esbuild
- Mise en place de l'environnement : Windows
- Mise en place de l'environnement : Mac OS
- Qu'est ce que TypeScript ?
Chapitre 2 : Création et aperçu de notre première application
5 leçons 01:10:18
- Création et lancement d'une application
- Vue d'ensemble de l'architecture
- Fonctionnement d'Angular
- Création d'un premier composant
- Aperçu d'un composant
Chapitre 3 : Introduction aux composants
6 leçons 01:09:04
- L'interpolation de chaînes de caractères
- Liaison de propriétés
- Liaison d'évènements
- Single File Component et CLI
- host
- Double liaison [()]
Chapitre 4 : Gestion du style et CSS
4 leçons 00:52:46
- Fonctionnement du style sur les composants
- ViewEncapsulation et :host
- Liaison de la propriété style
- Liaison de la propriété class
Chapitre 5 : [Projet cocktails] partie 1 : Mise en place
5 leçons 01:23:41
- Présentation du projet
- Architecture et CSS
- Mise en place de la liste des cocktails
- Mise en place des détails d'un cocktail
- Mise en place des composants Header et Footer
Chapitre 6 : Rendu conditionnel et liste
4 leçons 00:34:35
- Introduction aux directives structurelles et @if
- Présentation de la directive @switch
- Parcourir un tableau avec @for
- Variable de template @let et référence
Chapitre 7 : Rendre les composants réactifs avec les signaux
6 leçons 01:26:59
- Présentation des signaux
- Syntaxe et utilisation d'un signal()
- Les signaux dérivés avec computed()
- Les effets de bords avec effect()
- Les signaux liées linkedSignal() & Mini projet - Partie 1
- Les signaux liées linkedSignal() & Mini projet - Partie 2
Chapitre 8 : La communication entre les composants
4 leçons 01:15:59
- Introduction et mise en place
- Présentation de input()
- Présentation de output()
- Double liaison avec model()
Chapitre 9 : Approfondissement des composants
5 leçons 01:18:46
- Présentation du chapitre, viewChild et viewChildren
- La projection de contenu avec ng-content
- Cycle de vie des composants
- Rendre dynamiquement un composant
- Améliorer les performances avec @defer
Chapitre 10 : [Projet cocktails] partie 2 : Sélection d'un cocktail et barre de recherche
4 leçons 01:05:25
- Présentation des fonctionnalités et mise en place
- Refactorisation de la liste de cocktails et sélection
- Barre de recherche
- Menu dynamique pour téléphone
Chapitre 11 : Service et injection de dépendances
4 leçons 01:23:41
- Présentation de l'injection de dépendances
- Token, classe et injection
- Création et utilisation d'un service
- Création d'un second service et dépendances circulaires
Chapitre 12 : Les directives
4 leçons 00:36:49
- Introduction aux directives et mise en place
- Evènement local, global et input
- Directive structurelle
- Liaison de propriété avec signal et injection
Chapitre 13 : Les pipes
4 leçons 00:36:56
- Introduction aux pipes
- Présentation des pipes uppercase, lowercase, titlecase, number et json
- Présentation des pipes date et currency et LOCAL_ID
- Création d'un pipe personnalisé
Chapitre 14 : Les requêtes HTTP
6 leçons 01:23:55
- Introduction aux requêtes HTTP (AJAX)
- Configuration d'une requête POST
- Requête GET et introduction à la fonction resource()
- Configuration d'une requête PATCH
- Configuration d'une requête DELETE
- La fonction resource() en détails
Chapitre 15 : [Projet cocktails] partie 3 : Mise en place de services, HTTP et ingrédients
5 leçons 01:50:58
- Présentation des fonctionnalités et seed de données
- Création du service Cocktail et refactorisation
- Ajout du système de like
- Intéraction avec le clavier - partie 1
- Intéraction avec le clavier - partie 2
Chapitre 16 : Le routeur
9 leçons 01:59:27
- Présentation du routeur Angular et mise en place
- Mise en place du routeur
- RouterLink, RouterActiveLink, Lazy loading et pathMatch
- Le service Router, wildcard, redirectTo, queryParams et fragment
- Les paramètres de route
- Les routeurs imbriqués
- Les gardes canActivate, canActivateChildren
- Les gardes canDeactivate, resolve, canLoad et canMatch
- Présentation de ActivatedRoute, data et title
Chapitre 17 : Les formulaires
10 leçons 01:53:14
- Introduction aux formulaires
- Création du formulaire réactif
- Overview de l'api de FormGroup et FormControl
- Manipulation sur un FormGroup
- Validateurs synchrones et gestion d'erreurs
- Validateurs personnalisés et asynchrones
- UX et gestion d'erreurs
- Gestion des FormGroup imbriqués
- Fonctionnement de FormArray
- Utilisation du service FormBuilder
Chapitre 18 : [Projet cocktails] partie 4 : Utilisation du routeur et mise en place de formulaire
9 leçons 01:58:47
- Mise en place du routeur
- Création du panier
- Affichage de la liste des ingredients
- Architecture du panel admin
- Mise en place de l'administration des cocktails
- Liste des cocktails
- Affichage du formulaire cocktail
- Création du cocktail
- Édition d'un cocktail
Chapitre 19 : Tester une application
7 leçons 02:06:30
- Introduction aux tests
- Environnement et présentation de Karma
- Syntaxe de base Jasmine et configuration de TestBed
- Présentation de ComponentFixture
- ComponentRef, input et output
- Spy et Services
- Test unitaire
Chapitre 20 : Le rendu côté serveur : SSR et SSG
8 leçons 02:46:23
- Hydratation incrémentale avec defer
- NgOptimizedImage
- Introduction aux modes de rendu
- Mise en place du rendu côté serveur
- Gestion de Title et des metas
- Gestion de la WEB API et AfterNextRender
- Présentation de getPrerenderParams
- Fonctionnement du serveur Node
Chapitre 21 : Mise en production d'une application
4 leçons 00:58:57
- Architecture d'une mise en production
- Ouverture d'un VPS sur OVH et installation de Node.js
- Exemple de configuration NGINX en load balancer avec une application CSR
- Exemple de configuration NGINX en load balancer avec une application SSR
Chapitre 22 : Les animations
6 leçons 00:29:50
- Introduction aux animations
- Présentation des fonctions trigger(), state() et style()
- Les fonctions transition() et animate()
- Keyframes, séquences et groupes
- Les fonction query() et stagger()
- Évènements start et done
Chapitre 23 : Présentation de Material
7 leçons 00:34:06
- Présentation et installation de Material
- Quelques exemples avec : Buttons, Menu, Tooltip
- Autres exemples : Sidenav et Snackbar
- Personnaliser un thème Material
- Méthodologie de la découverte d'un composant Material
- Présentation des Dialogs
- Personnaliser un composant Material
Chapitre 24 : i18n et internationalisation
6 leçons 00:41:48
- Comment fonctionne l'internationalisation
- Mise en place du package @angular/localize
- Préparation du composant, attribut, texte, metadata, $localize
- Préparation du composant : les expressions ICU
- Ajouter des locales pour les pipes
- Déploiement de l'application avec NGINX
Chapitre 25 : Authentification avec JWT
8 leçons 00:00:00
- Introduction au protocole JWT
- Mise en place du projet
- Création du formulaire d'inscription
- API - Mise en place et inscription
- Mise en place du formulaire de connexion
- API - Création du token JWT et connexion
- Récupération de l'utilisateur et page de profil
- Protection d'une route et déconnexion

Également inclus dans cette formation

Material

Material est une librairie Google qui permet la mise en place rapide d'éléments avec une UI et des performances optimales, Ces éléments, appelés composants, permettent de créer des interfaces utilisateur très agréables à regarder et robustes.
Signaux

Les signaux sont une fonctionnalité moderne d'Angular qui permet de rendre les applications plus réactives et performantes. Ils synchronisent automatiquement l'état des données avec l'interface utilisateur, simplifiant ainsi la gestion des états et des interactions complexes.
i18n

L'internationalisation (i18n) d'Angular permet de traduire facilement les applications en plusieurs langues, en gérant le texte, les formats de dates et de devises. Elle garantit une expérience utilisateur adaptée aux différentes régions, avec un support natif optimisé.

Évaluations et avis sur la formation Angular

4.9

2112 avis

Cette formation Angular est incroyablement bien structurée, partant des bases jusqu'aux concepts avancés comme le routage, les signaux ou les tests unitaires. Les explications sont claires, et les projets pratiques, comme l'application de cocktails, permettent de vraiment maîtriser chaque notion. Je recommande vivement !
Ibrahim K.Étudiant(e) vérifié(e)
La formation couvre tout, du CLI à l'internationalisation en passant par SSR. J'ai particulièrement aimé la partie sur les signaux, qui révolutionne la gestion des états. Les projets intégrés nous poussent à mettre en pratique immédiatement, ce qui solidifie l'apprentissage.
Sarah G.Étudiant(e) vérifié(e)
Chaque chapitre est une montée en puissance, avec des explications pédagogiques et des cas pratiques pertinents. La section sur les tests unitaires et la création de services m'a beaucoup aidé à structurer mes projets pros. Une formation complète et engageante !
Jean p.Étudiant(e) vérifié(e)

Ces entreprises offrent cette formation à leurs collaborateurs

Questions fréquemment posées sur la formation Angular

À quoi sert Angular ?

Angular est un framework JavaScript moderne et robuste conçu pour créer des applications web dynamiques et performantes. Grâce à son architecture modulaire et réactive, il est idéal pour développer des interfaces utilisateur complexes et des applications à grande échelle. Il intègre des outils avancés comme Angular Router pour le routage, des formulaires réactifs, et un système de gestion d'état avec les signaux, rendant les applications interactives et réactives.

Angular est parfaitement adapté aux besoins des développeurs souhaitant créer des Progressive Web Apps (PWA), des applications utilisables sur mobile et desktop. En combinant une structure claire avec des fonctionnalités natives comme le support des requêtes HTTP, le rendu côté serveur (SSR), et des animations, Angular offre une solution complète pour construire des projets modernes et évolutifs.

La formation est-elle accessible aux débutants ?

Oui, cette formation est parfaitement accessible aux débutants. Elle commence par une introduction aux bases, comme la création d’une première application, l’utilisation d’Angular CLI, et les fondamentaux des composants. Les concepts avancés, comme les services, les directives et la gestion d'état, sont abordés progressivement, avec des explications claires et des exercices pratiques. Une connaissance de base en JavaScript, HTML et CSS est suffisante pour démarrer.

La formation est-elle en ligne ou en présentiel ?

Cette formation est entièrement en ligne et flexible. Vous pouvez apprendre à votre rythme, où et quand vous le souhaitez. Chaque leçon est accompagnée de vidéos explicatives, de ressources pratiques et de projets concrets pour appliquer vos connaissances immédiatement, rendant l’expérience d’apprentissage interactive et engageante.

Quelles compétences vais-je acquérir grâce à cette formation ?

Création et gestion des composants, des templates et des liaisons de données.
Maîtrise des services pour la communication entre composants et gestion de logique métier.
Utilisation des signaux pour rendre les applications réactives et performantes.
Conception de formulaires réactifs et manipulation des API REST avec Angular.
Développement d'applications Angular complètes avec routage, animations et gestion d'état avancée.

La formation est-elle à jour ?

Oui, cette formation couvre la dernière version d'Angular, incluant les nouveautés comme les signaux et les directives modernes (@if, @switch). Elle est régulièrement mise à jour pour intégrer les fonctionnalités des nouvelles versions, assurant un contenu toujours pertinent.

Y a-t-il des travaux pratiques dans la formation ?

Absolument, la formation propose de nombreux travaux pratiques pour consolider vos compétences. Parmi ces exercices, le projet de gestion de cocktails vous guidera dans le développement d’une application complète, de la mise en place des composants jusqu’à l’intégration de fonctionnalités avancées comme les requêtes HTTP, les animations et la gestion d’état globale. Ces projets reflètent des scénarios réels pour mieux vous préparer au monde professionnel.

Comment cette formation peut-elle aider dans ma carrière ?

Angular est l’un des frameworks front-end les plus demandés sur le marché. Maîtriser Angular grâce à cette formation vous ouvrira de nombreuses opportunités en tant que développeur front-end ou full-stack. En plus, les compétences acquises sont facilement transférables pour travailler avec d'autres outils comme Node.js, vous rendant ainsi plus polyvalent et compétitif.

Le contenu est-il suffisant pour un projet complet ?

Oui, cette formation est conçue pour vous accompagner dans la création d’applications Angular complètes. Vous apprendrez à structurer vos projets, intégrer des services pour la logique métier, utiliser le routage pour la navigation, et mettre en place des formulaires réactifs. Avec des projets pratiques, comme le développement d’une application de gestion de cocktails ou la mise en place d’un panneau d’administration, vous serez capable de gérer des projets réels de manière autonome et efficace.