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

Afficher des listes

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Implémentez et faites fonctionner un bout de code provenant de la documentation. Affichez une liste et découvrez comment utiliser un composant.
04:19

Transcription

Dans notre cas, on va avoir envie d'utiliser ces composants, parce que c'est quand même plus simple pour monter une interface. On va aller voir les listes, parce qu'en l’occurrence, on a bien un fonctionnement en liste et on aimerait bien intégrer des listes. Alors comment on va faire pour intégrer une liste ? Une liste, c'est très simple comme vous pouvez le voir ici. Une liste, ça va être ion-list puis après ça va être un bouton. On va l'afficher en faisant des itérations. On peut tout à fait récupérer ce bout de composant puis venir le ré-exploiter à l'intérieur de notre code. Comment le ré-exploiter ? C'est extrêmement rapide. On va coller ce petit bout de code et on va l'adapter en fonction de ce qu'on a à faire. On voit qu'il y a un ngFor qui est déjà prévu, qui ressemble à peu près à ce qu'on veut. On va simplement le remplacer par list. Pour le moment, on n'a rien sur le clic, on ne va pas faire ça. A l'intérieur ici, on peut récupérer le petit template qu'on a mis là. Pensez que vous pouvez faire du découpage de partial de partial. Par exemple les informations utilisateurs, on pourrait se dire que c'est un partial à part entière. Vous pouvez imbriquer autant de partial que vous le souhaitez, pensez-y, c'est extrêmement important. C'est bien mais ça ne résout pas notre ngIf qu'on a là. On fait notre itération sur les boutons et on va avoir le ngIf. Est-ce qu'on peut pas tout simplement faire une div comme ça ? Cela ne devrait pas poser de problème à l'interface donc on va pouvoir mettre le ngFor qu'on avait avant sur la div, on le redéplace, on le met là, on pense bien en bas à fermer parce qu'il faut qu'il y ait une imbrication sinon ça ne marche pas. On va récupérer le ngIf, on va le mettre sur le bouton pour ne pas afficher le bouton tout simplement, comme ça. En faisant ça, vous allez retirer votre ul li et vous allez avoir un composant ion-list avec des boutons à l'intérieur donc quelque chose de beaucoup plus joli et plus intéressant pour nous, et comme vous le voyez ici, on a des boutons à chaque fois. On remarque quelque chose, c'est qu'on a du padding sur les côtés, c'est un peu bizarre. Alors dans quoi c'est intégré ? C'est ça qu'il faut voir. On sait que c'est intégré sur la liste, liste.html et on sait que liste.html a un padding donc c'est simple de le supprimer pour avoir quelque chose qui prenne toute la largeur de l'écran. Pour ça, il suffira d'enlever le padding. Vous ferez attention parce que, sur ces composants-là, le rendu est comme ça, il y a toujours sur le côté un petit padding. Ce n'est pas la div qui fait ça, c'est vraiment le bouton qui se trouve à l'intérieur. Vous regarderez que le style de ce bouton là nous fait un petit padding sur le côté. On pourrait le supprimer, il y a un padding left à 16, si je l'enlève, ça va fonctionner, il n'y a pas de problème. Du coup, il faudra quand même ré-ajuster un peu si on veut que se soit le contenu qui bénéficie d'un padding etc... En tous cas, ça c'est le rendu qui est prévu sous Android donc vous pouvez garder celui-ci. Maintenant si je passe sur un iPhone, qu'est-ce qui va se passer ? Je vais recharger bien sûr mon interface, et ça je vais le mettre en Fit, on va même le mettre un peu plus, on va le mettre à 100%, on va aller vers la liste, vous voyez que c'est pareil. Sauf que, pour les listes ici, on a la petite flèche sur la droite parce que c'est prévu normalement pour naviguer encore vers quelque chose. Vous voyez qu'intégrer un composant, par exemple le composant list, est extrêmement simple, et qu'est ce qui se passe si j'en ai plusieurs ? Imaginons que j'ai énormément de développeurs dans mes datas. Pour émuler ça, il suffira de prendre un développeur au hasard. Vous venez le coller autant de fois que vous le souhaitez. L'idée, c'est d'en avoir plusieurs, on va même reprendre toute cette partie là, puis on va venir la coller aussi, comme ça on va avoir une itération beaucoup plus importante. L'idée, c'est de vous montrer que l'interface réagit toute seule, c'est-à-dire que si une liste est extrêmement grande, il n'y a pas de problème, vous allez avoir du scroll, c'est quasi automatique. Tout est géré par l'interface, ne vous inquiétez pas avec ça. Vous pouvez travailler avec des datas qui sont larges, c'est géré automatiquement. Vous avez la possibilité de vous déplacer et d'avoir des listes longues, de pouvoir slider tout seul. C'est fait de base, c'est vraiment automatisé par le framework, il y a aucun problème. Peu importe l'environnement sur lequel vous êtes, vous aurez ce comportement qui vous permet d'aller vers le bas ou d'aller vers le haut. Vous pouvez même essayer sur un téléphone, vous voyez que le rendu est vraiment génial.

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
 
Logiciel :
Ionic Ionic 2
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :25 janv. 2017
Durée :2h25 (30 vidéos)

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 !