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

Définir un lien de navigation

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ionic 2 permet de créer des liens de navigation grâce à une librairie. Ainsi, vous pourrez naviguer et voir les différentes interactions.
06:31

Transcription

Bon allez je sais que vous avez envie de naviguer, je vous comprends. C'est vrai qu'effectviement, naviguer c'est quand même sympa. Vous remarquerez aussi, une petite subtilité, qu'ici le compilateur est extrêmement précis parce que quand vous avez importé quelque chose et que vous ne l'utilisez pas, ça vous soulève tout de suite une erreur et vous dire que HomePage vous n'êtes pas en train de l'utiliser. C'est pas très grave, ça ne fait pas crasher l'application à proprement parler. Si vous voulez, vous le commentez comme ça votre compilateur viendra plus rien vous dire. Comme ça au moins vous êtes tranquille. Vous avez vu que là c'est très précis, c'est assez hallucinant. C'est que vraiment il détecte absolument tout, vous ne pouvez pas vous tromper. Comment je fais pour déclarer un lien ? Déjà je vais remettre le home ici parce que c'est quand même intéressant ici d'avoir HomePage. Puis bien sûr, je vais le décommenter, je vais commenter l'autre page comme ça je remets ça à plat et effectivement, quand mon application va se charger, je vais bien tomber sur la home et non pas pour le coup sur ma liste. Ensuite, je vais vous montrer comment on navigue. C'est extrêment simple vous allez voir que naviguer avec ionic entre des pages, il n'y a rien de compliqué. On va fermer tout ça. Nous on veut faire quoi ? On sait qu'on tombe sur la home. Ça c'est le premier truc. On sait que voilà on va arriver sur la home et ici on aimerait avoir pourquoi pas un lien. Au début on va juste coder un lien pour voir ce que ça donne. Je vous parlerai un peu plus de composants plus tard qui sont déjà fournis. Vous n'êtes pas obligé de mettre le href mais vous pouvez le laisser juste comme ça. On va mettre un lien comme ça et on va simplement l'appeler aller vers la liste. Et puis aller vers la lsite, qu'est-ce que ça va faire, ça va aller vers la liste. Je vous explique, ça va se faire en deux temps. D'abord vous allez devoir coder le comportement dans le HTML puis ensuite vous allez devoir coder le comportement qui va réagir à ce que l'on veut directement dans le home.ts. Alors nous on va le faire à l'envers. Bien évidemment, on va commencer par ça. Une fois que vous aurez compris, je vous conseille de le coder en premier en HTML et ensuite dans le ts. Pour l'explication, c'est plus simple si je vous le montre d'abord dans le ts. Ici, je vais simplement lui demander de venir me mettre une fonction qui va, quand je vais l'appeler cette fonction, naviguer directement vers la page de list. On va ici se créer une fonction très simple qui va s'appeler navigateToList. Qu'est-ce qu'elle va faire ? Elle va être toute bête. Elle va faire un this.navCtrl.push et on va lui donner ici un composant particulier. Ce composant, vu qu'on va avoir besoin de l'utiliser, faut l'importer. Ça vous connaissez le principe. Mon composant c'est quoi ? C'est ListPage donc je l'ajoute. Hop ! Simplement comme ça voilà. Il n'est pas utilisé pour le moment mais il va l'être regardez. Je vais le mettre à l'intérieur et là, plus de problème, on va pouvoir faire ça très facilement. Bon maintenant ça c'est exposé. Je vous l'ai déjà dit si vous déclarez quoi que ce soit ici, c'est forcément exposé directement dans la vue. Donc ça veut dire que navigateToList je peux le relier à ma vue très facilement. Avec angular, si vous n'avez jamais travaillé avec angular 2, on a la possiblité de dfinir des comportements, le clic. Enfin voilà, un peu tout ce qu'on veut. Les évènements sur les différents éléments HTML. Pour ça on va utiliser un jeu de parenthèses comme ça et on va simplement défnir l'évènement à l'intérieur par exemple clic on va lui dire que c'est égal à quelque chose au même titre qu'on coderait des attributs, on va simplement dire que pour le clic qu'est-ce qui va se passer ? On va utiliser navigate.To.List. Donc exactement le même nom que l'on a donné à notre fonction et justement j'appuie là-dessus, c'est une fonction. Comme c'est une fonction, on va l'appeler cette fonction. Là vous avez codé le comportement pour aller vers une nouvelle page. Comment ça fonctionne ? C'est simplement l'utilisation du service NavController que vous avez là, que vous pouvez aller regarder. Je vous invite à chaque fois à aller regarder ce qui est possible dedans et vous verrez qu'on a la possibilité de travailler sur plein de choses. Notamment on a le push et le push ça nous permet de naviguer, de pousser une page dans la navigation. Sachant que la navigation c'est ce qu'on appelle une stack, c'est une pile de navigation. vous avez une première page, vous poussez une page par-dessus et puis vous pouvez revenir à l'aide des boutons Androïd par exemple à la page précédente puisque comme c'est une pile et que vous empilez les pages, l'historique de ce que vous avez fait, reste. Ça peut poser de temps en temps un peu problème mais bon... Je vous montrerai qu'il y a des techniques sympas. On peut redéfinir quelle est la racine. On peut écraser la pile. Il y a plein de choses que l'on peut faire. Bien sûr vous pouvez aller vers l'avant, vers l'arrière, vous pouvez naviguer dans cette pile de navigation au travers de ce controller qui est une classe extrêmement bien faite pour le coup. Maintenant, ce serait bien de le tester. Ça a recompilé, il n"y a pas de souci. Voilà, on a bien un petit lien aller vers la liste qu'on pourra, pourquoi pas après, transformer en bouton pour faire quelque chose de très propre. Vous verrez que c'est facile aussi. Il suffira d'utiliser le templating proposé et disponible dans ionic 2. Si je clique maintenant, qu'est-ce qui se passe ? Je vais tout de suite aller vers la page. Il y a un petit problème. Là, quand je vais cliquer dessus, voilà ce qui va se passer, ça recharge. Pourquoi ça recharge ? Tout simplement parce qu'ici on a un vrai souci, c'est qu'on utilise un a. Généralement, vous n'utiliserez pas de a et c'est pour ça qu'à l'intérieur de ionic on va vous fournir des éléments. Notamment on a le bouton en fait et le bouton ce qui est bien c'est qu'il n'a pas de comportement de rechargement. Alors qu'en l'occurence, si on utilise un lien, lui son comportement par défaut c'est recharger. Je vous rappelle qu'on est quand même en HTML et qu'il faut absolument respecter les éléments si on veut que ça donne quelque chose d'intéressant. Ici effectivement, voilà ce qui se passe. Regardez. C'est très beau. Quand je vais cliquer sur le bouton, ça va aller sur la liste. Vous voyez qu'en plus ça utilise l'effet Androïd puisque actuellement je suis sur Androïd. Maintenant, qu'est-ce qui se passe sur du iPhone ? Alors on va se mettre en iPhone 6. On va recharger la page, du coup on va avoir un comportement un petit peu différent et quand je vais cliquer ici regardez. Hop! Je me retrouve avec la navigation que je connais sur iOS. Vous voyez que même tous les éléments et la navigation ça va réagir. Vous remarquez quelque chose de plus, c'est qu"au contraire de tout à l'heure quand on avait défini une liste, en tant que page par défaut, maintenant comme c'est un lien et que vous poussez à l'intérieur de la navigation, il y a ça qui est apparu. Il y a le back. Le back qui vous permet de revenir en arrière et bien ce back-là, vous ne l'aviez pas tout à l'heure et vous ne l'avez que si vous utilisez la navigation. Il est symbolisé comme ça sur iPhone c'est-à-dire avec un back, une flèche bleue et quelque chose de très reconnaissable alors que sur Androïd, c'est simplement une flèche. Vous voyez que même le style qui est normalement disponible et qui est demandé par Apple ou qui est demandé par Google est entièrement repsecté donc vous vous retrouvez avec une application qui colle absolument au style de la plateforme sur laquelle vous allez le faire tourner. Vous voyez que la navigation ça n'a rien de compliqué. Naviguer entre les pages, c'est facile, il suffit simplement de venir coder le comportement avec ici un évènement, une fonction qu'on appelle. On attache dans le ts la fonction de référence qui va être déclarée et qui va être appelée quand on va cliquer. Puis vous venez mettre de la logique métier à l'intérieur et vous faites quelque chose. Et vous pouvez utiliser absolument tous les services disponibles dans ionic pour faire plein de choses.

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 !