IONIC Section 5 - 5.6 Ajouter et charger une nouvelle page

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

Bonjour à tous, après avoir observé la façon dont Angular et Ionic fonctionnent ensemble, il est maintenant temps de s’exercer un peu. Ce que je vous conseille c’est de garder un terminal ouvert juste en dessous, il surveillera automatiquement votre code pour les modifications qu’il rebuildera et rechargera l’application lorsqu’il y aura des modifications apportées. Et vous pouvez saisir une deuxième fenêtre dans laquelle nous pourrons utiliser le CGI Angular pour générer des components avec « ng generate components » vous pouvez également saisir le raccourci « ng g c » vous pouvez générer un nouveau components dans votre application. Donc maintenant, on va concevoir une implémentation de livre de recette qui restera assez simple, donc essentiellement avoir une liste de recettes et si nous en tappons une, nous pouvons afficher les détails de cette recette, donc j’ajouterai un nouveau component que nous appellerons « les recettes » qui se chargera en tant que page(« ng g c recipes ». Bien sûr, les pages Angular ne sont que des components, mais nous pouvons utiliser le CLI Ionic pour le générer, et si on entre la commande « ionic generate », vous pouvez choisir parmi différentes propositions que vous pouvez créer. Et nous on va sélectionner « page », et c’est à ce moment que nous pouvons donner un nom à notre page, et donc « recipes » qu’on exécute. Une fois le chargement terminé, nous pouvons observer l’ajout d’un nouveau dossier dans notre projet qui correspond avec le nom de la page que nous avons choisie. Dans ce dossier nous retrouvons donc plusieurs fichiers de type TS, SCSS, HTML par exemple. Maintenant, si on revient sur notre fichier « app-routing.module.ts », on va supprimé le component « home »  avec lequel on supprimera également ce chemin et la configuration de routage pour que nous n’ayons que le chemin racine où nous souhaitons maintenant rediriger nos recettes, puis le chemin de nos recettes où nous avons notre chargement. Et dans le fichier « recipes.module.ts », nous avons simplement rendu la page de recette. Ce fichier est un component que nous pouvons utiliser comme un component Angular dans notre page HTML, dans laquelle nous retrouvons notre entête avec « ion-header », puis on va ajouter un paragraphe « La page des recettes fonctionnent !» entre nos balises « ion-content ». Donc cette page est bien chargée grâce à notre fichier « app-routing.module.ts ». Et donc on va jeter un coup d’oeil à notre page, mais avant cela je vais aller dans le fichier « app-routing.module.ts » et je vais modifier la redirection par « recipes ». Et voilà notre page est parfaitement reliée, et se sera tout concernant cette vidéo.