Utiliser Angular

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

Les composants

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é.

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.

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.

Example 1. Importer un composant

Extrait de l’exemple Angular fourni :

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

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

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

Les interfaces

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.

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>

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.

Example 2. Définir une interface

Extrait de l’exemple Angular fourni :

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

Les services

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.

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>

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.

Les guards

Définition

Un guard 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 guards 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.

Générer un nouveau guard

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

# Version longue
ng generate guard <nom-guard>

# Version courte
ng g g <nom-guard>

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

Créer et utiliser votre guard

Une fois que vous avez généré le guard et que vous l’avez configuré comme vous le souhaitiez (comme par exemple en vérifiant qu’un utilisateur est identifié), vous devez ajouter ce guard aux différentes routes que vous avez créé, afin que celui-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 guard que vous avez défini dans un tableau.

Example 3. Utiliser un guard

Voici le guard extrait de l’exemple Angular fourni :

// [...]

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 le guard :

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