Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

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

Conditionner l'affichage

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce à AngularJS 2, exploitez toute la syntaxe de vue existante. Ainsi, vous pourrez utiliser des conditions simples à mettre en place.
07:41

Transcription

Si vous avez retenu ce qu'on a dit juste avant ce qu'on vient de faire là, concrètement ce n'est pas bon. Il faut qu'on fasse quelque chose de beaucoup plus propre que cela il faut qu'on crée pour le coup ici, un composant qui soit un composant List un ListPartial qu'on va réutiliser. D'abord, pour être propre, on va supprimer ce List ici et puis je vais vous montrer comment on fait de l'itération ensuite je vous montrerai comment on fait du conditionnement parce qu'on peut conditionner les affichages. On peut aussi vérifier les infos et faire pas mal de choses avec Angular 2. Ici d'abord pour boucler, si vous avez installé les extensions de John Papa, (et je vous conseille vraiment de le faire, ça se trouve ici sur votre panneau d’extension et là, vous allez simplement taper Angular 2 à l'intérieur) vous allez avoir celui ci, Angular 2 qui est en fait fournit par John Papa Ce sont tous les Snippets, c'est à dire qu'on va pouvoir taper des petits bouts de trucs à l'intérieur de l'interface. Vous allez voir que ça va nous permettre d'auto-compléter. Installez ça parce que vous allez avoir accès à ça, ng2 et là vous avez vraiment les petites choses importantes, le jeu avec les class, les if, etc... On peut faire vraiment beaucoup de choses. Notamment pour faire des boucles, on va utiliser ng-for, ng-for ça va être let item (item va être un item de l'array) of list. Ça c'est bon parce qu'on l'appelle List donc c'est nickel. Maintenant à l'intérieur, on va pouvoir afficher les infos de chaque item en faisant par exemple item.name. Vous voyez que c'est très simple d'aller récupérer les informations sur un item qui est stocké dans une collection, item.rol. Là, vous allez avoir les informations. Vous rechargez votre page et vous allez voir qu'en vous rendant sur votre page List maintenant, vous allez avoir une vraie liste avec les 3 personnes que l'on a mis dans les datas, ça c'est génial. Vous voyez que là, hop une petite ligne et on s'est fait une itération. C'est facile, c'est simple, je vais donc le déplacer. Ça veut dire qu'il va falloir que je déplace pas mal de choses. Par quoi on commence ? On va commencer par se rendre dans projects et puis on va aller dans le listManager. Je vais ouvrir deux fenêtres et le laisser compiler tranquillement. Vous vous souvenez, on a utilisé generate pour une page, generate pour une liste donc là ce qu'on va utiliser, c'est component et on va l'appeler listPartial. ListPartial c'est L.i.s.t.P.a.r.t.i.a.l comme ça, puis on va lui dire de nous générer ce Partial là, ce composant là. Du coup, en retournant dans notre interface, on va bien avoir le List-partial qui apparaît. On va lui déplacer des infos. On sait que ça, ça va aller dans le List-partial qui se trouve là. On sait aussi qu'on a une partie de la logique, la récupération de datas, c'est-à-dire cette partie là qui va aller sur le Partial. On va devoir recréer tout ça. Vous pouvez y aller par déplacement je vous conseille même de retaper, ça va aussi vite que du déplacement. On va aller sur le List-partial.ts qui est le code de notre composant. Ici c'est pareil on peut lui faire, sans aucun problème, un import et puis le faire travailler exactement de la même manière que ce qu'on a fait avant. Ça veut dire qu'on va d'abord ici importer la data, on va en avoir besoin, attention, c'est Data comme ça, voila, on importe Data. Je vous conseille aussi de ranger un peu vos différentes informations pour que se soit assez propre, on pense bien ici à faire un private comme ça, data, et deux point data pour dire que ça pointe bien vers ça. Puis on pense aussi ici à se créer une public qui va être list. Pour le type, on lui dit que c'est un tableau et ni, comme ça on est persuadé de ce qu'on récupère et c'est vraiment important de faire ça. Vous allez mettre en place ce qu'on appelle un contrat entre le code de votre service et le code qui se trouve dans votre composant. Comme ça vous êtes tranquille, pour l'utiliser il suffit d'utiliser cette balise là, le selector list-partial. Où est-ce qu'on va l'utiliser ? On va l'utiliser à cet endroit là. Donc là comme ça, on s'est crée notre composant. C'est bien le code est propre et vous remarquez quelque chose c'est que la plupart du temps, on n'a aucun appel à aucun service à l'intérieur de nos pages. Nos pages vont être là juste pour donner de l'info sur quelle page tu vas quand tu cliques là, etc... des trucs très basiques. On pourrait même d'ailleurs déplacer tout ça à l'intérieur et n'avoir dans les ListPage qu'un constructeur qui soit vide et ici, des utilisations uniquement de Partial. Ce qui fait qu'on n'aurait quasiment rien dans les fichiers de page. C'est vraiment ce qu'il faut faire, faut arriver à ce niveau là de découpage, si vous voulez avoir une application performante. Est-ce qu'il ne manque pas quelque chose ? Si vous voulez être 10 et que vous commencez à avoir les bonnes façons de faire en tête, oui, il faut déclarer, on est obligé de venir déclarer. Ce composant, on ne l'a pas fait encore donc on va ici le déclarer sur ListPartialComponent et, pareil, il nous le met pas au bon endroit. Donc on va venir le remplacer puis là vous allez simplement le déclarer. Si vous le déclarez pas, souvenez-vous, ça ne marchera pas. Pensez bien à toujours prévoir une petite virgule à la fin des array déclaration parce que ça vous permet de rajouter le prochain sans avoir à faire une virgule au-dessus et vous vous évitez des problèmes. Quand on a fait ça, est-ce que ça fonctionne, est-ce qu'il n'y a pas de soucis ? Normalement il ne doit pas y avoir de souci, on va le laisser recharger. Bon il y avait certainement un build qui ne marchait pas, c'est normal puisqu'on était en train de faire du déplacement. Voilà, tout est revenu en ordre et effectivement on est bien maintenant sur une utilisation d'un composant. Alors comment je pourrais dire : tu affiches ou tu n'affiches pas ? On pourrait avoir ici dans nos objets, un Status et un Status qui soit un Booléen, 1 il est disponible, et puis 0 qui n'est pas disponible, voilà donc là on va faire comme ça. Status 0 donc Christophe n'est pas disponible aujourd'hui sur un projet. Status comme ça aussi à 1, Roby est disponible. Maintenant comment je fais pour conditionner de l'affichage ? Conditionner de l'affichage, en fait va être très simple. Vous allez vous baser sur une valeur existante et puis vous allez simplement la placer à l'intérieur de la boucle en disant : si c'est 0 tu ne l'affiches pas, si c'est 1 tu l'affiches. On pourrait faire tout ce qu'on veut, on pourrait même le mettre avec une classe. Par exemple vous allez pouvoir coder un ngIf, et vous allez dire item.status. Donc si item.status est vrai, tu l'affiches, sinon tu ne l'affiches pas Normalement, si tout se passe bien, on ne devrait pas avoir Christophe dans la liste parce que pour le moment, il n'est pas disponible. On va laisser l'application se recharger ou on va la recharger soi-même puis on va voir qu'il y a un problème, qu'est-ce qu'on nous dit ? On nous dit qu'il y a un parse error, pourquoi ? Alors ça c'est le gros gros problème que vous allez avoir assez souvent. Je vous explique ce qui se passe. Vous ne pouvez pas utiliser deux fois les sucres à l'intérieur d'une li. Par exemple ici, on a utilisé le sucre syntaxique pour le ngFor puis on a utilisé le sucre syntaxique pour le ngIf. Ça veut dire que ça va être un petit peu embêtant. Donc si vous avez envie de cacher une partie comme ça, vous serez par exemple obligé de sortir votre ngFor et de mettre votre ngFor sur une balise. Ce n'est pas très conventionnel parce que ça veut dire qu'on va avoir un problème, on va avoir une espèce de balise entre et normalement ce n'est pas vraiment autorisé en HTML, bon ce n'est pas grave pour l'exemple, mais c'est vrai que vous n'êtes pas censés faire ça. Vous n'êtes pas censé mettre une Div dans une ul donc il faudra trouver une méthode un petit peu plus sympa. Le soucis de la ul li, c'est qu'on est obligé de faire comme ça, le mieux ça serait de découper cela, de pas avoir de ul li, d'avoir autre chose. En l'occurrence ici si on fait ça, même si c'est vrai que ce n'est pas conventionnel ça fonctionne très bien effectivement pour le moment. On n'a pas Christophe parce qu'il n'est pas dans la liste. Vous voyez que ça encore, venir travailler sur de la donnée, venir mettre en place des cloisonnements en disant si c'est à 0 tu ne l'affiches pas, si c'est à 1 tu l'affiches, c'est très simple, il suffira de se baser sur de la data et de venir faire ici du travail dessus.

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 !