Où trouver un cours gratuit sur Angular - Introduction à Angular et concepts avancés ?

Image de cours gratuite Apprendre Angular - Introduction à Angular et concepts avancés

Cours en ligne gratuit Apprendre Angular - Introduction à Angular et concepts avancés

Durée du cours en ligne : 8 heure et 43 minutes

Nouveau

Cours gratuit pour apprendre Angular de A à Z : composants, services, RxJS, routing, modules, formulaires réactifs et bonnes pratiques.

Dans ce cours gratuit, découvrez

Fondations du front-end et introduction à Angular
Démarrage avec Angular CLI et structure de projet
Composants Angular et templates
TypeScript avancé et bonnes pratiques de composants
Architecture de composants et communication parent-enfant
Services, injection de dépendances et programmation réactive
Routage, paramètres d’URL et sécurisation de la navigation
Modules Angular et organisation de l’application
Formulaires réactifs : création, liaison et navigation
Données simulées et opérations CRUD HTTP
Formulaires dynamiques et gestion des erreurs
Validation avancée, RxJS et finalisation du projet

Descriptif du cours

Découvrez un cours en ligne gratuit pour apprendre Angular, de l’initiation aux notions avancées, avec une progression claire et orientée pratique. Pensé pour la programmation web, il vous accompagne pas à pas pour comprendre l’écosystème Angular et adopter de bonnes bases avant d’aborder des fonctionnalités plus structurantes.

Vous apprendrez à mettre en place votre environnement de développement et à démarrer proprement un projet avec Angular CLI, puis à maîtriser les fondations indispensables côté web. L’approche vous aide à relier les concepts à leur usage concret dans une application, afin de gagner en autonomie et en confiance au fil des étapes.

Le parcours met l’accent sur la construction d’interfaces avec les composants, les templates, les directives, le data binding, les pipes et les cycles de vie. Vous consoliderez aussi vos compétences TypeScript, la communication entre composants, ainsi que l’organisation d’un projet pour le rendre maintenable.

Vous irez plus loin avec les services et l’injection de dépendances, RxJS et les Observables, les appels réseau via HttpClient, le routage et la protection de la navigation avec les guards. Le cours aborde également la modularisation, l’isolation des routes et des pratiques utiles pour structurer une application à mesure qu’elle grandit.

Enfin, vous explorerez les formulaires réactifs, la validation, la gestion de scénarios courants et le traitement des erreurs, avec des exemples permettant de mieux comprendre les mécanismes internes et d’améliorer la qualité du code. Une ressource complète pour démarrer Angular sur des bases solides et progresser vers des usages plus avancés.

Contenu du cours

Leçon vidéo : Tutoriel Angular #0 - Qu'est-ce que Angular? (2021) 06m
Exercice: Quel ensemble de technologies forme le « front-end » d’un site web ?
Leçon vidéo : Tutoriel Angular #1 - Introduction 04m
Exercice: À quoi sert principalement Angular ?
Leçon vidéo : Tutoriel Angular #2 - 03 étapes pour préparer son environement de développement 10m
Exercice: Quelle commande permet de vérifier la version de NPM sur Windows ?
Exercice: Lors d’un téléchargement via NPM, dans quel dossier sont placés les modules installés dans un projet ?
Exercice: Quelle commande installe l’outil Angular CLI globalement sur l’ordinateur ?
Leçon vidéo : Tutoriel Angular #3 - Ce qu'il faut savoir de l'HTML 16m
Exercice: Quel est le rôle principal du HTML dans une page web ?
Leçon vidéo : Tutoriel Angular #4 - Concepts de base du CSS et exemples pratiques 13m
Exercice: Quel est le rôle principal du CSS dans une page web ?
Leçon vidéo : Tutoriel Angular #5 - Angular et les concepts Javascript 02m
Exercice: Quel est l’autre nom de JavaScript mentionné dans le cours ?
Leçon vidéo : Tutoriel Angular #6 - Angular et les concepts Typescript 03m
Exercice: Quelle différence distingue principalement un fichier TypeScript d’un fichier JavaScript ?

Leçon vidéo : Tutoriel Angular #7 - Créer et démarrer une application avec Angular CLI 06m
Leçon vidéo : Tutoriel Angular #8 - Comprendre la structure d'un projet Angular CLI 12m
Exercice: Dans un projet Angular, quel dossier contient généralement le code source (composants et modules) de l’application ?

