IONIC Section 4 - 4.17 Utilisation des components du contrôleur
Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !Nous arrivons au bout de notre application de démonstration. Avant de passer à Angular pour la suite du cours, intéressons-nous à une dernière catégorie de composants Ionic qui se comportent un peu différemment des autres : les Controller Components. Ils nous permettront, par exemple, d'afficher une alerte stylée lorsqu'une saisie est invalide.
De alert() natif à ion-alert
Une première approche consiste à utiliser l'alerte native du navigateur. Juste avant le return de notre validation dans app.js, on peut écrire alert('Valeur invalide');. Si on recharge l'application avec des champs vides, le navigateur affiche bien le pop-up par défaut. C'est fonctionnel, mais visuellement décevant : aucune cohérence avec le reste de l'interface Ionic.
La documentation Ionic propose un composant dédié, ion-alert, avec une variante pour JavaScript et une autre pour Angular. Avec Angular, ce sera encore plus simple, mais pour l'instant restons sur l'approche JavaScript. On commence par ajouter une balise <ion-alert id="alert"></ion-alert> dans le HTML, juste avant la fin du contenu. Cette balise n'affichera rien tant qu'on ne la pilote pas en JavaScript.
Dans app.js, on récupère ce contrôleur avec const alert = document.querySelector('#alert');. Là où on faisait la validation, on remplace l'alerte native par une configuration plus riche :
alert.header = 'Entrée non valide';alert.message = 'Veuillez saisir un motif et un montant valide.';alert.buttons = ['OK'];document.body.appendChild(alert);puisalert.present();
La méthode present() est essentielle : sans elle, l'alerte reste invisible. Une fois ce code en place, on rejoue le scénario : on clique sur « Ajouter une dépense » sans avoir rempli les champs et l'alerte Ionic apparaît, parfaitement intégrée au design. Sur grand écran, elle adopte un format desktop ; sur format mobile, elle s'affiche en mode bottom-sheet, prête pour un téléphone.
Voilà pour cette dernière vidéo de notre application JavaScript pure. Dans la suite, nous passerons enfin à Angular pour exploiter pleinement Ionic. À très vite.
En résumé
Cette leçon montre comment utiliser le composant Alert de Ionic pour valider les données saisies par l'utilisateur et afficher des messages d'alerte stylisés. Le composant Alert est un élément invisible du DOM qui fournit une fonctionnalité JavaScript en arrière-plan et s'intègre automatiquement au design de l'application (mobile et desktop). L'exemple pratique démontre comment créer une alerte avec header, message et boutons personnalisés, puis l'afficher avec la méthode `present()` lorsque la validation échoue.
Points clés
- Le composant ion-alert est invisible dans le DOM mais active une fonctionnalité JavaScript qui gère l'affichage de l'alerte
- Pour utiliser une alerte, ajoutez d'abord l'élément <ion-alert> dans le HTML, puis accédez-y via JavaScript avec document.querySelector('ion-alert')
- La méthode present() du composant affiche l'alerte à l'écran avec le style Ionic approprié
- Les propriétés configurable incluent header (titre), message (contenu), et buttons (tableau de boutons avec actions)
- Le composant Alert s'adapte automatiquement au design mobile et desktop grâce au framework Ionic
- C'est une meilleure alternative à l'alerte JavaScript basique du navigateur car elle s'intègre complètement au design de l'application
Questions fréquentes
Pourquoi le composant Alert n'affiche-t-il rien au départ dans l'application ?
Parce que c'est un élément invisible du DOM qui n'ajoute qu'une fonctionnalité JavaScript en arrière-plan. L'alerte ne s'affiche que lorsque vous appelez sa méthode present() pour la présenter à l'écran.
Comment accéder au composant Alert depuis le fichier JavaScript ?
Utilisez document.querySelector('ion-alert') pour obtenir une référence à l'élément Alert, puis vous pouvez appeler ses méthodes comme present() pour l'afficher à l'écran.
Quelles propriétés peut-on configurer sur une alerte Ionic ?
Selon la leçon, vous pouvez configurer un header (en-tête de l'alerte), un message (texte principal), et un tableau buttons pour définir les boutons d'action avec leurs étiquettes respectives.