🧩 Angular Project – Application de gestion des employés
Ce projet Angular a été conçu comme un support d’apprentissage pratique pour comprendre les fondamentaux du framework Angular à travers une application concrète de gestion d’employés.
L’objectif était de couvrir l’ensemble des briques essentielles d’Angular, en respectant les bonnes pratiques et une architecture claire.
🎯 Objectifs du projet
- Démarrer un projet Angular de zéro avec une structure propre.
- Comprendre le rôle et le cycle de vie des composants Angular.
- Mettre en place une communication efficace entre composants.
- Maîtriser les formulaires Angular (Template-driven et Reactive Forms).
- Implémenter un système de routage pour naviguer entre les vues.
- Utiliser des services injectables pour centraliser la logique métier.
- Manipuler les données avec pipes et directives Angular.
⚙️ Fonctionnalités principales
- Affichage d’une liste d’employés
- Ajout et édition d’un employé via formulaire
- Navigation entre les pages avec Angular Router
- Mise à jour dynamique de l’interface
- Séparation claire entre logique métier et affichage
🧱 Architecture et concepts Angular utilisés
🟦 Démarrage du projet Angular
- Initialisation avec Angular CLI
- Organisation modulaire des composants
- Respect de la convention Angular (naming, dossiers, responsabilités)
🧩 Composants Angular
- Création de composants réutilisables
- Templates HTML clairs et typés
- Utilisation du data binding (
{{ }},[property],(event))
🔁 Communication entre composants
@Input()pour transmettre des données du parent vers l’enfant@Output()etEventEmitterpour remonter des événements- Gestion du state local de manière contrôlée
🧭 Routing – Système de navigation
- Mise en place d’Angular Router
- Navigation entre vues
- Chargement de composants selon l’URL
- Structure scalable pour une application multi-pages
🧪 Services & Injection de dépendances
- Création de services Angular
- Centralisation de la logique métier
- Injection via le constructeur
- Partage de données entre composants
📝 Formulaires Angular
- Template-driven forms pour les cas simples
- Reactive forms pour un contrôle fin :
- validation
- typage
- gestion de l’état du formulaire
- Meilleure séparation logique / UI
🎨 Pipes & Directives
- Utilisation de pipes Angular pour transformer les données à l’affichage
- Directives structurelles (
@If,@For) - Compréhension des flux de contrôle dans les templates
🧠 Ce que j’ai appris
- Les fondamentaux d’Angular et sa philosophie orientée framework
- La communication entre composants et la gestion de l’état
- La puissance des Reactive Forms
- L’importance des services pour une architecture maintenable
- Le fonctionnement du routing Angular
- Une meilleure lecture et compréhension de projets Angular existants
✨ Ce projet en quelques mots
Un projet Angular pédagogique, structuré et progressif, conçu pour comprendre en profondeur les bases du framework et construire des applications scalables.
Ce projet m’a permis de consolider mes bases Angular et de mieux appréhender les différences avec React, notamment en termes de structure, d’injection de dépendances et de gestion des formulaires.
🧰 Stack technique
- Framework : Angular
- Langage : TypeScript
- Routing : Angular Router
- Formulaires : Template-driven & Reactive Forms
- Architecture : Composants + Services
- Outils : Angular CLI