Leçon vidéo : Tutoriel Angular #9 - Comprendre les composants 09m
Exercice: Quels sont les 3 éléments principaux qui constituent une composante Angular ?
Leçon vidéo : Tutoriel Angular #10 - Enregistrer une composante (Bootstrapping) et comprendre les erreurs 12m
Exercice: Dans une application Angular, quel fichier est chargé en premier par convention dans le navigateur ?
Exercice: Quel champ de NgModule sert à enregistrer les composants utilisés par l’application ?
Exercice: Quelle commande permet de démarrer l’application Angular et lancer le serveur de développement ?
Leçon vidéo : Tutoriel Angular #11 - Les templates (interpolation et integration de librairie) 13m
Exercice: Dans une composante Angular, quel élément permet d’afficher la valeur d’une propriété TypeScript directement dans le HTML ?
Exercice: Quelle étape est nécessaire pour que la nouvelle composante HotelList soit reconnue par l’application lors du démarrage ?
Exercice: Quelle instruction permet d’importer le CSS de Bootstrap dans le fichier styles.css ?
Leçon vidéo : Tutoriel Angular #12 - Les templates et Directives structurelles ngFor 12m
Exercice: Quel procédé Angular permet d’afficher la valeur d’une variable du composant dans le template avec des doubles accolades ?
Leçon vidéo : Tutoriel Angular #13 - Le Property et Event Binding (One-Way Binding) 14m
Exercice: Quelle syntaxe Angular utilise-t-on pour écouter un événement de clic sur un bouton ?
Leçon vidéo : Tutoriel Angular #14 - Le Two-Way Data Binding avec le ngModel 07m
Exercice: Quel module faut-il importer pour pouvoir utiliser la directive ngModel dans une application Angular ?
Leçon vidéo : Tutoriel Angular #15 - Les Pipes 09m
Exercice: Quel symbole est utilisé dans un template Angular pour appliquer un pipe à une valeur avant affichage ?
Exercice: Quel pipe intégré est particulièrement utile pour afficher un objet au format JSON dans un template ?
Exercice: Pour passer des paramètres à un pipe (ex. currency), quel séparateur utilise-t-on après le nom du pipe ?

Leçon vidéo : Tutoriel Angular #16 - Les Interfaces partie 1 06m
Leçon vidéo : Tutoriel Angular #17 - Interfaces et cycles de vie (ngOnit, ngOnChanges...) Partie 2 05m
Exercice: Quel hook du cycle de vie permet d'initialiser un composant et de charger des données initiales (ex. depuis un serveur) ?
Leçon vidéo : Tutoriel Angular #18 - Encapsuler les feuilles de styles CSS dans les composants 04m
Exercice: Quelle solution Angular permet d’isoler facilement des styles CSS propres à un composant ?
Leçon vidéo : Tutoriel Angular #19 - Get, Set avec Typescript et création d'un filtre de liste 11m
Exercice: Dans une classe TypeScript, quelle est la différence principale entre un getter et un setter ?
Exercice: Lorsqu’on appelle un getter en TypeScript (par exemple hotelFilter), comment l’utilise-t-on ?
Exercice: Pourquoi garder une liste complète et une liste filtrée (2 tableaux) lors d’une recherche ?
Leçon vidéo : Tutoriel Angular #20 - Créer un Pipe personnalisé 10m
Exercice: Quelle interface doit implémenter une classe pour créer un pipe personnalisé dans Angular ?

Leçon vidéo : Tutoriel Angular #21 - Construire et utiliser des composants enfants 09m
Leçon vidéo : Tutoriel Angular #22 - Communication du composant parent et enfant avec @Input() 05m
Exercice: Quel mécanisme permet de transmettre une valeur du composant parent vers un composant enfant dans Angular ?
Leçon vidéo : Tutoriel Angular #23 - Communication du composant enfant au parent avec @Output() 09m
Exercice: Quel décorateur permet d'envoyer des données d'un composant enfant vers son composant parent ?

