Un système d'autocomplétion avec Angular

Dans ce tutoriel, je vous propose de réaliser un système d'autocomplétion simple avec Angular. Pour rappel, voici ce qu'est un système d'autocomplétion :

Lorsque l'utilisateur renseigne les termes de sa recherche, alors une liste de suggestions correspondantes lui est proposée. Dans ce tutoriel nous allons mettre en place un champ de recherche de Pokémons, qui est un exemple qui parle à tout le monde. 

Le système devra se déclencher dès que l'utilisateur saisit au moins un caractère dans le champ de recherche. Les suggestions affichées seront celles qui contiennent au moins une fois le terme de la recherche.

Avant de commencer à suivre ce tutoriel, outre le fait de connaître un minimum Angular, une connaissance préalable de la programmation réactive peut être un plus. Si vous savez déjà ce qu'est un Observable, ce serait mieux, mais vous pouvez quand même essayer de suivre le tutoriel. 

Les exemples de code ci-dessous sont en TypeScript, donc ce tutoriel nécessite un minimum de connaissance sur ce sujet également.

La première chose à faire, c'est de simuler une API qui renvoie une liste de Pokémons.

Angular propose un système plutôt sympathique pour démarrer vos projets avec un jeu de données initiales, distribué sous forme d'API au reste de votre application. Cela permet de simuler la communication avec un serveur distant même si vous n'en avez pas vraiment un. 

Cette simulation est possible grâce au module InMemoryWebApiModule de la bibliothèque angular-in-memory-web-api. Regardons tout de suite comment cela fonctionne.

Créer un fichier in-memory-data.service.ts, à côté de votre app.component.ts (nous allons essayer de garder un projet de petite taille, pour éviter toute confusion par la suite).

Voici le code de ce nouveau fichier :

Import {InMemoryDbService} from 'angular-in-memory-web-api';
Import {Pokemon} from 'mock-pokemon';
            
Export class InMemoryDataService implements InMemoryDbService {
 createdDB() {
  let pokemons = POKEMONS;
  return {pokemons};
 }
}

Contrairement aux apparences, ce service fait plus que de simplement renvoyer une liste de Pokémons.

La classe InMemoryDataService implémente l'interface InMemoryDataService, qui nécessite d'implémenter la méthode createDb. Cette méthode permet de simuler une petite base de données et une API pour notre application.

Cette API met en place plusieurs points de terminaisons sur lesquels on peut effectuer des requêtes :

• GET api/pokemons // renvoie tous les pokémons
• GET api/pokemons/1 // renvoie le pokémon avec l'identifiant 1
• PUT api/pokemons/1 // modifie le pokémon avec l'identifiant 1
• GET api/heroes?name=^j // retourne les pokémons dont la propriété 'name' commence par 'j'

Bien pratique, n'est-ce pas ? Il est possible de faire toutes les requêtes imaginables pour une petite application de démonstration : ajout, suppression, recherche, modification, etc.

Merci Angular ! 

Cependant, il y a un fichier que je ne vous ai pas encore donné, c'est la liste des Pokémons eux-mêmes.

Comme il s'agit d'un fichier très long qui exporte simplement un JSON, voici le lien où vous pourrez récupérer la liste des Pokémons. Créez donc un fichier mock-pokemon.ts et copiez-collez le contenu à l'intérieur.

Vous aurez aussi besoin de la classe qui modélise un Pokémon au sein de notre application. Le lien se trouve ici. De la même manière, créer un fichier pokemon.ts et copier-coller le contenu à l'intérieur.

Il ne nous reste plus qu'à déclarer notre API simulée auprès du reste de l'application. Pour cela, il est recommandé d'enregistrer les services globaux à toute l'application dans la liste imports du module racine :

// … 
// Importations pour charger et configurer l'API simulée. 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service'; 
            
 // … 
@NgModule({ 
 imports: [ 
  // …  
  HttpModule, 
  InMemoryWebApiModule.forRoot(InMemoryDataService),
 ], 
// …

La méthode de configuration forRoot prend en paramètre la classe InMemoryDataService, qui apprête la base de données en mémoire avec les données du service.

Voilà, notre API est prête à être utilisée, au boulot ! 

Commençons par mettre l'accent sur la propriété searchTerms du début.

La classe subject n'appartient pas à Angular, mais à la bibliothèque RxJS. C'est une classe particulière qui va nous permettre de stocker les recherches successives de l'utilisateur dans un tableau de chaîne de caractères, sous la forme d'un Observable, c'est-à-dire avec une notion de décalage dans le temps. Nous allons voir en quoi cela va nous être utile. Retenez que la classe Subject hérite d'Observable, et donc searchTerms est bien un Observable.

C'est la propriété searchTerms qui permet de stocker les recherches successives. Chaque appel à la méthode Search ajoute une nouvelle chaîne de caractères à SearchTerms. On utilise ensuite la fonction next, car SearchTerms n'est pas un tableau (auquel cas, on aurait pu utiliser la fonction push réservée au simple tableau, tout simplement).

Un Subject est un Observable : c'est ce qui va nous permettre de transformer le flux de terme de recherche en un flux de tableau de Pokémons, et d'affecter le résultat à la propriété pokemons ! C'est la méthode ngOnInit qui s'occupe de ça.

Le code de cette méthode peut paraitre compliqué, mais rassurez-vous, il y a une explication. En fait, la problématique est la suivante : si nous passons chaque nouvelle saisie de l'utilisateur au service PokemonSearchService, nous allons déclencher une tempête de requête http ! Et ce n'est pas une bonne idée, nous ne voulons pas surcharger inutilement notre API.

Heureusement nous pouvons réduire ce flux de requêtes grâce à un certain nombre d'opérateurs. Nous faisons moins d'appels au PokemonsSearchService, tout en obtenant toujours des résultats aussi rapides. Voici comment :

Vous avez raison, au sens où, l'utilisation des Promesses est plus simple pour des cas d'utilisation peu poussés. La principale raison d'utiliser RxJS dans notre cas, c'est de s'assurer de l'ordre de retour des requêtes. En effet, RxJS restitue nativement l'ordre des appels, contrairement aux Promesses avec lesquelles il faut gérer à la main l'asynchronisme !

Le lien suivant explique très bien cette différence fondamentale entre les deux. Attention, les explications sont dans la langue de Shakespeare. 

Avant de pouvoir profiter de notre nouvelle fonctionnalité de recherche, nous devons encore importer les opérateurs RxJS nécessaires. Les opérateurs RxJS ne sont pas tous disponibles de base dans Angular, et nous devons importer nous-même ceux qui manquent. Pour cela, il faut ajouter les déclarations correspondantes au sommet du ficher pokemon-search.component.ts.

Cependant, même si cette façon de faire est tout à fait acceptable, cela pollue le début de notre fichier avec une longue liste d'importations. Nous adopterons une approche différente dans cet exemple : nous allons combiner toutes les extensions d'Observables que notre application nécessite dans un fichier unique d'importation. Ce fichier se nommera rxjs-extensions.ts, à placer avec les autres fichiers sources de votre projet :

// Les extensions de la classe Observable
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
            
// Les opérateurs d'Observable
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

Ensuite, nous chargeons le tout en important rxjs-extensions.ts au sommet de votre module racine, normalement contenu dans le fichier app.module.ts. Maintenant les opérateurs sont disponibles dans toute l'application !

import './rxjs-extensions';

C'est plus propre comme ça non ? Enfin, vous faites comme vous voulez …