Formation Angular

Mise à jour : 2024
150 heures
Projets
Quiz

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

4.8

1596 avis

19 641

inscrits

Les notions abordées dans la formation

Commencez par maîtriser les composants, les templates et les liaisons de données en Angular.
Apprenez la communication entre composants avec les propriétés Input/Output et les services.
Découvrez la programmation réactive avec les Observables et la librairie RxJS.
Apprenez à réaliser des formulaires complexes et à gérer des requêtes AJAX en Angular.
Maîtrisez la librairie de composants Material créés par Google pour des interfaces élégantes.
Gérez les mises en page complexes avec flex-layout.
Apprenez à architecturer et à gérer l'état d'une application complexe avec NGRX.
Réussissez à envoyer des notifications et à créer des Progressive Web Applications (PWA).

Qu'est-ce qu'Angular ?

Angular est un framework JavaScript open-source développé par Google. Il est utilisé pour créer des applications web dynamiques et interactives. Angular est basé sur le langage TypeScript, qui est une surcouche de JavaScript. Il offre une structure modulaire et des fonctionnalités avancées pour le développement d'applications web modernes.

Côté performance, le framework est excellent continue de s'améliorer continuellement avec l'introduction d'Ivy. Angular vous permettra de réaliser, à partir de la même base de code, des sites web utilisables sur mobiles et tablettes, appelées PWA.

Angular, est un framework dit “opinionated” ou orienté, c’est-à-dire que Google pense qu’il y a une bonne manière de développer une application Web et organise toute le framework de cette manière, Toutes les problématiques du Web sont gérées par le framework lui-même et il n’y a pas besoin de librairies pour les fonctionnalités communes des applications Web (requêtes HTTP, routing, formulaires, applications progressives pour mobile (PWA), Web workers, rendu serveur (SSR), la liste est longue).

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

Nous utiliserons toutes les bases d'Angular pour notre premier projet pour créer un livre de recettes pour cocktails.

Plan de la formation

Afficher tout

