Les services

1. Création

Commençons par créer notre premier service :

ng g service services/first 

Cela va créer notre nouveau fichier au chemin suivant :

src/app/services/first.service.ts.

import { Injectable } from '@angular/core'; 
 
@Injectable({ 
  providedin: 'root' 
}) 
export class FirstService { 
 
  constructor() { } 
} 

Seul le strict minimum est généré et la première chose qui se remarque est le décorateur ; il s’appelle Injectable, car un service n’est qu’une classe gérée par le mécanisme de gestion de dépendances. Pour faire court, l’injection de dépendances est un système qui décide de créer une nouvelle instance de classe lorsque cela est nécessaire et nous fournit la bonne instance lorsque nous en avons besoin. Les éléments gérés par ce mécanisme ne doivent pas être instanciés manuellement, mais nous verrons ceci en détail dans la section L’injection de dépendances.

Pour ce qui est des paramètres du décorateur, ils sont tous liés à l’injection de dépendances. Un seul est fourni pour le moment : providedIn. Cette option n’est pas obligatoire, mais elle permet de définir l’étendue d’une même instance au sein d’Angular. Ici, la valeur root indique qu’une même instance du service sera accessible partout dans l’application courante et donc que les ressources seront partagées pour tous. Pour le moment, nous allons laisser cette option telle quelle afin de nous concentrer sur l’utilisation d’un service.

2. Utiliser notre service

Dans un premier temps, nous cherchons à comprendre le rôle d’un service. Nous avons vu qu’ils sont fortement liés à la gestion des données, donc utilisons un service afin de récolter des données et de la partager à travers des composants.

Pour accéder à un service depuis un composant, il y a deux méthodes : soit en ajoutant un paramètre dans le constructeur de votre composant, soit en utilisant la fonction...

1. Introduction et rappel

Le langage JavaScript est limité à un seul fil d’exécution (ou thread), ce qui signifie que l’on ne peut exécuter qu’une seule tâche à la fois. Étant donné que le navigateur a besoin d’exécuter un bon nombre de tâches pour rafraîchir la page si nous devions lancer une tâche longue, celle-ci empêcherait toute autre opération et l’utilisateur verrait son interface gelée, dans l’incapacité d’effectuer le moindre mouvement. L’asynchronisme désigne la capacité du langage à gérer plusieurs tâches simultanément (ou presque) sans bloquer l’exécution du reste du programme.

2. Les Promises

const myAsyncTask = new Promise((resolve,reject)=>{ 
 
  try { 
    let...

1. Passer de l’un à l’autre

Dans le cas des services, les Observables sont fortement utilisés, que cela soit pour gérer une requête de données au serveur ou partager une donnée à travers diverses sections de notre application. Dans l’exemple qui suit, nous disposons d’un sujet privé, exposé publiquement via un Observable.

@Injectable({ 
  providedIn: 'root', 
}) 
export class FirstService { 
  private _searchResult: BehaviorSubject<string[]> = new 
BehaviorSubject<string[]>([]); 
  searchResult$: Observable<string[]> = 
this._searchResult.asObservable(); 
 
  searchResult = useObservable(searchResult$); 
  constructor() {} 
  sendNotification(e:string) {} 
} 

Maintenant que nous voulons utiliser les signaux depuis nos composants, au lieu d’exposer un Observable et d’avoir à y souscrire, nous pouvons créer un signal à partir de notre BehaviorSubject. Pour ce faire, nous pouvons remplacer la déclaration de searchResult$ par ce qui suit :

import { toSignal } from '@angular/core/rxjs-interop'; 
... 
searchResult = toSignal(_searchResult); 

1. Introduction

Lors de communications avec des API HTTP, on utilise généralement les méthodes natives de JavaScript telles que fetch, qui est moderne et flexible. Cependant, Angular nous propose un service nommé HttpClient, une abstraction un peu plus haut niveau qui va offrir une interface simplifiée pour les communications HTTP fournissant aussi quelques fonctionnalités non négligeables, comme le fait d’intégrer un système d’interception de requêtes, ou de faciliter la manipulation des réponses grâce aux Observables.

2. Créer le substitut d’une API

Lorsque l’on développe une application front-end qui consomme une API, il arrive que l’implémentation des fonctionnalités de l’API ne soit pas encore accessible. 

Dans ces situations, il est nécessaire de simuler les réponses de l’API pour tester et développer l’application. Une option serait de créer une véritable API temporaire, mais cela peut être coûteux en temps et en efforts. C’est ici qu’interviennent des solutions comme Postman ou MirageJS. Postman est un outil permettant de simuler des appels d’API manuellement. Habituellement utilisé pour tester les API, il intègre cependant une fonctionnalité de serveur local. Tandis que MirageJS offre une solution intégrée dans le code front-end, permettant de définir des routes et des réponses d’API simulées, ce qui simplifie grandement le développement et le test en local.

1. Router

Le service Router permet de gérer la navigation et les transitions de pages dans une application Angular. Il est utilisé pour définir les routes, naviguer entre les vues et interagir avec l’historique de navigation du navigateur. Avec Router, il est possible de récupérer les informations sur la route active, rediriger les utilisateurs et protéger certaines routes avec des gardes d’authentification. Le chapitre Naviguer entre les pages est dédié aux concepts avancés liés au Router, tels...

1. Fonctionnement

Angular utilise un système d’injecteurs hiérarchiques pour fournir des services. Ces injecteurs sont organisés en niveaux :

1. Configuration de l’API

Pour commencer, nous avons besoin d’une API fonctionnelle. Le choix de la technologie importe peu pour cet exercice : vous êtes libre d’utiliser l’outil qui vous convient le mieux. Ce qui est essentiel, c’est de mettre en place au minimum les routes suivantes :

Vous trouverez une suggestion de configuration pour MirageJS dans le repository GitHub du projet.

2. Implémenter les actions relatives aux tickets

export type GetBoardResponse...