Bon passons à la pratique, et essayons d’enrichir quelque peu le composant app.component.ts de notre application. Je propose d’ajouter deux fonctionnalités que nous venons de voir :

  • Injecter une liste des Pokémons dans le composant.
  • Préparer une méthode qui devra gérer l’action lorsque l’utilisateur cliquera sur un Pokémon de cette liste.

Mais avant de vous laisser chercher tout seul, je me dois de vous donner deux choses:

  • Une classe permettant de modéliser un Pokémon.
  • Un fichier contenant quelques Pokémons à injecter dans notre composant, à titre d’exemple.

Le modèle

Créer un fichier pokemon.ts dans le dossier app de notre projet, avec le code donnée dans les extraits de code.

Cette classe a pour rôle de représenter un Pokémon dans notre application. Chaque Pokémon aura donc:

  • Id: un identifiant unique sous forme de nombre.
  • Hp: le nombre de points de vie du Pokémon.
  • Cp: le nombre de dégâts d’un Pokémon.
  • Name: un nom.
  • Picture: l’url d’une image représentant le Pokémon.
  • Types: un tableau contenant les types du Pokémon (Eau, Feu, Vol, etc…).
  • Created: la date de création du Pokémon.

Les données

Maintenant, créons un fichier mock-pokemons.ts qui contiendra les données de plusieurs Pokémons. Ce fichier doit être placé dans le dossier src/app (le fichier est un peu long, mais il s’agit simplement de données mises à disposition pour notre application). Etant donné que nous n’allons pas modifier ce fichier dans la suite du cours, je vous propose de le copier directement à partir des ressources données ci-dessous.

Comme vous pouvez le constater, ce fichier ne fait qu’exporter la constante POKEMONS, qui contient des données nécessaires pour notre application.

Bon, maintenant vous avez tous les éléments nécessaires pour améliorer le composant app.component.ts de notre application. Pour rappel, voici ce que vous devriez pouvoir faire:

  • Injecter une liste de Pokémons dans le composant.
  • Préparer une méthode qui devra gérer l’action lorsque l’utilisateur cliquera sur un Pokémon de cette liste.

A vous de jouer maintenant !

25. Correction

2 commentaires

  1. Salut,

    Je suis ta formation depuis quelques jours. Je dois avouer qu’elle est assez didactique et passionnante à suivre. C’est clair, limpide et pour le moment je ne comprends pas le préambule de la formation lorsque tu nous disais qu’Angular a été pour toi le langage le plus compliqué à apprendre (et je sens que je regrette déja cette affirmation).

    Bon tout ça pour dire que je trouve dommage que tu donnes l’exercice après les vidéos qui donne d’avance la solution. S’aurait été plus cool que tu nous laisse nous débrouiller en mettant l’exercice avant les explications précédentes. Peut-être nous expliquer comment on créer une constante et comment on l’importe parce-que ça si on sait pas c’est un peu chaud.

    Bref, je continue le cours qui reste génial. Merci !

    1. Salut François,

      Ton message me fait très plaisir ! 🙂
      Si l’apprentissage te paraît limpide, c’est que j’ai bien bosser. Parce-que à l’époque, je mettais casser les dents sur la documentation officielle ! Tant mieux si j’ai pu t’épargner tout ça.

      Du coup, j’ai bien noté tes remarques qui me semblent tout à fait pertinentes (explications avant l’exercice, et importation de constante), c’est surement une erreur de mon côté d’ailleurs. Je prendrai tout ça en compte lorsque je mettrai à jour la formation et le contenu du blog à jour pour Angular 8, dans les prochaines semaines.

      Merci pour tout,

      Et je te souhaite un excellent apprentissage pour la suite 🙂

      Simon.

Laisser un commentaire