Chapitre 1 : Introduction
7 leçons 02:04:28
- Installation d'Angular CLI et création de notre première application
- A l'abordage !
- Qu'est ce qu'une single page application ?
- Introduction à Angular
- Comprendre la structure
- Installation de Vscode et Node.js
- TypeScript
Chapitre 2 : Les composants, les templates et le data binding
20 leçons 04:33:44
- Comprendre les composants
- Angular CLI
- Encapsulation des vues et des styles
- Démarrage d'une application Angular
- Comprendre AppModule
- La directive NgClass
- Aperçu du data binding
- Créer un nouveau composant
- Les templates et les styles
- Premier bilan
- String interpolation
- La liaison d'événements
- Les directives
- La liaison de propriétés
- La directive NgIf
- La directive NgFor
- Double data binding
- La directive NgStyle
- La directive NgSwitch
- Optimiser les images avec NgOptimizedImage
Chapitre 3 : Début de notre première application !
6 leçons 01:50:29
- La liste de cocktails
- Détails d'un cocktail
- Planification
- Mise en place du projet
- Mise en place de l'interface pour nos cocktails
- Header
Chapitre 4 : Approfondissement des composants
9 leçons 03:04:34
- Les décorateurs @ViewChild et @ViewChildren
- Communication entre les composants
- Cycle de vie des composants
- Propriété output
- L'encapsulation
- Directive ng-content
- ContentChild
- Propriété input
- Référence locale
Chapitre 5 : Projet : utilisation des propriétés input/output
4 leçons 01:07:42
- Objectifs
- Utilisation d'une propriété input
- Utilisation d'une propriété output
- Utilisation d'un container
Chapitre 6 : Approfondissement des directives
6 leçons 01:47:22
- Objectifs
- Hostbinding
- Directive d'attribut
- Directive structurelle
- Hostlistener
- Liaison de propriétés et directive
Chapitre 7 : Les services et l'injection de dépendances
4 leçons 01:19:51
- L'injection de dépendances
- Providers et hiérarchie des injecteurs
- Utilisation d'un service dans un autre service
- Objectifs
Chapitre 8 : Les Observables
5 leçons 01:58:01
- Introduction aux Observables
- Création d'un Observable
- Les opérateurs et les pipes RxJS
- Utilisation des Subjects
- Introduction aux Subjects
Chapitre 9 : Projet : utilisation directive et service
4 leçons 01:23:34
- Utilisation du service
- Ajout d'une directive
- Création du modèle Ingredient et d'un service
- Objectif du chapitre
Chapitre 10 : Le routing
13 leçons 03:54:04
- La directive RouterLink
- Séparation des routes
- Le service Router
- Les paramètres optionnels et les fragments
- La directive RouterLinkActive
- Introduction et mise en place
- Le service ActivatedRoute et les params
- Les bases du Router Angular
- Redirection et wildcard
- Les routes imbriquées et préservation des paramètres optionnels
- Le garde canActivate
- Le garde canDeactivate
- Le garde resolver
Chapitre 11 : Projet : routing
7 leçons 02:06:07
- Créer des sous routes
- Développement du panier
- Création des routes
- Editer nos cocktails
- Création des composants pour le panier
- Affichage des ingrédients
- Objectifs
Chapitre 12 : Les formulaires
12 leçons 03:15:28
- FormGroup et EventEmitter
- L'API de FormControl et FormGroup
- Value et Reset
- Introduction aux ReactiveForm
- FormArray
- FormBuilder
- Les validateurs
- Les classes et états des abstractControls
- Les messages d'erreurs
- Création d'un formulaire réactif
- Les formGroups imbriqués
- Cases à cocher, boutons radio et listes déroulantes
Chapitre 13 : Projet : formulaires
4 leçons 01:12:52
- Création d'un formulaire
- L'édition des cocktails
- Création des ingrédients
- Objectifs
Chapitre 14 : Les pipes
5 leçons 01:07:44
- Pipes purs et impurs
- Créer un pipe personnalisé
- Le pipe asynchrone
- Introduction aux pipes
- Utiliser les pipes
Chapitre 15 : Faire des requêtes HTTP
6 leçons 01:40:29
- Faire des requêtes HTTP Get et Post
- Utilisation de RestAPI
- Headers et gestion d'erreur
- Faire des requêtes HTTP Put et Delete
- Introduction aux requêtes HTTP
- Usages avancés
Chapitre 16 : Projet : pipes et HTTP
7 leçons 01:44:49
- Objectifs
- Le filtre de recherche
- Récupération des cocktails
- Utilisation de RestAPI
- Utilisation du pipe async
- Récupération des cocktails avec GET
- Sauvegarde et édition d'un cocktail
Chapitre 17 : Approfondissement des modules
7 leçons 02:01:54
- Environnement de production
- Lazy loading
- Shared module
- Le module racine et les modules Angular
- Module de routing
- Les modules de fonctionnalité
- Les standalone components
Chapitre 18 : Les animations
6 leçons 01:15:28
- Les fonctions transition et animate
- Objectifs
- Les fonctions trigger, state et style
- Les keyframes et les groups
- Query et stagger
- Start et done
Chapitre 19 : Tester son application
7 leçons 01:43:42
- Introduction test
- Détection des changements et matchers
- Tester ses composants
- Les tests isolés et test d'un pipe
- Setup
- Tester des composants avec des dépendances
- Environnement pour tester les composants
Chapitre 20 : Flex-layout
5 leçons 01:19:23
- Introduction
- Static API
- Features avancées
- FlexBox
- Responsive API
Chapitre 21 : ES6
10 leçons 04:00:24
- Let et Const
- Introduction
- Les promesses
- Les modules
- Les classes
- L’affectation par décomposition
- Map et Set
- Les fonctions fléchées
- Les littéraux de gabarits
- Les opérateurs Rest et Spread
Chapitre 22 : Déploiement avec la MEAN stack
6 leçons 01:42:01
- Installation d'Angular
- Installation de mongoDB et mongoose
- Utilisation de node et d'express
- Présentation de la MEAN stack
- Mise en production de l'application
- Utilisation d'AWS
Chapitre 23 : Material - partie 1
7 leçons 02:18:51
- Bouton, menu et sidenav
- FormsField
- Autocomplete
- Input, Checkbox, Radio et SlideToggle
- Toolbar, list et grid
- Select, Slider et DatePicker
- Présentation et installation de Material
Chapitre 24 : Material - partie 2
8 leçons 02:16:11
- Card, stepper, tabs
- Les tableaux
- Dialog, tooltip et Snackbar
- La pagination
- Icon, progressSpinner et Bar
- Expension panel, bouton toggle et chips
- Trier et filtrer un tableau
- Créer un thème material
Chapitre 25 : Authentification avec JWT
12 leçons 04:12:41
- Création des principaux composants
- Création du token JWT
- Garde d'authentification
- Mise en place du formulaire d'authentification
- Création du premier garde
- Mise en place du header
- Création de l'utilisateur
- Préparation de l'application
- Implémentation de la connexion
- Objectifs
- Modification de la topbar et déconnexion
- Implémentation de l'inscription
Chapitre 26 : Les opérateurs de RxJs
6 leçons 01:39:26
- Les opérateurs de filtre
- Création d'une fonctions de génération de flux
- Les opérateurs de combinaison
- Les opérateurs de création
- Les opérateurs pipeables, de transformation et utilitaires
- Introduction à RxJs
Chapitre 27 : NgRx partie 1
7 leçons 02:23:56
- Redux et ngrx
- Les sélecteurs
- L'état d'une application
- Présentation de l'application To-do list
- Store et reducer
- Les actions
- L'outil de développement store-devtool
Chapitre 28 : NgRx partie 2
6 leçons 02:47:22
- Le router-store
- MetaReducers
- forFeature
- Utilisation d'un premier effet
- Mise en place du reste des effets
- Les Effets
Chapitre 29 : Ngrx - projet
14 leçons 04:15:39
- Refactorisation du projet JWT
- Introduction au projet Photos
- Mise en place des effets et des sélecteurs
- Store et premier reducer
- Implémentation de l'API Unsplash
- Implémentation des effets
- Implémentation du reducer
- Sélecteurs et connexion au Store
- Connexion au Store
- Mise en place des actions et du reducer
- Mise en place de la nouvelle fonctionnalité
- Actions pour l'authentification
- Affichage des photos
- Gestion du chargement
Chapitre 30 : Ngrx et les tests
4 leçons 01:08:48
- Tester les reducers Ngrx
- Tester les actions Ngrx
- Tester les selectors Ngrx
- Tester les effects Ngrx
Chapitre 31 : Réaliser une Todolist avec Drag and Drop
6 leçons 01:50:07
- Introduction
- Création du projet
- Mise en place du switch entre listes
- Mise en place du Drag and Drop
- Mise en place des listes et des éléments
- Déplacer des éléments entre les listes
Chapitre 32 : Service worker et Pwa
6 leçons 01:21:17
- Application
- Pwa
- Gestion des updates
- dataGroups
- Demo
- Service worker
Chapitre 33 : Push notifications
5 leçons 01:12:04
- Envoyer une notification
- Sauvegarder les souscriptions
- Push notifications
- Introduction
- VAPID keys et popup utilisateur
Chapitre 34 : Le server side rendering (SSR) avec Universal
5 leçons 01:16:51
- Utilisation de Schematics pour Universal
- Introduction au server side rendering
- Configurer le prerender
- API TransferState et inaccessibilité des objets du navigateur
- Utilisation du prerender
Chapitre 35 : Créer sa librairie Angular
4 leçons 00:39:46
- Création de la librairie
- Introduction aux librairies
- Mise en place des fonctionnalités
- Publication sur NPM
Chapitre 36 : Formulaires avancés : les champs personnalisés
6 leçons 01:44:09
- Introduction aux champs personnalisés
- Champ de mot de passe bancaire personnalisé
- Champ personnalisé avec une carte
- Implémentation de la carte
- Implémentation du ControlValueAccessor pour le champ
- Implémentation du ControlValueAccessor
Chapitre 37 : Gestion des chargements
4 leçons 00:54:00
- Introduction à la gestion des chargements
- Utilisation d'un interceptor
- Composant de chargement
- Utilisation d'un service
Chapitre 38 : Upload de fichiers
6 leçons 01:24:41
- Upload de plusieurs fichiers
- Mise en place du template HTML
- Mise en place d'un service pour gérer les fichiers
- Introduction à l'upload de fichiers
- Drag and Drop des fichiers
- Gestion de la progression des uploads
Chapitre 39 : Gestion des erreurs avec Sentry
4 leçons 00:30:36
- Installation de Sentry
- Utilisation de la classe Angular ErrorHandler
- Configuration de Sentry
- Introduction à la gestion d'erreur
Chapitre 40 : Services Meta et title
4 leçons 00:49:03
- Utilisation du service Meta
- Utilisation du service Title
- Les balises métas et titres
- Utiliser les services Meta et Title de manière scalable
Chapitre 41 : i18n et internationalisation
7 leçons 01:35:12
- La traduction de templates
- Mise en place
- La traduction des attributs, des pluriels et des listes d'options
- Changer la version de l'application
- Configuration de @angular/localize
- Fonctionnement détaillé
- Introduction et mise en place du projet

