IONIC - 3.2 Réalisation d'un projet

Maintenant que nous avons télécharger Ionic, nous pouvons ouvrir et consulter le dossier projet que nous avons créer. Le voici, et nous y retrouvons à l’intérieur plusieurs dossiers et également des fichiers, là par exemple nous avons les packages, nous, on va aller directement dans le dossier source, on va aller dans le sous-dossier « app», et consulter la page HTML, et très vite on s’aperçoit qu’il y a des balises HTML assez particulières. Effectivement, par exemple, la balise « ion-app» c’est une balise mais avec le component Ionic au début. Mais pas de panique, vous retrouverez tous ces components dans la documentation sur le site officiel de « ionicframework.com», qvous allez retrouver l’ensemble de la doc avec les installations, Ui Component, Native APIs, Angular, React, Vue et CLI. Vous ne serez pas laissé seul à l’abandon. De notre coté nous allons nous dirigez dans la page HTML de « home.page.html» et A l’intérieur on y retrouve le title de la page juste ici « ion-title», ainsi que le title de la barre d’outil « toolbar». Et donc nous, on va essayé une modification que nous pouvons apportez. Alors ceci on supprime, on va garder du texte avec la balise p comme ceci, on va retirer ce qui ne nous intéresse pas, comme ça, et on va ajouter « voici un texte», tout simplement. Et juste en dessous on va mettre un component Ionic, donc « ion-button», on va mettre « cliquez ici» on ferme la balise, et on va rajouter dans cette balise d’ouverture du code Angular. Tous simplement, on va lui dire, que lorsqu’on clic dessus, on va mettre un paramètre « onChangeText()» et on va voir ce que cela donne. Maintenant on va sur la page « home.page.ts» on va alors écrire notre programme, on va déclarer « text = ‘Défaut début de texte’, comme ceci, juste en dessous, on va mettre notre méthode « onChangeText» et à l’intérieur on va mettre « this.text= ‘changé’;». Tout simplement, lorsqu’on clic sur le bouton, le texte sera changé. On oublie pas les parenthèses, je les ferme. Et voila, donc je remplace le texte en écrivant la variable directement avec text. Et voilà je clic ici et le texte a bien été changé. Et voilà se sera tout pour notre début de projet je vous attends dans la prochaine vidéo pour la suite de ce projet.