Skip to main content

API sur Angular

Base​

Sous Angular, pour appeler des API, il faut créer un service qui retourne un Observable.

Vous pouvez générer un service avec la commande suivante :

ng generate service dossier/mon-service

Pour suffixer automatiquement le nom avec Service, pensez à configurer cela dans le fichier angular.json.

Une fonction utilisant un Observable (équivalent à une tâche asynchrone, pour vulgariser) ressemble à ceci :

getArticles(): Observable<any> {
  return this.http.get<any>("http://localhost:3000/articles");
}

Pour utiliser HttpClient, vous devez l’injecter dans le constructeur du service :

constructor(private http: HttpClient) {}
Attention

N’oubliez pas d’ajouter le provider HttpClient dans le fichier app.config.ts :

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
  ]
};

Injecter le service dans un composant​

Exemple :

export class ArticleListComponent {
  articles: any[] = [];

  // Injection de ArticleService
  constructor(private articleService: ArticleService) {}
}

Appeler un Observable​

Exemple d’appel avec .subscribe() :

this.articleService.getArticles().subscribe({
  next: (response) => {
    console.log(response);
  },
  error: (err) => {
    console.error(err);
  }
});