Leçon vidéo : Tutoriel Angular #24 - Comprendre les services et l'injection des dépendances 08m
Exercice: Quel est l’objectif principal d’un service dans une application Angular ?
Leçon vidéo : Tutoriel Angular #25 - RxJS et les Observables exemples dynamiques 10m
Exercice: Quel paquet Angular permet d’envoyer des requêtes HTTP vers un service web ?
Exercice: Dans RxJS, quelle méthode permet de recevoir les valeurs émises par un Observable ?
Exercice: Quelle affirmation décrit le mieux la différence entre Promise et Observable ?
Leçon vidéo : Tutoriel Angular #26 - HttpClient 15m
Exercice: Quel module faut-il importer pour pouvoir utiliser HttpClient dans une application Angular ?

Leçon vidéo : Tutoriel Angular #27 - Navigation avec le routerLink et router-outlet 15m
Exercice: Quelle directive Angular permet d’afficher le composant correspondant à la route active ?
Leçon vidéo : Tutoriel Angular #28 - Lire les données des paramètres de l'URL et usage du routerLinkActive 11m
Exercice: Quelle directive permet d’ajouter dynamiquement une classe CSS au lien correspondant à la route active dans un menu ?
Exercice: Dans une page de détails avec une route contenant un paramètre (ex. :id), quelle méthode lit la valeur du paramètre une seule fois à l’arrivée sur la page ?
Exercice: Quand on récupère un paramètre d’URL (ex. id) via paramMap.get('id'), quel type est retourné et comment le convertir en nombre selon l’exemple ?
Leçon vidéo : Tutoriel Angular #29 - Protéger la navigation avec les Guards (canActivate) 11m
Exercice: Quelle méthode est appelée lors du clic sur le bouton Retour à la liste pour revenir à la liste des hôtels ?
Exercice: Quel type de garde est utilisé pour empêcher l’accès à une route de détails si l’identifiant est invalide ?
Exercice: Dans la logique du garde, quelle condition déclenche le refus d’accès et la redirection vers la liste des hôtels ?

Leçon vidéo : Tutoriel Angular #30 - Les Modules avec @NgModule (Partie 1) 05m
Exercice: Quel est l’objectif principal d’un module Angular ?
Leçon vidéo : Tutoriel Angular #31 - Les modules: bootstrap, exports, declarations, providers... (partie 2) 10m
Exercice: Dans une application Angular, quel module doit contenir le « bootstrap » (processus de démarrage) ?
Leçon vidéo : Tutoriel Angular #32 - Structurer l'application en modules 13m
Leçon vidéo : Tutoriel Angular #33 - Isoler les routes dans un module de routage (Routing Module) 07m
Exercice: Pourquoi créer un module dédié uniquement aux routes (routing) d’une fonctionnalité ?
Leçon vidéo : Tutoriel Angular #34 - Rendre actif un lien enfant avec [routerLinkActiveOptions] 08m
Exercice: Quelle commande est utilisée pour générer un nouveau composant d’édition d’hôtel ?
Exercice: Quel type de segment de route est utilisé pour passer un identifiant dans l’URL (ex. /hotels/:id/edit) ?
Exercice: Quelle option permet d’éviter que deux liens soient marqués actifs quand une route enfant est visitée ?

Leçon vidéo : Tutoriel Angular #35 - Construire le template du formulaire réactif 08m
Exercice: Dans la création du formulaire, quel élément est utilisé pour saisir une description plus longue qu'un simple champ texte ?
Leçon vidéo : Tutoriel Angular #36 - Connecter le template au model avec le FormBuilder 12m
Exercice: Quel module Angular faut-il importer pour pouvoir utiliser les formulaires réactifs (FormBuilder, FormGroup, formControlName) ?
Leçon vidéo : Tutoriel Angular #37 - Récuperer des données grâce aux paramètres de l'URL avec ActivatedRoute 13m
Exercice: Quelle classe Angular injecter pour lire un paramètre dynamique d’URL (ex. :id) dans un composant ?
Exercice: Quelle approche permet de réagir aux changements du paramètre :id sans recharger le composant ?
Exercice: Pourquoi ajoute-t-on un signe + devant la valeur récupérée par paramMap.get(id) ?
Leçon vidéo : Tutoriel Angular #38 - Ajouter un titre dynamique et prévenir des erreurs 05m
Exercice: Que doit faire le service lorsque l’identifiant reçu est égal à 0 ?
Exercice: Quel outil permet de retourner un Observable à partir d’un objet de valeurs par défaut ?
Exercice: Quelle logique permet de choisir le titre de page entre création et modification ?
Leçon vidéo : Tutoriel Angular #39 - Prévenir la perte des données avec le guard CanDeactivate 07m
Exercice: Quel type de garde Angular faut-il utiliser pour empêcher de quitter une page d’édition si le formulaire contient des changements ?

