Je suis nouveau dans Angular et je m'exerce en créant de petites applications. Mais maintenant, je souhaite me connecter à une base de données car pour le moment, tout est écrit en dur dans le code (ce qui n'est pas pratique pour avoir quelque chose de simple et adaptable). En bref, je viens vous demander comment faire et aussi je ne sais pas si je suis dans le bon canal.

Dans mon projet, voici ce qui nous intéresse :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FaceSnap } from '../models/face-snap.model';

@Injectable({
  providedIn: 'root'
})
export class FaceSnapsService {
  private apiUrl = 'https://votre-api.com/face-snaps';

  constructor(private http: HttpClient) {}

  getAllFaceSnaps(): Observable<FaceSnap[]> {
    return this.http.get<FaceSnap[]>(this.apiUrl);
  }

  getFaceSnapById(faceSnapId: number): Observable<FaceSnap> {
    return this.http.get<FaceSnap>(`${this.apiUrl}/${faceSnapId}`);
  }

  snapFaceSnapById(faceSnapId: number, snapType: 'snap' | 'unsnap'): Observable<FaceSnap> {
    return this.http.patch<FaceSnap>(`${this.apiUrl}/${faceSnapId}`, {
      snapType: snapType
    });
  }
}   

Étapes pour mettre en place la connexion à une base de données :

1. Configurer une API Backend :
   • Créez une API REST (par exemple, avec Node.js, Express, et une base de données comme MongoDB).
   • Implémentez les routes nécessaires pour récupérer, ajouter, mettre à jour les FaceSnaps.
2. Installer HttpClientModule dans Angular :
   • Ajoutez HttpClientModule à votre application Angular. Modifiez app.module.ts :

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     declarations: [ ... ],
     imports: [
       ...,
       HttpClientModule
     ],
     providers: [ ... ],
     bootstrap: [ ... ]
   })
   export class AppModule { }           

3. Modifier FaceSnapsService pour utiliser HttpClient :
   • Remplacez les données statiques par des appels à l'API dans votre service.
4. Mettre à jour les composants pour utiliser le service :
   • Modifiez vos composants pour qu'ils utilisent les méthodes du service FaceSnapsService pour récupérer les données depuis l'API.
5. Tester votre application :
   • Vérifiez que votre application Angular récupère bien les données depuis l'API et les affiche correctement.

En suivant ces étapes, vous pourrez remplacer les informations codées en dur par une connexion à une base de données, rendant ainsi votre application plus flexible et évolutive.

Pour plus de détails, consultez le GitHub.

Bon courage et bonne programmation !