IONIC Section 5 - 5.9 Gestion de l'état avec les services

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, maintenant, nous allons ajouter un service Angular et encore une fois, nous pouvons le générer à nouveau avec la commande « ionic generate ». Si vous appuyez sur entrée, vous verrez qu’il est possible de sélectionner un service. Concernant le nom du service nous allons saisir « recipes/recipes » c’est ce qui nous donnera un nouveau service de recettes dans notre dossier « recipes ». Dans ce fichier « recipes.services.ts » nous avons « @injectable »fournit dans route, ce qui garantit que cette information est fournie à l’échelle de l’application. Nous pouvons utiliser la même instance du service dans n’importe quelle component, n’importe quelle page de l’application entière. Bien entendu, il est important d’utiliser la même instance. Ainsi, si les données de nos recettes changent, elles sont reflétées dans tous les components utilisant cette instance de service spécifique. Je vais maintenant prendre les recettes que j’ai définies dans la page des recettes « recipes.page.ts » en les copiant puis en les copiant ici au service des recettes. Donc il est bien dans un premier temps d’avoir les recettes, maintenant nous en avons besoin dans la page des recettes, mais comment faire ? Et bien par défaut, les propriétés sont publiques, cependant, nous allons en faire une propriété privée, de sorte que nous ne puissions pas y accéder Mais on va ajouter à cela la méthode « getAllRecipes() { return; } », vous pouvez nommer ce que vous voulez, et là on va retourner, disons une copie de ce tableau de recette, de sorte que si nous éditions ensuite le tableau renvoyé par cette méthode à l’intérieur du component , nous n’éditerons pas le tableau d’origine, cela est lié au fonctionnement des tableaux et d' objets en JavaScript et au fait qu’il s’agit de type de référence et non de primitives. Donc ici, je vais intégrer la méthode « [ …this.recipes]; » dans notre fonction. Cela permet d’extraire tous les éléments de ce tableau et l’ajoute ensuite à un nouveau tableau, puis retourne ce nouveau tableau qui est une copie parfaite de l’ancien tableau, pas des objets du tableau mais du tableau lui-même. Une nouvelle fois, s’il y a des notions nécessaires à comprendre concernant Javascript, je vous conseille fortement de visionner les vidéos concernant cette techno, ce cours permet de vous initier mais aussi de rafraîchir un peu certaines notions, donc n’hésitez surtout pas. Maintenant on peut ajouter en dessous, la méthode « getRecipe(recipeId : string) » qui nécessite un argument « recipeId » de type « string », ce qui renverra une seule recette pour cet ID. et en dessous on va saisir « { return this.recipes.find(recipe => { return recipe.id === recipeId }); } ». Donc ici, on souhaite retourner ces recettes et ensuite on souhaite utiliser la méthode find qui est une méthode JavaScript par défaut que nous pouvons utiliser sur des tableau, et cette méthode prend une fonction qui sera exécutée sur tous les éléments du tableau, puis si cette fonction retourne « true », en fait, nous disons à « find » que c’est l’objet que nous recherchons et qu’il arrêtera l’exécution sans exécuter find sur tout autre élément du tableau et nous redonnera cet élément sur lequel il s'exécutera à la place. Donc, la fonction que je passe ici prend la recette en tant qu’entrée car encore une fois, elle éxecute cette fonction sur chaque élément du tableau. Il s’agit d’un tableau de recettes. Ainsi, chaque exécution d’une fonction correspond à une recette unique pour retourner « true » si c’est la recette qu’on cherche, sinon faux et donc ici dans cet état, je vais comparer l’ID de la recette qu’on regarde avec « recipeId » que j’ai eu comme argument et s’ils sont égaux, lors j’ai la recette qu’on veut lui la retourne. Maintenant, ici comme pour le tableau, je vais créer une copie de cet objet « this.recipes » en encerclant tout cet appel ici entre des accolades, puis utiliser l’opérateur de diffusion ce qui donne  return « { …this.recipes.find(recipe => { return recipe.id === recipeId })}; } », pour extraire toutes les propriétés de l’objet de recette et les ajouter dans un nouvel objet. C’est donc le service qu’on peut utiliser dans la page des recettes et dans la page de détails des recettes. C’est déjà la gestion des états d’Angular en action. En soit ce n’est pas très compliqué, mais écrire une logique similaire dans votre application serait déjà plus complexe et le deviendra de plus en plus tout au long du parcours où nous aurons une gestion d’état de plus en plus complexe. Donc notre service de recettes peut être utilisé dans nos components et, comme vous le savez, nous pouvons accéder à un service en l’injectant dans un component. Donc ici dans le fichier « recipe.page.ts », on va injecter le service de recette, et pour cela, vous devez définir le type. Donc dans la méthode « constructor », on va faire : « constructor(private recipesService : recipesService) {}. Et bien sûr, vous devez aussi l’importer à partir de votre fichier « import { RecipesService } from ‘/recipes.service’; Donc nous sommes en train d’injecter le service de recettes en utilisant ce raccourci typographique, dans lequel on assigne automatiquement l’argument que nous obtenons ici à une propriété privée de toute la classe, de sorte que nous puissions utiliser le service de recettes n’importe où dans le répertoire. Et notre « ngOnInit » est donc toujours idéal pour le travail d’initialisation, lors ici, on veut appeler le service de recette avec la méthode « getAllRecipes », ce qui nous donne « ngOnInit() { this.recipesService.getAllRecipes(); } »cela retourne un tableau de recettes et on veut le stocker dans ce component, donc juste en dessous de « export », on va déclarer notre tableau « recipes : recipe[]; » et donc ajouter « ngOnInit() { this.recipes = this.recipesService.getAllRecipes(); } », afin que votre propriété locale correspondant aux recettes envoyées par notre méthode « getAllRecipes ». Maintenant, tout ce que cela nous donne, c’est que si je sauvegarde maintenant, cela nous donnera le même aspect qu’auparavant, mais nous pourrons également puiser dans une seule recette et c’est ce que nous allons faire ensuite dans la prochaine vidéo.