Chargement en cours
Shop 
Panier 
Commande 
Apprenez à votre rythme
La formation s'adapte à vos préférences. L'approche est double. D'abord séquentielle, elle vous permettra de partir de zéro pour devenir héros. Cette formation est aussi une véritable base de connaissances Angular, à laquelle vous pourrez vous référer à tout instant.
Formation complète
Base de connaissances Angular
heures de vidéos
vidéos
sections et concepts
Partez de zéro
Aucun besoin de connaître les versions précédentes d’Angular. Si vous souhaitez apprendre Angular (version 2 à 11), cette formation est ce qu'il vous faut. Vous apprendrez ce framework génial depuis le début.
1. Démarrer
- l'architecture d'Angular
- comprendre Angular
- Angular CLI pour développer plus vite et sans erreur
- Le Duo Typescript / Angular et pourquoi c'est le meilleure solution
2. Développer
- les Directives et Composants
- le fonctionnement du DataBinding
- Le Routage et la gestion de la navigation
- Les Pipes pour personnaliser l'affichage de données
3. Finaliser
- s'ouvrir au Web via des serveurs RESTful
- l'injection de dépendances, comment l'effectuer
- Utiliser et Optimiser les modules
- Comment optimiser votre application
- Déployer votre application
Angular est le framework frontEnd le plus moderne, le plus performant et le plus puissant. Et vous pourriez l’apprendre dès aujourd’hui.
Il vous permet de créer de superbes applications web qui offrent une expérience utilisateur impressionnante ! Apprenez tous les principes fondamentaux que vous devez connaître et commencez à développer des applications Angular dès maintenant.
Ils ont suivi la formation…
J’ai beaucoup apprécié votre cours et je sais que j’ai énormément appris grâce à vous !
Alexandre V.
Merci beaucoup pour ce cours très intéressant !
Sabine T.
Cours d'une excellente clarté et d'une qualité remarquable; une véritable encyclopédie Angular !
Henri M.
Les vidéos sont très claires et la répartition entre les vidéos "cours" et le projet est très bien faite.
Gabriel S.
Satisfait ou Remboursé
Vous hésitez encore ?
Si la formation ne vous convient pas, la formation vous sera intégralement remboursée sur simple demande dans les 15 jours suivants votre commande.
-
Mise en route
Cette section introduit Angular, son fonctionnement, les différentes installations à effectuer. Nous allons également démarrer le cours en tant que tel en détaillant comment tirer le meilleur de ce cours.
-
Les Bases
Comme son nom l'indique, cette section présente les bases d'Angular. À la fin de cette partie, vous serez en mesure de comprendre comment une application Angular fonctionne.
- Main.ts – comment Angular se charge et démarre
- Fonctionnement des composants
- Créer un composant
- Comprendre le rôle d’AppModule
- Ajouter un composant sans CLI
- Ajouter un composant avec CLI
- Comprendre les templates de Composants
- Personnaliser le style d’un composant
- Comprendre le “selector” d’un composant
- [Exercice] Composants
- [Correction] Composants
- Qu’est-ce que le DataBinding ?
- String Interpolation
- Property Binding
- Différences String Interpolation / Property Binding
- Event Binding
- En savoir plus sur les Event
- Passer des données via Event Binding
- 2-Way-Databinding
- [Exercice] DataBinding
- [Correction] Databinding
- Introduction Directives
- ngIf et affichage conditionnel de données
- ngIf else
- Modifier le style d’un élément avec ngStyle
- Appliquer une classe CSS de manière dynamique
- Parcourir des éléments grâce à ngFor
- [Exercice] Directives
- [Correction] Directives
-
[Projet] Les bases
Cette section permet d'appliquer les notions acquises dans le chapitre précédent pour débuter notre projet.
-
Débugger une application Angular
Cette section présente quelques méthodes utilisable pour débugger une application Angular
-
Composants et DataBinding
Cette section aborde en profondeur les composants et le DataBinding.
- Introduction et structuration
- Property & Event Binding
- Property Binding personnalisé
- Alias de Property Binding
- Event Emitter
- Alias @Output
- Précision Input / Output
- View Encapsulation
- Références Locales
- ViewChild
- NgContent
- LifeCycle Hook
- Utilisation de LifeCycle Hooks
- LifeCycle Hook ViewChild
- LifeCycle Hook ContentChild
- [Exercice] DataBinding et Composants
- [Correction] DataBinding et Composants
-
[Projet] Composants et Databinding
Dans cette section, vous allez mettre en oeuvre ce qui a été vu dans la section précédente.
-
Directives
Dans cette section, nous allons découvrir les directives de A à Z
-
[Projet] Directives
Dans cette section, nous allons mettre en oeuvre les directives dans notre projet.
-
Services et Injection de dépendances
Dans cette section, nous allons voir en détail ce qu'est un service et une injection de dépendance.
- Introduction
- Quand un service est-il utile ?
- Créer un service
- Injection de service
- Hiérarchie d’une injection de service
- Instances de service
- Utiliser un service dans un service
- Faire communiquer des composants grâce aux services
- providedIn
- [Exercice] Services pour une liste d’utilisateurs
- [Correction] Services pour une liste d’utilisateurs
-
[Projet] Services et Injection de dépendances
Dans cette partie, nous allons mettre en place les différents services utiles au projet
-
Routing
Dans cette section, vous allez apprendre à mettre en place une navigation complexe et sécurisée
- Introduction
- Présentation de l’exercice
- Mettre en place un routing
- RouterLink
- Navigation Path
- RouterLinkActive
- Navigation absolue
- Navigation relative
- Passer des paramètres
- Récupérer des paramètres de manière dynamique
- queryParams Fragment
- [Exercice] Rapatriement dynamique de données
- [Correction] Rapatriement dynamique de données
- Child Routes
- Passer des données
- Route wildcard
- Précision sur les redirections
- Externalisation des routes
- CanActivate Guard
- CanActivateChild Guard
- Mise en place d’un service (factice) d’authentification
- CanDeActivate
- Routes Data
- Resolve Guard
- useHash
-
[Projet] Routing
Dans cette section, nous allons appliquer ce qui a été vu lors du chapitre précédent à notre projet
- Introduction du Routing
- Mise en place des routes
- Création des liens RouterLink
- RouterLinkActive
- Correction rafraichissement de page
- Introduction child routes
- Child Routes
- Configuration des paramètres de route
- RouterLink / RouterLinkActive
- Recipe Edit Route
- Détection du mode Modification / Création
- Mise en place de la navigation
- Nettoyage du code
-
Comprendre les Observables
Dans cette section, nous allons aborder mieux en profondeur ce qu'est un Observable, comment en construire un et comment l'exploiter au mieux
-
[Projet] Observables
Dans cette section, nous appliquons une partie de ce qui a été vu dans la partie précédente.
-
Gestion des formulaires
Dans cette partie, nous abordons les 2 approches que propose Angular pour gérer les formulaires.
- Introduction
- Deux approches : Template Driven | Réactive
- Présentation de l’exercice
- Enregistrer les contrôles
- [Template Driven] Soumettre un formulaire
- [Template Driven] Parcourir les différents états
- [Template Driven] Utiliser @ViewChild
- [Template Driven] Les Validators
- [Template Driven] Les différents états
- [Template Driven] Message d’erreur
- [Template Driven] Property Binding NgModel
- [Template Driven] Two-Way Binding NgModel
- [Template Driven] Grouper des FormControls
- [Template Driven] Précisions sur les boutons radio
- [Template Driven] setValue / patchValue
- [Template Driven] Récupérer les valeurs d’un formulaire
- [Template Driven] Réinitialiser un formulaire
- [Template Driven] Exercice
- [Template Driven] Correction
- [Reactive] Mise en place
- [Reactive] Initialisation FormGroup / FormControl
- [Reactive] Synchroniser TS et Template
- [Reactive] Soumettre un formulaire
- [Reactive] Validators
- [Reactive] Accéder aux FormControls
- [Reactive] Grouper les FormControls
- [Reactive] Remplir un FormArray dynamiquement
- [Reactive] Validators personnalisés
- [Reactive] Codes d’erreur
- [Reactive] Validateurs asynchrones
- [Reactive] Observer un changement de valeur / de statut
- [Reactive] setValue, patchValue, Reset
- [Reactive] Exercice
- [Reactive] Correction
-
[Projet] Formulaires
Dans cette partie, nous mettons en oeuvre ce qui a été vu dans la partie précédente concernant les formulaires
- Introduction
- Modifier la liste d’achat grâce à une approche Template Driven
- Mettre en place des validateurs
- Charger un ingrédient
- Modifier un ingrédient
- Réinitialiser le formulaire après ajout/modification
- Réinitialiser le formulaire manuellement
- Supprimer un ingrédient
- Créer le template de formulaire
- Initialiser le formulaire réactif
- Synchroniser le template et le fichier TS
- FormArray Ingredients
- Ajouter un ingrédient
- Validators Recipe Edit
- Ajouter / Modifier une recette
- Annuler / supprimer une recette
- Charger dynamiquement une image
- Correction Provider
- Supprimer un ingrédient (ou tous)
- Améliorer RecipeList
-
Utiliser les Pipes pour modifier l'affichage
Dans cette partie, nous abordons les Pipes, comment les configurer et comment créer ses propres Pipes personnalisés
-
Requêtes HTTP
Dans cette partie, nous abordons l'interaction avec un back-end via des requêtes HTTP
- Requêtes HTTP – Introduction
- ADN d’une requête HTTP
- Mettre en place un backend avec Firebase
- HTTP Post
- HTTP Get
- Les opérateurs Observables
- Précision et amélioration sur le typage
- Afficher les publications
- Indiquer le chargement en cours
- Sous-traiter HTTP dans un service
- HTTP Delete
- Gérer les erreurs
- Gérer les erreurs (alternative Subject)
- Intercepter et manipuler les erreurs (catchError)
- Améliorer l’interaction avec un message d’erreur (dismiss)
- Http Headers
- QueryParams
- Observer les types de réponse
- responseType
- Interceptor
- Manipuler les requêtes
- Intercepter une réponse
- Mettre en place plusieurs Intercepteurs
-
[Projet] Requêtes HTTP
Dans cette partie, nous appliquons les concepts abordés à notre projet
-
[Projet] Identification et chemins protégés
Dans cette partie, nous allons apprendre à mettre en place un système d'authentification, appliqué au projet
- Introduction et fonctionnement de l’authentification
- Créer une page d’authentification
- Basculer du mode création de compte au mode connexion
- Soumettre le formulaire
- Préparer le backend (Firebase) d’authentification
- Mettre en place la requête HTTP d’inscription
- Inscrire un utilisateur
- Gérer les erreurs d’inscription
- Implémenter un indicateur de chargement
- Se connecter
- Gérer les erreurs de connexion
- Créer et stocker les données utilisateur
- Considérer l’état de connexion
- Passer le Token d’identification au Backend
- Interceptor pour charger et sauvegarder les données
- Se déconnecter
- Connexion automatique
- Déconnexion automatique
- CanActivate Guard
-
Composants dynamiques
Dans cette section, nous allons apprendre à mettre en place un composant de manière dynamique et intégralement programmatique
-
Modules et optimisation d'applications Angular
Dans cette partie, nous allons aborder comment optimiser une application Angular; en comprenant comment les modules fonctionnent et comment les services doivent être déclarés pour une optimisation maximale.
- Définition des Modules
- Parcours et analyse d’AppModule
- Diviser une application en plusieurs modules
- Créer le module “RecipeModule”
- Mettre en place un routing spécifique à une fonctionnalité
- Adapter la déclaration des composants
- Créer le module “ShoppingListModule”
- Shared Module
- Créer et comprendre un module partagé
- Core Module
- Créer et comprendre un Core Module
- Créer le module “AuthModule”
- Expliquer le “Lazy Loading”
- Mettre en place le “Lazy Loading” pour Recipes
- Mettre en place le “Lazy Loading” pour Auth et ShoppingList
- PreloadingStrategy
- Comment les Services intéragissent avec les différents modules ?
- Tester les différents moyens de charger un service
-
Déploiement d'application
Dans cette partie, nous allons préparer notre application au déploiement en la compilant après avoir effectuer les dernières optimisation; puis nous allons la déployer sur une serveur Firebase.