Leçon vidéo : Tutoriel Angular #40 - Integrer In-Memory-API et faire appel aux données 09m
Exercice: Quel est l’objectif principal de l’utilisation de l’In-Memory Web API dans l’application ?
Leçon vidéo : Tutoriel Angular #41 - Modifier les élements de la liste avec http.put() 10m
Exercice: Quelle méthode HTTP est utilisée dans le service pour modifier un hôtel existant ?
Leçon vidéo : Tutoriel Angular #42 - Ajouter de nouveaux élements avec http.post() 11m
Exercice: Quelle méthode HTTP est utilisée pour créer un nouvel hôtel via le service Angular ?
Leçon vidéo : Tutoriel Angular #43 - Supprimer les élements avec http.delete() 06m
Exercice: Quelle méthode HTTP est utilisée dans le service pour supprimer un hôtel ?

Leçon vidéo : Tutoriel Angular #44 - Ajouter et supprimer dynamiquement des champs dans un formulaire 14m
Exercice: Quel type de contrôle Angular est utilisé pour gérer une liste dynamique d’étiquettes dans un formulaire réactif ?
Leçon vidéo : Tutoriel Angular #45 - Créer, modifier et supprimer des éléments du FormArray - Usage de ngClass 14m
Exercice: Quelle directive Angular permet d’itérer sur un tableau d’étiquettes (tags) d’un hôtel dans le template ?
Leçon vidéo : Tutoriel Angular #46 - Intercepter les erreurs de serveur et les afficher 09m
Exercice: Dans un abonnement à une requête HTTP, quelle méthode permet de récupérer une erreur lorsqu’elle survient ?
Exercice: Quelle directive permet d’afficher conditionnellement un bloc uniquement si un message d’erreur existe ?
Exercice: Quelle action est utilisée pour faire disparaître l’erreur quand l’utilisateur clique sur l’icône de fermeture ?

Leçon vidéo : Tutoriel Angular #47 - Créer un validateur générique 12m
Exercice: Quel type de structure est utilisée pour associer un champ de formulaire à ses messages d’erreur ?
Exercice: Quel est le rôle principal de la classe générique de validation créée dans le dossier des validateurs ?
Exercice: À quel moment affiche-t-on les erreurs d’un champ lors de la génération des messages ?
Leçon vidéo : Tutoriel Angular #48 - AfterViewInit: Faire appel au validateur générique dans le composant 08m
Exercice: Quel hook du cycle de vie permet d'attendre que toute la vue (et ses sous-composants/directives) soit initialisée avant d'accéder à un formulaire dans le template ?
Leçon vidéo : Tutoriel Angular #49 - merge(): combiner des Observables avec RxJS - Usage de @ViewChild 12m
Exercice: Quel observable d’un formulaire permet d’être notifié à chaque changement de valeur ?
Exercice: Quel événement natif JavaScript est utilisé pour détecter la sortie d’un champ (perte de focus) ?
Exercice: Quelle fonction RxJS permet de créer un observable à partir d’un événement (ex. blur) sur un élément DOM ?
Leçon vidéo : Tutoriel Angular #50 - Déclencher des évenements dans un formulaire avec emitEvent 10m
Exercice: Quel opérateur RxJS permet de retarder l'affichage d'une erreur de validation pendant que l'utilisateur saisit du texte ?
Leçon vidéo : Tutoriel Angular #51 - Validators.pattern() - Valider avec une expression régulière. 12m
Exercice: Quel validateur Angular est utilisé pour vérifier que le prix saisi correspond à un format numérique via une expression régulière ?
Exercice: Dans la validation du prix, que signifie le symbole $ dans l’expression régulière ?
Exercice: Quel est l’objectif principal de la méthode statique range(min, max) dans le validateur personnalisé NumberValidators ?
Leçon vidéo : Tutoriel Angular #52 - Nettoyer son code 05m
Exercice: Quel dossier est indiqué comme pouvant être supprimé maintenant que les données sont gérées autrement ?