Ionic - 7.9 Créer le modèle Place et le service des lieux

Pour afficher des lieux dans la page de découverte, l'application a besoin d'une source de données. Cette leçon prépare cette source avec un service Angular, qui gère un tableau de lieux factices. Elle crée aussi un modèle, qui décrit la forme d'un lieu, pour rendre le code plus clair.

Créer le service de lieux

Un service Angular regroupe les données et les fonctions utiles à plusieurs composants. Une commande Ionic génère le service à l'endroit souhaité. Le fichier de test créé avec lui est supprimé, car il n'est pas nécessaire ici.

Le service contient un tableau privé de lieux. La méthode getPlaces retourne une copie de ce tableau, afin de protéger la liste d'origine.

Définir le modèle Place

Le modèle décrit à quoi ressemble un lieu. Il se place dans un fichier à côté du service, et exporte une classe Place. Son constructeur reçoit un identifiant de type chaîne, un titre, une description, une URL d'image de type chaîne, et un prix de type nombre.

Le mot public devant chaque paramètre du constructeur crée automatiquement la propriété correspondante, du même nom.

export class Place {
  constructor(
    public id: string,
    public title: string,
    public description: string,
    public imageUrl: string,
    public price: number
  ) {}
}

Ajouter trois lieux factices

Le service crée trois lieux avec le modèle Place. Le premier, identifié P1, se situe à Manhattan, dans le centre-ville de New York. Le deuxième, identifié B2 et nommé Chez Gusto, est présenté comme un endroit idéal pour manger au cœur de Paris.

Le troisième, identifié B3, est une plage de Rio, décrite comme un moment de fraîcheur au Brésil. Les deux derniers lieux reçoivent un prix, 54,79 pour le deuxième et 289 pour le troisième.

La page de découverte doit ensuite récupérer ces lieux pour les afficher. Le service peut être appelé depuis n'importe quel composant qui en a besoin.

En résumé

Le service de lieux fournit les données, et le modèle Place décrit leur structure. Le constructeur du modèle relie automatiquement chaque paramètre à une propriété. Trois lieux factices permettent de tester l'affichage avant d'utiliser de vraies données. La prochaine étape consiste à afficher ces lieux dans la page de découverte.

Points clés

• Le service garde les lieux dans un tableau privé.
• La méthode getPlaces retourne une copie de ce tableau.
• La classe Place décrit les champs d'un lieu.
• Le mot public dans le constructeur crée les propriétés automatiquement.
• Trois lieux factices servent à tester l'affichage.

Questions fréquentes

Pourquoi créer un modèle si les données sont factices ?

Le modèle fixe la forme d'un lieu. Les données factices et les vraies données auront ainsi la même structure.

Pourquoi retourner une copie du tableau ?

La copie protège le tableau d'origine. Un composant qui modifie la copie ne change pas directement la liste du service.

Faut-il garder le fichier de test du service ?

Non. Dans la vidéo, le fichier de test est supprimé, car il n'est pas utilisé dans cette leçon.