Utiliser Angular

Dans ce tutoriel, nous allons voir quels sont les éléments composant un projet Angular, et comment les manipuler.

1. Les composants

1.1. Définition

Angular repose sur le principe des composants. Chaque composant représente une partie de votre application : cela peut être une page complète, ou simplement un élément spécifique de cette page, comme un formulaire ou un bouton personnalisé.

1.2. Générer un nouveau composant

Pour générer un nouveau composant dans votre projet, tapez la commande suivante dans le terminal à l’endroit où vous voulez créer le composant :

# Version longue
ng generate component <nom-composant>

# Version courte
ng g c <nom-composant>

Pour avoir la page la plus modulable possible, essayer de découper votre page en pleins de composants. Cependant, attention à ne pas faire trop de découpage ! Vous auriez alors une page très difficilement maintenable.

1.3. Comment les utiliser ?

Les composants prennent la même structure que le composant principal que nous avons vu dans la première partie. On retrouvera les 4 fichiers (html, css, ts, et spec.ts).

Vous pouvez donc décrire ce à quoi ressemble votre composant dans le fichier HTML, personnaliser son style dans le fichier CSS (attention, le CSS présent dans un composant lui est propre. Si vous déclarez une classe dans ce fichier, les autres composants n’y auront pas accès) et son comportement dans le fichier TypeScript.

Dans la partie TypeScript, vous pouvez importer un autre composant pour l’utiliser dans votre page.

Pour cela, vous devez d’abord l’importer en haut de votre fichier, puis vous devez le rentrer dans le décorateur @Component, dans le tableau imports. Vous pourrez ensuite l’utiliser dans la partie HTML de votre composant, en l’important comme une balise HTML avec le nom du composant.

Importer un composant

On crée un composant LoginForm qui utilise deux autres composants : LoginInput et LoginButton :

import { Component } from '@angular/core';
// J'importe ici les 2 composants de ma page
import {LoginInput} from '../login-input/login-input';
import {LoginButton} from '../login-button/login-button';

@Component({
  selector: 'app-login-form',
  imports: [LoginInput, LoginButton],
  templateUrl: './login-form.html',
  styleUrl: './login-form.css'
})
export class LoginForm {
    // Complétez avec votre code !
}

Question :

Avec l’aide de l’exemple ci-dessus, essayez de répondre à cette question : si j’utilise le composant LoginForm dans un autre composant, quel sera son nom à utiliser dans le fichier HTML ?

2. Les interfaces

2.1. Définition

Les interfaces fonctionnent comme en programmation objet : c’est un moyen de définir un "contrat" que doit remplir un objet. Cela permet de définir des types de données plus complexe.

2.2. Générer une nouvelle interface

Pour générer une nouvelle interface dans votre projet, taper la commande suivante dans le terminal à l’endroit où vous voulez créer l’interface :

# Version longue
ng generate interface <nom-interface>

# Version courte
ng g i <nom-interface>

2.3. Définir son interface

Une interface servira, plus tard, à "caster" des types sur le résultat d’une requête HTTP auprès une API. Vous pouvez déjà définir les champs de votre interface à l’aide de la documentation de l’API que vous allez appeler.

Exemple 1. Définir une interface

L’interface User représente un utilisateur ayant un email, un nom, un prénom et un rôle :

export interface User {
  email: String;
  name: String;
  firstname: String;
  role: String;
}

3. Les services

3.1. Définition

Les services permettent de séparer les données et les fonctions de votre application afin qu’elles puissent être réutilisées dans plusieurs composants.

Pour qu’un service puisse être partagé entre différents composants, il doit être injectable. Lorsqu’un service est injectable et utilisé par un composant, il devient une dépendance de ce composant. Autrement dit, le composant dépend de ce service et ne peut pas fonctionner correctement sans lui.

3.2. Générer un nouveau service

Pour générer un nouveau service dans votre projet, taper la commande suivante dans le terminal à l’endroit où vous voulez créer le service :

# Version longue
ng generate service <nom-service>

# Version courte
ng g s <nom-service>

3.3. Quel est le rôle d’un service ?

Les services peuvent réaliser un grand nombre de tâches, étant donné que c’est celui-ci qui gère les données qui seront affichées dans le front.

Dans le tutoriel, nous avons décidé que le service serait responsable de la connexion d’un utilisateur. Il va donc falloir récupérer les informations depuis les champs de texte, puis les transmettre via une route API configurée dans le back avec Spring.

En fonction de la réponse, le front va réagir différemment : soit afficher une erreur en cas d’échec, soit faire une redirection en cas de réussite.

4. Les gardes

4.1. Définition

Un garde sur Angular est une fonctionnalité qui vous permet de contrôler l’accès à des routes spécifiques dans votre application. Vous pouvez utiliser des gardes pour exécuter certaines vérifications ou actions avant de permettre l’accès à une route, par exemple pour vérifier si l’utilisateur est authentifié ou a les droits d’accès appropriés.

4.2. Générer une nouvelle garde

Pour générer une nouvelle garde dans votre projet, tapez la commande suivante dans le terminal à l’endroit où vous voulez créer la garde :

# Version longue
ng generate guard <nom-garde>

# Version courte
ng g g <nom-garde>

Lors de la création, le CLI vous demandera quel type de garde souhaitez vous créer. Ici, on souhaite savoir si on peut accéder à une page précise : on choisira alors le type CanActivate.

4.3. Créer et utiliser votre garde

Une fois que vous avez généré la garde et que vous l’avez configurée comme vous le souhaitiez (comme par exemple en vérifiant qu’un utilisateur est identifié), vous devez ajouter cette garde aux différentes routes que vous avez créé, afin que celle-ci puisse faire des actions.

Pour cela, vous devez ajouter au fichier app.routes.ts la propriété canActivate à toutes les routes que vous voulez vérifier, ainsi que le nom de la fonction de garde que vous avez définie dans un tableau.

Exemple 2. Utiliser une garde

La garde ci-dessous vérifie si un utilisateur est connecté avant de lui permettre d’accéder à une page protégée. Si l’utilisateur n’est pas connecté, il est redirigé vers la page de login :

// [...]

export const AuthGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) return true;

  router.navigate(['/login']);
  return false;
};

Maintenant, dans le fichier app.routes.ts, on va ajouter la garde :

// [...]
export const routes: Routes = [
  {
    path: 'login',
    component: Login,
  },
  {
    path: 'logged',
    component: Logged,
    canActivate: [AuthGuard],
  }
];