É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.
NGRX

Les applications front-end sont de en plus dynamiques et complexes. Avec NGRX, vous allez apprendre à dompter cette complexité en apprenant la notion de gestion d'état. NGRX n'aura plus aucun secret pour vous.
RxJS

Les applications front-end modernes sont réactives et ont besoin de beaucoup de données. RxJS est une librairie qui va vous permettre de contrôler finement leurs flux. Utilisée dans de plus en plus de frameworks, la librairie est complètement intégrée à Angular et vous comprendrez vite pourquoi !

Évaluations et avis sur la formation Angular

4.8

1596 avis

J'ai été impressionné par la qualité de cette formation Angular. Les explications sont claires et détaillées, rendant l'apprentissage agréable et efficace, même pour un débutant. Les projets, comme celui de l'application de cocktails, m'ont vraiment permis de consolider mes connaissances en situation réelle. Je recommande vivement cette formation à tous ceux qui veulent maîtriser Angular.
Julien D.Étudiant(e) vérifié(e)
Cette formation Angular m'a vraiment permis de comprendre en profondeur le framework. Le formateur a su rendre accessibles des concepts complexes, comme la gestion d'état avec NgRx et l'utilisation des Observables. Grâce à cette formation, je me sens beaucoup plus confiant pour développer des applications Angular robustes.
Claire F.Étudiant(e) vérifié(e)
Une formation Angular très complète et bien structurée. Les sections sur les formulaires réactifs et les directives m'ont particulièrement aidé à améliorer mes compétences. Les exercices pratiques sont bien conçus et permettent de mettre en pratique immédiatement ce que l'on apprend. Idéale pour ceux qui cherchent à approfondir leur maîtrise d'Angular.
Nicolas L.É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 robuste, conçu pour le développement d'applications web dynamiques et structurées. Il permet de créer des interfaces utilisateur complexes et performantes en utilisant une architecture modulaire et réactive. Angular est idéal pour développer des applications à grande échelle, notamment grâce à ses outils intégrés pour la gestion des composants, des services, et des directives. Utilisé par de nombreuses grandes entreprises, Angular est le choix privilégié pour la création d'applications web modernes et scalables.

