IONIC - 3.2 Réalisation d'un projet

Maintenant que Ionic est installé, nous pouvons ouvrir et explorer le dossier du projet que nous venons de créer. À l'intérieur, on retrouve plusieurs dossiers et fichiers, notamment ceux liés aux paquets. Pour commencer, dirigeons-nous directement dans le dossier src, puis dans le sous-dossier app, afin de consulter la page HTML. On remarque très vite que certaines balises HTML sont particulières : par exemple, <ion-app> est une balise standard préfixée par le composant Ionic. Pas de panique, l'ensemble de ces composants est documenté sur le site officiel ionicframework.com, où vous retrouverez l'installation, les UI Components, les Native APIs ainsi que les sections Angular, React, Vue et CLI.

Modifier la page d'accueil

Ouvrons maintenant le fichier home.page.html. On y retrouve le titre de la page dans la balise <ion-title>, ainsi que le titre de la barre d'outils dans <ion-toolbar>. Apportons quelques modifications : on supprime le contenu existant, on conserve une simple balise <p> avec le texte « voici un texte », puis on ajoute juste en dessous un composant Ionic <ion-button> avec le libellé « cliquez ici ». Dans la balise d'ouverture du bouton, on rajoute une liaison Angular pour gérer le clic.

Voici le code à insérer dans le template :

<p>{{ text }}</p>
<ion-button (click)="onChangeText()">cliquez ici</ion-button>

Passons maintenant au fichier home.page.ts. Nous y déclarons une propriété text initialisée à « Défaut début de texte », puis nous écrivons la méthode onChangeText() qui modifie cette valeur lorsque l'utilisateur clique sur le bouton :

text = 'Défaut début de texte';

onChangeText() {
  this.text = 'changé';
}

Le texte affiché dans la balise <p> est lié à la variable text via l'interpolation Angular {{ text }}. Lorsqu'on clique sur le bouton, la méthode est déclenchée et le texte est remplacé par « changé ». Le rendu confirme bien le bon fonctionnement de cette liaison entre la vue et le contrôleur. Voilà pour ce début de projet, je vous attends dans la prochaine vidéo pour la suite !