Projet Angular pas à pas

Dans ce tutoriel, nous allons créer votre première application Angular pas à pas. À la fin de celui-ci, vous aurez créé une application Angular simple de login.

1. Prérequis

Avant de commencer ce tutoriel, assurez-vous d’avoir bien suivi les tutoriels précédents sur Angular ("Introduction à Angular" et "Utiliser Angular").

2. Étape 1 : Créer un nouveau projet Angular

Nous allons démarrer depuis un projet vierge Angular en utilisant Angular CLI.

Ouvrez votre terminal et créez un nouveau projet Angular.

Suivez les instructions à l’écran pour configurer votre projet comme nous l’avons vu dans le tutoriel. Une fois le projet créé, naviguez dans le répertoire du projet.

3. Étape 2 : Lancer l’application

L’application est désormais créée. Nous pouvons la builder et la lancer pour la voir dans notre navigateur.

Lancez votre application en utilisant la commande ng serve.

Ouvrez votre navigateur et accédez à cette URL pour voir votre application en cours d’exécution. Vous devriez voir la page par défaut d’Angular.

4. Étape 3 : Structurer le projet

Votre projet est en cours d’exécution. Nous allons mettre en place sa structure globale comme nous l’avons vue dans le tutoriel afin de faciliter le travail sur le projet.

Créez l’arborescence suivante dans le répertoire src/app :

  • core/ (avec services, guards, models)

  • modules/

  • shared/ (avec components, header, footer)

Une fois la structure créée, vous pouvez commencer à ajouter des composants dans les dossiers appropriés.

5. Étape 4 : Créer vos pages

Nous allons maintenant créer les pages nécessaires pour notre application de login. Utilisez les commandes Angular CLI que nous avons vu pour générer les composants de page.

Créez les composants suivants dans le dossier modules :

  • login

  • logged

Pour chaque page, créez un dossier components pour y mettre les composants spécifiques à cette page.

La structure de votre projet devrait maintenant ressembler à ceci :

<votre application>/
 ├── 📁 public/
 │   └── favicon.ico/
 └── 📁 src/
     ├── 📁 app/
     │   ├── 📁 core/
     │   │   ├── 📁 services
     │   │   ├── 📁 guards
     │   │   └── 📁 models
     │   ├── 📁 modules/
     │   │   ├── 📁 login
     │   │   │   ├── 📁 components
     │   │   │   ├── login.component.css
     │   │   │   ├── login.component.html
     │   │   │   ├── login.component.spec.ts
     │   │   │   └── login.component.ts
     │   │   ├── 📁 logged
     │   │   │   ├── 📁 components
     │   │   │   ├── logged.component.css
     │   │   │   ├── logged.component.html
     │   │   │   ├── logged.component.spec.ts
     │   │   │   └── logged.component.ts
     │   ├── 📁 shared/
     │   │   ├── 📁 components
     │   │   ├── 📁 header
     │   │   └── 📁 footer
     │   ├── app.component.css
     │   ├── app.component.html
     │   ├── app.component.spec.ts
     │   ├── app.component.ts
     │   ├── app.config.ts
     │   └── app.routes.ts
     ├── index.html
     ├── main.ts
     └── styles.css

6. Étape 5 : Ajouter la page au routing

Une fois que les pages sont créées, il faut les ajouter au système de routing de l’application afin de pouvoir y accéder via des URLs spécifiques. Pour cela, nous allons modifier le fichier app.routes.ts en ajoutant nos 2 composants login et logged.

Ajoutez les nouvelles pages au système de routing de l’application. Les chemins doivent s’appeler /login et /logged.

Vous pouvez naviguer entre les pages en utilisant les URLs login et logged. Ces pages n’affichent encore rien pour le moment, car nous n’avons rien ajouté dans leurs templates respectifs.

7. Étape 6 : Créer les pages de login et logged

Maintenant que notre projet est structuré et que les routes sont en place, nous allons créer le contenu des pages login et logged.

Le but va être de créer une page de login simple où l’utilisateur peut entrer ses informations, et une page logged qui affiche un message de bienvenue une fois connecté.

Dans login, créez un composant de formulaire simple, contenant des champs pour l’adresse mail et le mot de passe, ainsi qu’un bouton de soumission. Ajoutez ce composant au template de la page login. Dans logged, affichez un message de bienvenue à l’utilisateur.

8. Étape 7 : Créer le service d’authentification et le guard

Nous pouvons maintenant ajouter la logique d’authentification à notre application. Pour cela, nous allons créer un service d’authentification qui gérera la connexion de l’utilisateur, ainsi qu’un guard pour protéger la route logged, qui ne sera accessible qu’aux utilisateurs authentifiés.

Créez un service AuthService dans le dossier core/services pour gérer l’authentification. Créez un guard AuthGuard dans le dossier core/guards pour protéger la route logged. Ajoutez le guard à la route logged dans le fichier app.routes.ts.