La formation est-elle accessible aux débutants ?

Oui, la formation est parfaitement adaptée aux débutants. Elle commence par une introduction aux bases d'Angular, y compris la mise en place de l'environnement de développement avec Angular CLI, et progresse vers des concepts plus avancés comme la communication entre composants, les services et les Observables. Seules des connaissances de base en JavaScript, HTML et CSS sont nécessaires pour suivre cette formation.

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

La formation Angular est entièrement en ligne et peut être suivie à votre propre rythme. Vous avez la flexibilité d'apprendre où et quand vous le souhaitez, ce qui vous permet de concilier facilement vos études avec vos autres engagements. Chaque leçon est accompagnée de ressources pratiques et de projets concrets pour vous permettre d'appliquer immédiatement ce que vous apprenez.

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

Maîtrise des composants, templates, et liaisons de données en Angular.
Création et gestion de services pour la communication entre composants.
Programmation réactive avec les Observables et la librairie RxJS.
Réalisation de formulaires réactifs et gestion des requêtes HTTP avec Angular.
Développement d'applications Angular complètes jusqu'à leur mise en production sécurisée.

La formation est-elle à jour de la dernière version d'Angular ?

Non, la formation est à la version 16 d'Angular et une nouvelle formation sortira pour la version 19 d'Angular dès décembre 2024.

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

Oui, la formation inclut de nombreux travaux pratiques pour consolider vos compétences. Vous travaillerez sur plusieurs projets, dont le projet de gestion de cocktails, où vous développerez une application complète avec Angular. Vous apprendrez également à manipuler des API REST, à gérer les services et les directives, et à rendre votre application réactive et responsive, ce qui vous prépare à des scénarios réels en développement web.

Comment cette formation m'aidera-t-elle dans ma carrière ?

Maîtriser Angular vous ouvrira de nombreuses opportunités professionnelles en tant que développeur front-end ou full-stack. Angular est l'un des frameworks les plus demandés dans le développement web aujourd'hui. Cette formation vous permettra également d'acquérir des connaissances essentielles qui vous prépareront à travailler avec d'autres outils connexes, comme Node.js pour le développement backend.

Le contenu de la formation est-il suffisant pour un projet complet ?

Absolument, la formation Angular est conçue pour vous guider étape par étape dans la création d'applications web dynamiques et performantes en utilisant Angular. Vous apprendrez à construire des interfaces utilisateur complexes avec Angular, en utilisant des outils modernes comme Angular Router pour la navigation, et des services pour gérer la logique d'affaires. Les cours incluent des projets pratiques où vous développerez des applications Angular complètes, en intégrant des pratiques de développement avancées comme l'utilisation de NgRx pour la gestion d'état globale. Grâce à cette formation, vous serez équipé pour le développement d'applications modernes, en suivant les meilleures pratiques.