◎ Formation complète Angular ◎
➲ Section 1 — Démarrer avec Angular
⁂ ANGULAR 1.1 — Introduction➔ Petite vidéo d'introduction qui présente le déroulement complet de la formation Angular et ce que vous allez apprendre tout au long du cours.
⁂ ANGULAR 1.2 — Qu'est-ce qu'Angular ?➔ Angular est un framework JavaScript permettant la création de Single Page Applications (SPA) : un seul fichier HTML dont le contenu change dynamiquement. L'utilisateur a l'impression d'utiliser une application native, tout en restant sur une page web.
⁂ ANGULAR 1.3 — AngularJS vs Angular➔ Tour d'horizon des différentes versions du framework. Comment AngularJS, Angular 2 et les versions suivantes sont liées, et pourquoi les changements de version restent maîtrisés grâce à la stratégie de release de l'équipe Angular.
⁂ ANGULAR 1.4.1 — Première application (partie 1)➔ Construction de votre première application Angular à l'aide de l'Angular CLI — la méthode de référence pour démarrer un projet — avec en pré-requis Node.js et npm.
⁂ ANGULAR 1.4.2 — Première application (partie 2)➔ Suite de la création : installation pas à pas de l'Angular CLI en ligne de commande, puis génération de votre toute première application Angular.
⁂ ANGULAR 1.5.1 — Éditer sa première application (partie 1)➔ Découverte de l'arborescence d'un projet Angular dans votre IDE : à quoi servent les principaux fichiers et dossiers générés par l'Angular CLI ?
⁂ ANGULAR 1.5.2 — Éditer sa première application (partie 2)➔ Découverte du Data Binding : on lie une donnée TypeScript à l'affichage HTML, puis on introduit le two-way data binding pour propager les changements dans les deux sens.
⁂ ANGULAR 1.6 — TypeScript, c'est quoi ?➔ TypeScript est la technologie open source de Microsoft utilisée par défaut dans Angular. Comment elle apporte la robustesse du typage statique à JavaScript et limite les erreurs de runtime.
➲ Section 2 — Composants & Data Binding
⁂ ANGULAR 2.1 — Introduction➔ Présentation de la section dédiée aux composants Angular, brique de base de toute application.
⁂ ANGULAR 2.2 — Comment une application Angular est chargée et démarrée➔ Le cycle de bootstrap : de index.html à main.ts, comment Angular construit l'arbre de composants et affiche votre application.
⁂ ANGULAR 2.3 — Les components sont importants➔ Pourquoi les composants sont au cœur d'Angular : encapsulation, réutilisabilité, séparation des responsabilités.
⁂ ANGULAR 2.4 — Création d'un nouveau composant➔ Pas à pas : créer un composant Angular, manuellement puis avec l'Angular CLI (ng generate component).
⁂ ANGULAR 2.5 — Le rôle d'AppModule➔ Comprendre comment AppModule déclare les composants utilisés dans l'application et pourquoi cette déclaration est obligatoire.
⁂ ANGULAR 2.7 — Création de composants avec la CLI et imbrication➔ Création rapide de composants via la CLI puis imbrication d'un composant enfant dans un composant parent.
⁂ ANGULAR 2.8 — Travailler avec les templates de composants➔ Template inline vs template externe, bonnes pratiques de structuration du HTML d'un composant.
⁂ ANGULAR 2.9 — Travailler avec les styles de composants➔ Styles inline, fichier .css/.scss dédié et encapsulation du style à l'échelle du composant.
⁂ ANGULAR 2.10 — Le sélecteur de composants➔ Sélecteur en tag, en attribut ou en classe : quand utiliser chacun et impact sur le HTML résultant.
⁂ ANGULAR 2.11 — Exercice 1➔ Mise en pratique : créer un mini-projet avec plusieurs composants imbriqués.
⁂ ANGULAR 2.12 — Qu'est-ce que le Data Binding ?➔ Définition et tour d'horizon des quatre formes de data binding : interpolation, property binding, event binding, two-way binding.
⁂ ANGULAR 2.13 — Interpolation de chaînes➔ Utilisation de la syntaxe {{ expression }} pour afficher des valeurs dynamiques dans le HTML.
⁂ ANGULAR 2.14 — Property Binding➔ Lier une propriété HTML (src, disabled, value, etc.) à une variable TypeScript via la syntaxe [property].
⁂ ANGULAR 2.15 — Property Binding vs interpolation➔ Quand utiliser l'un et quand utiliser l'autre, avec des exemples concrets.
⁂ ANGULAR 2.16 — Two-way Data Binding➔ La directive [(ngModel)] pour faire circuler la donnée du composant au template et inversement.
⁂ ANGULAR 2.17 — Event Binding➔ Capter les événements DOM (click, input, submit) et exécuter du code TypeScript en réaction.
⁂ ANGULAR 2.18 — Liaison de données bidirectionnelle (approfondissement)➔ Approfondissement du two-way binding et ses cas d'usage privilégiés sur les formulaires.
⁂ ANGULAR 2.19 — Combiner toutes les formes de binding➔ Exemple complet qui combine interpolation, property binding, event binding et two-way binding sur un même composant.
⁂ ANGULAR 2.20 — Exercice 2➔ Mise en pratique des différents data bindings sur un mini-projet.
⁂ ANGULAR 2.21 — Comprendre les directives➔ Directives structurelles vs directives d'attribut : à quoi sert chaque famille et comment les utiliser.
⁂ ANGULAR 2.22 — *ngIf➔ Afficher ou masquer un élément du DOM en fonction d'une expression booléenne grâce à *ngIf.
⁂ ANGULAR 2.23 — *ngIf avec une branche else➔ Améliorer *ngIf en utilisant une template reference et la directive ng-template pour fournir une alternative.
⁂ ANGULAR 2.24 — ngStyle➔ Appliquer des styles CSS de manière dynamique à un élément selon l'état du composant.
⁂ ANGULAR 2.25 — ngClass➔ Activer ou désactiver des classes CSS conditionnellement avec ngClass.
⁂ ANGULAR 2.26 — *ngFor➔ Boucler sur un tableau pour produire dynamiquement une liste d'éléments HTML.
⁂ ANGULAR 2.27 — Exercice 3➔ Mise en pratique : afficher une liste filtrable d'éléments en combinant *ngFor, *ngIf et les bindings.
➲ Section 3 — Planifier & construire une vraie application
⁂ ANGULAR 3.1 — Introduction de la section➔ Présentation du projet fil rouge : une application complète qui va servir d'étude de cas pour le reste de la formation.
⁂ ANGULAR 3.2 — Planification d'une application➔ Comment cadrer le périmètre fonctionnel, identifier les composants, modules et services avant la première ligne de code.
⁂ ANGULAR 3.3 — Création d'une application➔ Initialiser le projet Angular et poser les fondations de l'application.
⁂ ANGULAR 3.4 — Configuration d'une application➔ Configurer les options du projet : tsconfig, angular.json, environments, etc.
⁂ ANGULAR 3.5 — Création des composants➔ Découper l'application en composants et générer leur structure avec la CLI.
⁂ ANGULAR 3.6 — Utilisation des composants➔ Assembler les composants entre eux et faire transiter la donnée parent → enfant.
⁂ ANGULAR 3.7 — Ajouter une barre de navigation➔ Construire le composant de navigation principal de l'application.
⁂ ANGULAR 3.8 — Afficher le détail d'un élément➔ Afficher la fiche détaillée d'un élément sélectionné dans la liste, avec routage et passage de données.
➲ Section 5 — Propriétés & événements personnalisés, cycle de vie
⁂ ANGULAR 5.5 — Alias des propriétés personnalisées➔ Renommer publiquement une propriété @Input pour rendre l'API du composant plus claire à utiliser.
⁂ ANGULAR 5.6 — Bind d'événements personnalisés➔ Émettre un événement depuis un composant enfant avec @Output et EventEmitter, et le capter dans le parent.
⁂ ANGULAR 5.7 — Alias des événements personnalisés➔ Donner un nom externe distinct à un @Output via son alias.
⁂ ANGULAR 5.8 — Résumé propriétés & événements personnalisés➔ Synthèse complète : quand utiliser @Input, @Output, et comment les combiner.
⁂ ANGULAR 5.9 — Encapsulation des vues➔ ViewEncapsulation.Emulated, .None, .ShadowDom — comment Angular isole le style de chaque composant.
⁂ ANGULAR 5.10 — Encapsulation des vues (approfondissement)➔ Cas pratiques et pièges courants liés à l'encapsulation du style des composants.
⁂ ANGULAR 5.11 — Références locales dans les templates➔ La syntaxe #ref pour récupérer un élément du DOM ou un composant directement dans le template.
⁂ ANGULAR 5.12 — Accéder au DOM avec @ViewChild➔ Récupérer une référence à un élément ou un composant enfant côté TypeScript via @ViewChild.
⁂ ANGULAR 5.13 — Projeter du contenu avec ng-content➔ Injecter du HTML arbitraire dans un composant enfant grâce à la slot <ng-content>.
⁂ ANGULAR 5.14 — Cycle de vie des composants➔ Tour d'horizon des hooks ngOnInit, ngOnChanges, ngOnDestroy, ngAfterViewInit, et quand utiliser chacun.
👍 Bon à savoir
Angular est l'un des frameworks front-end les plus utilisés en entreprise. Maintenu par Google, il s'appuie sur TypeScript et fournit en standard tout ce qu'il faut pour bâtir une application web complète : composants, services, injection de dépendances, routing, formulaires réactifs, HTTP, internationalisation, tests.
Cette formation est progressive : si vous découvrez Angular, suivez les sections dans l'ordre. Si vous cherchez un point précis (data binding, *ngIf, @ViewChild, etc.), les chapitres sont aussi conçus pour être consultés indépendamment. Les vidéos sont également disponibles sur la chaîne YouTube de we want code, et chaque leçon dispose de sa propre page pour vous permettre de reprendre exactement où vous vous êtes arrêté.