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

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