Créer une application mobile avec Ionic 2 et Angular 2

Exploiter un type modal

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Gagnez de la place grâce aux modals de Ionic et affichez des informations sans avoir besoin de naviguer. Réalisez cette partie à l'aide d'un composant.
03:33

Transcription

On retrouve assez souvent dans les interfaces mobiles les Modals, que vous allez trouver sous les composants L'implémentation n'est pas très compliquée. On a un espèce de framework, un contrôleur pour les Modals qui s'appelle ModalController. Il va falloir de temps en temps venir importer quelque chose qui provient de Ionic Angular. Ne vous inquiétez pas, c'est normal. Dans Ionic Angular, plein de modules sont déjà prévus pour faire du contrôle d'interface. Ici, petit exemple, quand vous avez cliqué sur quelqu'un, ça va vous ouvrir une page provisoire que vous pourrez fermer avec une croix. Tout ça c'est déjà prévu, il y a rien à faire en fait. Vous allez créer une page, vous allez la récupérer, par exemple ModalPage. Quand vous aller cliquer sur la ModalController, ça va simplement venir ouvrir sans aucun problème, il faudra juste câbler le clic etc... Vous savez déjà le faire, c'est assez simple, alors si on voulait le réaliser, comment est-ce qu'on ferait ? On pourrait le réaliser sur la Home, ici on pourrait lui dire comme ça, de venir ouvrir une Modal plutôt que d'aller naviguer vers la liste. Ce serait très simple à réaliser, vous voyez que là je vais venir importer ModalController. Ça provient du même paquet qu'au-dessus, je vais chaîner les deux, voilà, je vais récupérer ModalController puis ici je vais faire une privée, private, comme ça, ModalCtrl. Essayez de respecter ce que nous demande Ionic, ModalController et là on va simplement lui dire ModalController. (alors vous voyez que c'est create) Vous êtes en train de créer en fait. Vous devez mettre ça dans une variable. On fait un let pour que se soit scopé uniquement à cette fonction là, let modal et puis juste derrière vous allez utiliser aussi la Modal en lui disant simplement present. On va demander à cette Modal de venir à l'écran et d'être directement display. Vous allez voir que tout est automatisé, même la croix etc.. Vraiment tout est automatisé directement pour vous. Vous n'avez pas besoin de faire grand chose pour faire apparaître cette Modal. Quand on va cliquer, ça va apparaître. Par contre, vous voyez, le problème c'est qu'on n'a pas de croix. Pourquoi ? Parce qu'on est venu surcharger un peu la page. Si vous regardez les sources dans la démo, vous allez voir qu'on peut à chaque fois accéder aux sources. On a ici dans la Modal, un petit ion-icon qui nous propose de pouvoir tout simplement faire un dismiss de la Modal. Vous ferez attention parce qu'il y a un peu de code quand même. Vous avez le code pour le bouton, je vous laisserai implémenter tranquillement ça. Le dismiss qui est là, qu'est ce qu'il va faire ? Vous regarderez dans le ts, le pages.ts qu'on a ici. Qu'est-ce qu'il va faire ? On va voir que le dismiss est un peu plus bas. On peut le chercher, voila dismiss. Il utilise ViewController pour faire un dismiss, Après, n'hésitez pas à utiliser les outil de recherche de votre navigateur. On voit que c'est une classe ViewController et cette ViewController est insérée et fait partie de Ionic Angular. Il y a ici un tout peu de code à rajouter pour faire fonctionner la Modal pleinement, vous avez le début. L'exercice est d'aller au bout donc venez rajouter sur la page. En l’occurrence se sera la list ici, vous ajoutez la dépendance au ViewController, vous faites un dismiss et vous venez câbler à l'intérieur du ion-header, la petite croix qui vous permet de fermer. Donc c'est très simple, vous voyez que tous les composants sont utilisables tels quels, on a juste à venir un peu les customiser.

Créer une application mobile avec Ionic 2 et Angular 2

Développez vos applications mobiles avec AngularJS et Ionic. Mettez en place un projet et exploitez les nombreuses possibilités offertes par l’écosystème Ionic.

2h25 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !