Projet 1  
Application de Gestion des Inscriptions CFITECH  
Contexte  
Le centre de formation CFITECH souhaite développer une application web moderne  
permettant de gérer les inscriptions de ses futurs stagiaires.  
Cette application devra permettre :  
•
•
•
•
•
de présenter le centre de formation ;  
d'afficher les formations disponibles ;  
d'enregistrer les informations d'un stagiaire ;  
d'afficher dynamiquement les données saisies ;  
de naviguer entre plusieurs pages ;  
Travail demandé  
1. Création du projet  
Créer un nouveau projet Angular 21 avec :  
•
•
•
Routing activé ;  
Standalone Components ;  
CSS comme système de style.  
2. Structure de l'application  
Créer les composants suivants :  
Header  
Footer  
Accueil  
Formations  
Inscription  
Profil  
Dashboard  
L'application devra être organisée selon une architecture moderne Angular.  
3. Mise en place du Routing  
Configurer les routes suivantes :  
/
→ Accueil  
/formations → Formations  
/inscription → Inscription  
/profil  
/dashboard  
→ Profil  
→ Dashboard  
Le composant principal devra contenir :  
<app-header></app-header>  
<router-outlet></router-outlet>  
<app-footer></app-footer>  
4. Création du menu principal  
Créer une barre de navigation moderne contenant les liens suivants :  
Accueil  
Formations  
Inscription  
Profil  
Dashboard  
Contraintes :  
•
•
•
•
utiliser routerLink ;  
styliser le menu avec CSS ;  
utiliser Flexbox ;  
conserver le menu visible sur toutes les pages.  
5. Page Accueil  
Créer une page de présentation du centre.  
Afficher :  
Bienvenue chez CFITECH  
Centre de Formation en Développement Web  
Créer la variable suivante :  
inscriptionsOuvertes = true;  
À l'aide de @if, afficher :  
Les inscriptions sont actuellement ouvertes.  
6. Page Formations  
Créer un tableau contenant les formations proposées par CFITECH :  
formations = [  
'Angular',  
'React',  
'Node.js',  
'Java Spring',  
'.NET'  
];  
Contraintes :  
•
•
•
afficher les formations avec @for ;  
utiliser track ;  
mettre la formation Angular en évidence avec ngClass.  
7. Formulaire d'inscription  
Créer un formulaire contenant les champs suivants :  
Nom  
Prénom  
Email  
Formation choisie  
Contraintes :  
•
•
•
utiliser [(ngModel)] ;  
afficher en temps réel les valeurs saisies ;  
ajouter un bouton permettant de valider l'inscription.  
8. Gestion du profil stagiaire  
Créer une page Profil affichant :  
Nom  
Prénom  
Email  
Formation choisie  
À l'aide de @if, vérifier si toutes les informations sont complétées.  
Afficher :  
Profil complet  
ou  
Profil incomplet  
selon le cas.  
9. Utilisation de ngStyle  
Créer une variable :  
couleurTitre = 'blue';  
Appliquer cette couleur sur les titres de l'application grâce à ngStyle.  
Créer un bouton :  
Changer la couleur  
À chaque clic :  
Bleu → Vert → Rouge → Bleu  
10. Utilisation de [hidden]  
Créer une section :  
Informations administratives  
Créer la variable :  
afficherInformations = false;  
Créer un bouton :  
Afficher / Masquer  
Utiliser [hidden] pour contrôler l'affichage de cette section.  
11. Gestion du niveau du stagiaire  
Créer une variable :  
niveau = 'debutant';  
À l'aide de @switch, afficher :  
Débutant  
Intermédiaire  
Avancé  
Créer un bouton permettant de changer le niveau.  
12. Utilisation des Signals  
Créer un Signal :  
nombreInscriptions = signal(0);  
Créer un bouton :  
Nouvelle inscription  
À chaque clic :  
•
•
incrémenter le compteur ;  
utiliser set() ou update().  
Afficher :  
Nombre total d'inscriptions : X  
13. Tableau de bord  
Créer une page Dashboard permettant d'afficher :  
Nombre total d'inscriptions  
Nom du stagiaire  
Prénom  
Formation choisie  
Niveau  
Statut du profil  
Cette page doit servir de tableau récapitulatif de l'application.