L’exemple précédent est « bancal » en ce sens que les affichages des items du tableau UE sont encodés en dur dans le template HTML. Si on rajoute un élément dans UE, il faut mettre à jour manuellement le fichier courses.component.html. Pour pallier cela, Angular propose une boucle @for que l’on utilise dans le fichier HTML (anciennement, c’était la directive *ngFor). L’idée c’est que cette boucle s’utilise comme un for(let elt of collection) de JavaScript. Il existe toutefois une subtile différence : le @for prend un deuxième argument track qui indique à Angular où se trouvent les données du TypeScript dans le DOM. Cela lui permet d’optimiser la mise à jour du DOM. Ci-dessous, j’ai indiqué que les données sont repérées via leur index ($index) dans le tableau UE.

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track $index) {
    <li>{{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

Si les données possèdent un identifiant, on peut également l’utiliser pour repérer les données :

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

Pour plus d’informations sur cette boucle, vous pouvez vous reporter à la page :

https://angular.dev/guide/templates/control-flow#repeat-content-with-the-for-block

Évidemment, le tableau UE pourrait être vide et, dans ce cas, on pourrait avoir envie de le signaler. On a deux options pour cela : utiliser le @if que l’on verra plus bas ou bien utiliser le mot-clef @empty associé au @for :

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  } @empty {
    <li>Pas d'élément dans UE</li>
  }
</ul>

Le mot-clef @empty est une alternative (elle n’affiche du code que lorsque la boucle @for est vide) mais elle reste limitée aux boucles @for. Angular propose des alternatives plus générales avec les mots-clefs @if, @else et @else if :

<p>{{titre()}}</p>

@if (UE.length == 0) {
  <li>Pas d'élément dans UE</li>
} @else if (UE.length == 1) {
  <li>un seul élément dans UE</li>
} @else {
  <li>plusieurs éléments dans UE</li>
}

Angular propose également des switch, similaires à ceux des autres langages que vous connaissez :

<p>{{titre()}}</p>

@switch (UE.length) {
  @case(0) {
    <li>Pas d'élément dans UE</li>
  }
  @case(1) {
    <li>un seul élément dans UE</li>
  }
  @default {
    <li>plusieurs éléments dans UE</li>
  }
}

La première chose à faire est de créer la classe du service :

import { Injectable } from '@angular/core';

// placer ici l'interface indiquant le type des données que le
// composant Courses va récupérer
export interface Course {
  nom: string;
  nb_etuds : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor() { }

  // la méthode pour récupérer les données
  getCourses() : Course[] {
    return [
      {nom: 'c1', nb_etuds: 3},
      {nom: 'c2', nb_etuds: 5}
    ];
  }
}

Ici, il y a plusieurs choses à noter :

1. J’ai déplacé l’interface Course du composant Courses vers le service. C’est sa place logique. En effet, chaque fois que l’on échangera des données avec le serveur, c’est le service qui réalisera cette opération et il faudra indiquer le type des données que l’on recevra, donc l’interface Course.

2. Le service est une classe dont le nom est MonServiceService. Le composant Courses devra donc utiliser une instance de cette classe pour récupérer ses données. Juste au dessus du mot-clef class, vous voyez une annotation @Injectable. Elle signifie que le composant Courses pourra (et devra) récupérer l’instance du service par dependency injection (que l’on verra plus bas).

3. La classe MonServiceService est une classe comme les autres, on peut donc lui ajouter des méthodes pour interagir avec les composants. C’est ce que fait la méthode getCourses().

Le template HTML du composant Courses n’a pas besoin d’être modifié. En revanche, le TypeScript doit l’être afin d’utiliser le service :

import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {Course, MonServiceService} from '../services/mon-service.service';

@Component({
  selector: 'app-courses',
  imports: [
    FormsModule
  ],
  templateUrl: './courses.component.html',
  styleUrl: './courses.component.scss'
})
export class CoursesComponent {
  titre = signal('composant courses');

   // au départ, UE est vide. On récupérera plus tard ses données. Du coup,
   // il est bienvenu d'indiquer le type d'objets contenus dans le tableau.
   UE : Course[] = [];

   constructor() {
     // on crée le service et on l'utilise pour récupérer les données
     const service = new MonServiceService();
     this.UE = service.getCourses();
   }
}

Ici, on voit que l’attribut UE est initialisé à un tableau vide. C’est seulement dans le constructeur qu’on y place les vraies données. Pour cela, le constructeur peut créer une instance du service et on peut alors exécuter la méthode getCourses() pour placer toutes les données dans l’attribut UE.

Le code ci-dessus fonctionne mais il a toutefois deux gros problèmes :

1. il crée dans le constructeur l’instance du service. Par conséquent, si la page que l’on affiche contient 20 instances du composant Courses, on va également créer 20 instances du service, ce qui n’est pas efficace.

2. Le constructeur exécute la méthode getCourses(). Or, si celle-ci récupère ses données d’un serveur, ce ne sera pas forcément une opération très rapide. Malheureusement, le constructeur est bloquant pour les affichages (ceux-ci ne peuvent être réalisés tant que le constructeur n’a pas terminé son exécution). Donc le code ci-dessus peut amener à une expérience utilisateur de médiocre qualité.

Pour pallier le premier problème, on va utiliser la technique du dependency injection. L’idée est d’utiliser le design pattern Singleton, comme on l’a vu au premier semestre. Pour cela, il suffit de passer en paramètre du constructeur l’instance du service dont on a besoin. Angular générera alors cette instance une seule fois dans toute l’application et c’est cette instance qui sera utilisée chaque fois qu’on demandera une instance par dependency injection.

Pour pallier le deuxième problème, on va placer l’appel à getCourses() non pas dans le constructeur mais dans une méthode appelée ngOnInit() qui est appelée après le constructeur lorsque l’on crée les instances de Courses et qui n’est pas bloquante. Dans le code ci-dessous, pour être plus propre, j’ai indiqué que la classe Courses implémente l’interface OnInit, qui précise que Courses possède une méthode ngOnInit().

import {Component, OnInit, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {Course, MonServiceService} from '../services/mon-service.service';

@Component({
  selector: 'app-courses',
  imports: [
    FormsModule
  ],
  templateUrl: './courses.component.html',
  styleUrl: './courses.component.scss'
})
export class CoursesComponent implements OnInit {
  titre = signal('composant courses');

   UE : Course[] = [];

   constructor(private service : MonServiceService) {} // dependency injection

   ngOnInit() { // placer ici les appels au service
     this.UE = this.service.getCourses();
   }
}

La deuxième étape va simplement consister à ce que notre service utilise le service HttpClient. Pour cela, il va en récupérer une instance par dependency injection et utiliser les méthodes get ou post de cette instance.

import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import {HttpClient} from '@angular/common/http';

export interface Course {
  nom: string;
  nb_etuds : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor(private http: HttpClient) { }

  getCourses() : Observable<Course[]> {
    // get retourne un observable
    return this.http.get<Course[]>('http://127.0.0.1/getCourses.php');
  }
}

<?php

// on indique ici que le script va transmettre des données JSON
header('Content-type:application/json;charset=utf8');

// Ici, on ajoute un header pour contourner le problème de CORS.
// Notez que l'on doit le faire, ici, parce que le frontend Angular est servi sur
// le port 4200 alors que le backend PHP est servi par Apache sur le port 80.
header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");

echo json_encode ([
  [ 'nom' => 'c1', 'nb_etuds' => 2 ],
  [ 'nom' => 'c2', 'nb_etuds' => 5 ],
  [ 'nom' => 'c3', 'nb_etuds' => 6 ]
]);

?>

Si vous exécutez ces codes, vous verrez dans la console que le message « les instructions qui sont après le subscribe » s’affichera avant « ici, on a récupéré les données », ce qui prouve bien que tout ce qui concerne les données doit être inclus dans la callback du subscribe(). Cela signifie également que le code suivant (cf. le code souligné en jaune) est incorrect car, même si UE contient 3 éléments, la page affichera via le @switch que UE est vide. En effet, l’affectation de this.nb_UE est réalisée avant que la callback ne soit appelée.

import {Component, OnInit, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {Course, MonServiceService} from '../services/mon-service.service';

@Component({
  selector: 'app-courses',
  imports: [
    FormsModule
  ],
  templateUrl: './courses.component.html',
  styleUrl: './courses.component.scss'
})
export class CoursesComponent implements OnInit {
  titre = signal('composant courses');

   UE : Course[] = [];
   nb_UE !: number; // le ! indique à TypeScript que c'est normal de ne pas
                    // avoir initialisé nb_UE (normalement, c'est une erreur)

   constructor(private service : MonServiceService) {}

   ngOnInit() {
     this.service.getCourses().subscribe(result => {
       // ici, on met toutes les instructions qui vont utiliser les
       // données récupérées.
       console.log("ici, on a récupéré les données");
       this.UE = result;
     });

     // ici, les instructions ne doivent pas dépendre des données récupérées
     console.log("les instructions qui sont après le subscribe");
     this.nb_UE = this.UE.length;
   }
}

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

@switch (nb_UE) {
  @case(0) {
    <li>Pas d'élément dans UE</li>
  }
  @case(1) {
    <li>un seul élément dans UE</li>
  }
  @default {
    <li>plusieurs éléments dans UE</li>
  }
}

Les requêtes POST se font de la même manière que les GET, excepté que l’on doit transmettre les données qui seront stockées dans le $_POST des scripts PHP du backend. Ici, je ne transmets aucune donnée, donc je passe un null, sinon, comme dans les exercices, il faudra transmettre un objet de type form-data, cf. l’url :

https://developer.mozilla.org/fr/docs/Web/API/FormData/FormData

import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import {HttpClient} from '@angular/common/http';

export interface Course {
  nom: string;
  nb_etuds : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor(private http: HttpClient) { }

  getCourses() : Observable<Course[]> {
    return this.http.post<Course[]>(
      'http://127.0.0.1/xmobile_cours/getCourses.php', // l'url du backend
      null                                             // les data du POST
    );
  }
}

On a déjà vu le principe des cookies de session utilisés par PHP via sa fonction session_start(). Le code ci-dessus ne les gère pas, ce qui veut dire que si, sur la page de login de votre forum, vous saisissez un login/password correct, le script checkLogin.php vous indiquera que tout est ok, votre frontend Angular passera alors sur la page d’affichage des cours, qui requêtera le backend pour obtenir la liste des cours. Mais celui-ci vous retournera que vous n’êtes pas connecté(e) car le frontend ne renverra pas le cookie de session. Bref, il faut un moyen de le retransmettre et cela passe par un 3ème argument du post() qui contient des options. Celle qui nous intéresse s’appelle withCredentials. Si vous lui affectez la valeur true, le cookie sera retransmis et votre forum fonctionnera correctement.

import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import {HttpClient} from '@angular/common/http';

export interface Course {
  nom: string;
  nb_etuds : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor(private http: HttpClient) { }

  getCourses() : Observable<Course[]> {
    return this.http.post<Course[]>(
      'http://127.0.0.1/xmobile_cours/getCourses.php',
      null,
      { withCredentials: true } // capture les cookies de session
    );
  }
}