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

Utiliser les services

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les services permettent de limiter la quantité de code dans le contrôleur de vos composants. Étant particulièrement utiles et pratiques, utilisez-les sans restriction.
07:39

Transcription

On a découvert 2 types d'implémentation c'est-à-dire voilà on a vu ensemble effectivement qu'on pouvait faire des pages, des composants et on aussi créé pour le moment un provider qui s'appelle data. Ce provider ne fait rien pour le moment. D'ailleurs, on ne l'a même pas déclaré et pour le moment, il ne fonctionne pas. Comment je vais faire si j'ai envie de créer un service ? D'abord il va me servir à quoi ? Ce service dans notre cas, on va l'utiliser sur la page list qu'on a ici et sur cette page on va venir récupérer de la data depuis le service. Ça veut dire que le service va nous fournir de l'information. Mais le service pourra aussi travailler cette information. Un service concrètement, c'est la même chose que vous alliez coder du code directement ou dans votre composant et vous allez l'extraire. Et en l'extrayant, vous allez vous permettre de le réutiliser un peu partout. Là votre application va devenir assez intéressante. Ça veut dire que si je veux l'utiliser, il va falloir que je l'importe. D'abord c'est la première chose donc je vais faire un import data. Vous remarquez qu'effectivement data, il se trouve dans les providers donc ça c'est bon. Puis ensuite je vais devoir l'utiliser ici à l'intérieur en faisant une injection. Alors l'injection de dépendance, elle est assez simple. Partez toujours de private parce que c'est quand même plus simple d'avoir des choses en privé. Mais vous pouvez le mettre en public si vous le souhaitez. Généralement les choses sont mises en public. Ça vous allez l'utiliser à l'intérieur puis vous n'allez pas faire de surcharge en général on ne le fait pas. Partez sur des injections privées. Puis ici on va nommer, donc ça c'est la variable, qui sera accessible. Et enfin comme ça avec deux points, vous allez venir tipper. Alors tipper c'est important, ça veut dire que data correspond au service data, au provider data. Ça, ça permet à angular de faire proprement cette injection de dépendance donc vous allez récupérer dans la variable data qui est ici directement service data. On pourrait essayer. Tout ce qu'il faudrait faire ici ce serait pourquoi pas un console.log de data.getData. Bien sûr le getData, il va falloir l'exposer. Pour le momenton ne l'a pas, c'est pour ça d'ailleurs qu'il passe en rouge donc on va se rendre sur le service data. Puis dans le service data ici, on va créer une nouvelle méthode qui va s'appeler getData. GetData qu'est-ce que ça va faire ? Ça va retourner une string data. Quand vous savez ce que ça retourne, vous pouvez aussi tipper les retours. Vous pouvez dire que ce qui part en sortie de la fonction c'est de la string. Ce qui fait qu si ici du coup je me mets à dire que ça va retourner 34, c'est pas bon. Pourquoi ? Parce que ça doit retourner de la string. Ça c'est vraiment intéressant quand vous codez parce que ça vous permet d'améliorer un peu le travail pour vous et les développeurs qui travaillent avec vous. Imaginons que j'enregistre ça comme ça du coup je devrais avoir dans ma console ici data qui apparaît sur mon navigateur. On va se rendre suer le navigateur. Ça a recompilé. On va attendre qu'il recharge puisqu'il est en train de recharger évidemment. On va aller sur la liste et on va se rendre compte que ça va nous crier dessus. Qu'est-ce que ça nous dit ? Attention parce que t'es en train d'essayer d'appeler un service mais il n'y a pas de provider. En fait il a raison. Je vous explique comment ça marche. Vous avez déclaré un service, c'est bien. Mais ce service maintenant qu'il est déclaré dans le code, et qu'il est même utilisé quelque part, il faut aussi le déclarer dans le bout de strap de votre application. Ça, vous vous en souvenez, ça se passe où ? Ça se passe dans app. Dans app, on va aller dans le app.module et ici on va se rendre compte que c'est prévu, il y a un emplacement pour les providers. Alors c'est un tableau qui, pour le moment est mal formaté c'est-à-dire qu'on vous met tout à la ligne donc pensez à le mettre comme ça, c'est-à-dire à avoir la ligne de provide ici sur une seule ligne. Placez une virgule parce que c'est important aussi et faites la même chose ici donc vous allez vous rajouter des providers puis vous allez faire vos imports de data, data provider. Il me l'a mis tout en haut mais ce n'est pas très grave, on va le récupérer puis on va le remettre au niveau des commentaires car ce sera plus simple. On va aussi faire quelque chose de propre. Et puis on va le récupérer et on va le mettre dans les providers parce que c'est un vrai provider, on a besoin qu'Angular le connaisse, pour pouvoir l'injecter. Une fois que vous l'aurez injecté comme ça, et que, du coup, vous aurez déclaré l'injection, il n'y aura plus de problème. Le bild va se terminer. Vous allez avoir une application fonctionnelle et vous allez pouvoir vous rendre sur cette page et normalement si vous allez en console, vous verrez que vous avez en fait consommé une fonction du service. La fonction du service vous retourne une information et là vous avez bien data qui apparaît. Comme vous avez maintenant ça entre les mains, vous comprenez ce qu'on va faire c'est qu'ici on va essayer de retourner une collection d'objets. Alors on va retourner une collection comme ça. La collection c'est ça en fait. Concrètement c'est juste un tableau. Si vous mettez any à l'intérieur, ça vous permet de ne aps avoir à spécifier quel type d'objet vous retournez. Vous retournez tout et n'importe quoi et du coup ici on va pouvoir lui mettre aussi comme ça un petit objet et puis pourquoi pas lui mettre différents items. Ça peut être soit des objets purs et c'est bien parce que comme ça on peut donner des noms, par exemple... Alors attention à l'autocomplétion. On va pouvoir même mettre name par exemple comme ça, Julien et puis, pourquoi pas, role comme ça et là on va mettre lead-dev. Et puis on va en mettre un autre, on va mettre aussi Christophe qui va être pour le coup ici un dev junior, et puis on va en mettre encore un autre. On va mettre Roby qui est également un dev junior. Donc là on a trois objets retournés qui nous retournent de la data, au travers de la fonction getData. Ce qui fait qu'en modifiant uniquement cette partie-là, si j'utilisais getData dans 10 pages différentes, je continuerai à avoir une persistance de l'information et en allant vers la page effectivement mon getData récupère les informations. Donc ça c'est parfait et on va pouvoir faire porter cette information sur la vue. Pour faire porter de l'information sur la vue, ce n'est pas très compliqué non plus, il suffira dans votre liste de prévoir à l'avance, pourquoi pas, une propriété par exemple. Donc là une propriété liste. On va faire une public list comme ça et celle-ci pourrait aussi avoir un type. On peut lui mettre un type aussi. Donc le type ça pourrait être quoi ? On sait que ça va être une collection mais on ne sait pas trop de quoi et puis à l'intérieur ici au lieu de faire un data getData comme ça dans la console.log ben ça on va le relier. On va lui dire this.List est égal à getData. Alors comme vous le faites dans le constructeur, c'est important parce que là iniialiser les variables à cet endroit-là c'est mieux sinon vous allez avoir des petits problèmes. Vaut mieux le faire dans le constructeur comme ça vous initialisez au départ vos différentes données et puis vous les utilisez après. Alors dans le HTML, ensuite, il va falloir l'afficher. Qu'est-ce qui se passe si je viens faire de l'affichage ? Faire de l'affichage, on utilise ici les doubles moustaches comme ça, les doubles accolades puis on vient référencer quelque chose, on sait qu'on a une variable list qui est disponible donc on pourrait simplement mettre liste comme ça. On va le laisser recompiler gentiment. On va se rendre ici, voilà regardez, sur la vue List et on voit qu'effectivement il nous dit qu'on a des objets donc on a 3 objets qui sont à l'intérieur. Vous pouvez tout à fait utiliser les doubles moustaches, les doubles accolades avec une variable dedans. Le seul petit problème c'est qu'on aura un petit moins de verbosité qu'avec la version 1 d'angular. Là maintenant on nous donnera les types d'informations à l'intérieur mais pas vraiment le contenu. Donc il faudra, si vous voulez avoir le contenu, faire un console.log de cette information. Vous voyez que relier de l'info depuis un service, ce n'est pas très compliqué. donc je récapitule, on a créé une fonction getdata qui nous permet de rendre accessible une collection qu'on va pouvoir récupérer partout. On a câblé le service par injection de dépendance. On n'a pas oublié de déclarer le service en tant que provider puisqu'on en a besoin. Et puis, à partir de là, on est simplement venu câbler cette liste et donc on la récupère directement, on insère l'information à l'intérieur et on peut le récupérer dans le template très simplement. Vous voyez que c'est très facile. Si vous avez compris le principe, après, des services, vous allez pouvoir développer quelque chose de très très puissant.

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 !