Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

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

Étudier les principaux composants

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La documentation fournit la liste complète des composants. Ainsi, vous disposez d'exemples simples que vous mettrez en place aisément. Découvrez ici les principaux composants.
04:32

Transcription

Maintenant que vous avez à peu près compris le fonctionnement, ce n'est pas extrêmement compliqué c'est ça qui est incroyable avec Ionic2 c'est que vous allez très rapidement créer des applications. On va voir ensemble ce qui existe au niveau des composants. On va aller dans la section Components, on va prendre le Overview et on va voir que tout est défini, vous allez avoir énormément de composants à disposition que vous allez pouvoir utiliser directement. On a des alertes, des badges, des boutons, des cartes, des checkbox, des éléments DateTime, par exemple. Ce sont des éléments d'interface ni plus ni moins, par exemple pour les alertes. On va vous montrer qu'une alerte sous iOS est rendue comme ça. Une alerte sous Android est rendue comme ça, tout est déjà mis en place pour que vous puissiez faire vous même votre code en vous basant sur ces composant là. Alors les principaux composants, c'est quoi ? Ça va être surtout les décorations classiques, par exemple les boutons, ce sont les composants principaux extrêmement simples à utiliser puisqu'à chaque fois vous avez l'exemple. Un bouton, c'est ça et puis vous avez une déclaration à mettre ion-button et là vous mettez une couleur, voilà, ou pas d'ailleurs. Vous pouvez prendre un bouton de base, vous pouvez avoir une couleur, et si vous mettez la couleur, ça prend tout de suite. Extrêmement simple à utiliser. Dans notre cas, on pourrait venir mettre du style sur notre bouton, on va prendre la page Home comme ça, le home.html. On voit qu'on avait un bouton, on va lui rajouter ici la directive ion-button, et en faisant ça, ça va tout de suite prendre le style, ionic et c'est automatique. Voila, c'est très simple et quand on va cliquer dessus, ça va avoir le même comportement. Je vais vous montrer quelque chose de génial, en venant décâbler le clic. Je ne vais pas mettre le clic pour vous montrer ce que ça donne parce qu'ils ont respecté vraiment la dernière version d'Android. Regardez, ici on a l'effet qui permet de dire où la personne a cliqué avec l'espèce de retour écran donc c'est carrément intégré. Vous allez avoir un style qui est le vrai style imposé par Google pour les applications en material design, c'est vraiment très très intéressant. Les boutons, les Cards sont vraiment super intéressants pour venir organiser de l'info et, ce qui est bien, c'est que vous allez avoir vraiment des exemples pour quasiment toutes les implémentations possibles, on vous montrera à chaque fois. Vous avez juste à faire des petits copier-coller super simples pour venir travailler. Travailler des contenus avec Ionic2, c'est vraiment super simple. Il y a pas mal de petits éléments, les checkbox, par exemple qui sont aussi fournis et proposés. On a la gestion des DateTime qui permettent d'avoir un calendrier et de pouvoir travailler avec. Vous voyez que c'est intéressant d'avoir cela et bien sûr le style est respecté aussi en fonction de l'environnement. On a de la gestuelle qui est possible, en fait on est un support de la gestuelle qui nous permet de savoir ce qui a été fait par l'utilisateur. On a Grid et cette Grid, gardez la en tête elle est très importante, parce qu'elle vous permet de venir faire des découpages d'interfaces. Ne vous amusez pas à faire ça en css, il y a les outils pour ça. La Grid est vraiment un super composant. Les icônes, c'est génial, pareil c'est une directive ion-icon, on donne le nom d'une icône et on a absolument tout. Vous pourrez aller sur la liste des icônes puisqu'il y a une Full List avec toutes les icônes dans laquelle vous pouvez chercher par exemple, voila... Vous pouvez chercher Close, qui va vous donner des petites croix donc possibilité de rechercher, ça c'est vraiment génial aussi. Qu'est-ce qu'on a d'autres comme composant intéressant ? Il y a beaucoup beaucoup de composants pour tout ce que vous avez à faire. Tout ce qui va concerner le design d'interface est déjà réfléchi donc n'hésitez pas à aller regarder à l'intérieur, il y a du Loading. On a cette interface de loading qui existe, qui est disponible sur les deux plate-formes. On a les composants de barre de recherche qui existent aussi et qui vont être stylés en fonction de la plate-forme. donc vous voyez qu'il y a quasiment tout. Si vous avez quelque chose à faire, ne vous amusez pas à le faire tout seul, il y a des composants pour ça. Faites un tour dans les composants, regardez l'implémentation du composant, et vous allez voir que c'est extrêmement simple. De temps en temps, faites attention, peut-être que le composant ira avec une partie de code qu'on aura et qu'on trouvera dans le Component à l'intérieur de notre code donc il faudra peut-être faire une initialisation et donc respecter l'exemple. De toute façon, absolument tout est donné dans la documentation, il n'y aura pas de problème, ce sera assez simple pour vous d'intégrer et vous verrez qu'il y a beaucoup d'éléments et de composants vous permettant de monter très facilement des interfaces.

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 !