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

Connaître les différents composants

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il existe trois types de composants, chacun ayant ses particularités. Découvrez les pages, les components et les providers. Faites également un tour d'horizon d'AngularJS 2.
08:21

Transcription

Désolé de vous dire ça, mais je vous ai un petit peu menti. Quand je vous ai présenté directement l'architecture de notre site, c'est à dire ce qu'on a ici ... Et bien je vous ai pas tout dit, je vous ai pas parlé des 3 vrais concepts qui vont se combattre un petit peu dans Ionic 2, et en réalité dans une application construite avec Angular C'est le concept d'abord de composants, le concept de services, qu'on va appeler des providers, et le concept de partials qui vont être également des composants Et vous allez voir qu'il y a une grosse différence dans Ionic 2. Je vous explique un peu ce qui se passe. Là, on travaille sur une page. La page vous savez ce que c'est, concrètement c'est rangé dans «pages» avec un «s» ici, et il y en a que une pour le moment. Home. Donc on a un dossier home avec une Home.html ... home.scss, home.ts. Le ts c'est un contrôleur, dans lequel on va avoir de la logique métier, le html c'est vraiment ce qui va permettre de construire la page. Ca, c'est bien, c'est un composant en fait. Il faut vraiment partir de ce principe, gardez à l'esprit que c'est un composant, ni plus ni moins qu'un composant. Mais attention parce que des composants il peut y en avoir d'autres. Je m'explique. On pourrait se dire, pourquoi pas, que cette partie-là, le h1 qu'on a là, on a envie de l'extraire. Parce qu'on a envie de l'afficher dans toutes nos pages. On ne va pas s'amuser à retaper à chaque fois h1 comme ça, on va l'extraire dans un composant qu'on va réutiliser dans nos composants qui sont nos composants globaux, et les composants globaux ce seront les pages. Le reste ce sera des vrais composants. On pourrait avoir par exemple, un composant title, un «title component». Ce sera à vous de trouver le vrai nommage. Moi j'aime appeler ça des partial car comme ça je me retrouve bien, mais la réalité des choses c'est que il y a des commandes qui vont me permettre de générer des différentes informations, et, dans Ionic ça s'appelle, ici, un composant. Comment est-ce qu'on va générer un composant? C'est assez simple, on va utiliser la commande Ionic, «generate», et on va lui dire de générer un component. Et ce component, il va falloir le nommer. Si vous le nommez, vous lui donnez un vrai nom qui est parlant, ici on va l'appeler «title», et puis on va l'appeler partial. Comme ça je sais que c'est partial, je sais que ça va représenter un title, et dedans, ce qui est bien c'est que vous allez avoir du template, mais aussi de la logique métier. C'est très intéressant parce que vous allez pouvoir extraire des bouts de code. Quand vous lancez cette commande, Ionic va se mettre en route, ça c'est génial, il va vous créer déjà le dossier component, title-partial, Et absolument tout ce qui y a là. Alors tout, oui et non. Sachez que c'est, ici, un générateur donc on va supprimer le commentaire pour avoir quelque chose de propre, Vous vous retrouvez avec un sélecteur, un template, et puis du css attaché et scopé, bien sûr, sur ce partial. Bon ça c'est génial, parce que tout est fait. Ensuite à l'intérieur vous avez de l'information, une variable définie, on n'est pas obligés de la voir forcément, tout ça on pourrait l'enlever, on va garder quand même le constructeur, faut toujours cleaner un peu malheureusement,... Et puis enlever tout ça parce que ça ne sert absolument à rien. Là c'est cool on a un component qui est un partial qu'on va pouvoir réutiliser. Alors comment j'utilise un partial? Utiliser une page, c'est pas compliqué parce que ça va se faire au travers du routing, à travers des outils de navigation que vous utiliserez dans votre application. C'est pas la même chose qu'un partial. Un partial ça va s'utiliser de cette manière: Si ça, j'ai envie de l'afficher à un endroit, et bien je vais venir définir la balise comme ça: title-partial. Je vais la fermer derrière et là, je vais utiliser mon partial. Bien sûr, il faut mettre quelque chose dedans, donc on va extraire le h1, et on va aller, ce h1, le mettre dans notre partial, ici. Là c'est pareil, vous avez des exemples un peu partout, vous les remplacez par votre logique à vous, Attention, un partial il faut obligatoirement le déclarer. Dans vos modules ici, il va falloir que dans les déclarations, vous l'ajoutier. Le mieux c'est de commencer à taper ici vous allez voir, on va vous le proposer, vous allez faire entrez, vous supprimez cette ligne-là. Et, ça, vous allez le déclarer. Vous le déclarez ici, dans les déclarations, vous enregistrez, et puis vous tentez de recompiler. Pour recompiler, vous vous souvenez, ça va être npm ici ...hop, voilà... npm .. mix start .. npm run Ionic serve .. et puis, derrière, vous aurez la compil qui va se faire, s'il ya une erreur, vous allez le voir, sinon, tout va bien se passer, et ça va s'ouvrir dans le navigateur, et on va avoir une application qui va être la même que celle qu'on avait avant, puisque pour le coup ici, il y a pas vraiment de grande différence. La grande différence entre les deux, je vous le redis, c'est que pour le coup, ici, une page ça s'utilise au travers de la navigation, c'est vraiment ça, et vous le ranger bien dans pages car ça représente quelque chose de physique, c'est à dire une vraie page avec des blocs d'info, vos pages, ça devrait être plutôt que des gabarits, et à chaque fois que vous allez coder des emplacements, vous allez coder des composants. Un composant est égal à un emplacement, un emplacement a donc de la logique et de l'information. Et, bien sûr, de l'affichage. Je vous conseille de faire comme ça pour toute votre appli. Essayer au maximum de faire des composants, Parce qu'un composant sera un peu unique, et vous pourrez le ré-utiliser ailleurs. Imaginons que ce composant je l'utilise sur 20 pages, si j'ai envie de changer de titre, je ne vais agir que dans un seul html, et pas sur toutes mes pages. Vous imaginez le gain de temps . Est-ce que ça a fonctionné ? On voit ici qu'il y a un problème... Quel est le problème en réalité? y a pas vraiment de problème, c'est qu'il arrive pas à trouver notre partial. Si on regarde ici on voit qu'effectivement il m'a trouvé quelque chose qui est pas ce que je voulais, donc, je vais essayer de le retaper, TitlePartial, et c'est bien d'ajouter celui qui est bon. Là c'est pareil, il me le trouve pas, c'est simplement le parcing qui a un petit problème, on va venir le référencer réellement à la main, on sait que c'est title-partial que se trouve ici, et c'est title partial component. Il faut faire très attention à ça, Car pout le coup il va l'appeler title partial component, et c'est celui-ci qu'on va vouloir intégrer. Intégrez bien le bon, parce que sinon vous allez avoir des problèmes de compilation, et voyez que moi j'en ai eu une, il faut faire attention à ça, c'est des erreurs assez fréquentes, vous inquiétez pas, vous en aurez, de temps en temps. Je vous conseile également, dans vos imports, de séparer un petit peu. Ici, on sait que ça c'est le composant par défaut, donc c'est le boot, et on sait que ça, ce sont les pages... et ensuite, on sait ici que ça, ce sont les components. je vous conseille de mettre des commentaires comme ça, pour organiser votre code, vous serez plus tranquilles après. Une fois que ça s'est déclaré, la compilation va se remettre en marche, vous allez avoir le build qui va s'effectuer, et il ne devrait pas y avoir de problème, ça va bien s'afficher. On va ouvrir notre console, se remettre en mode mobile, Effectivement, ici c'est hello julien qu'on a là, si je vais inspecter, et vais regarder ce qui se trouve dedans, je vois que c'est bien mon title partial qui vient d'être rendu. Ca c'est génial. Je vous avais parlé de 3 concepts ... Et, là je vous en ai présenté 2. Les pages, et les components. Il y en a un 3e, c'est les Services. Les services, ça s'appelle des providers; Quand on parle en termes de Ionic, l'organisation c'est les providers, un provider, qu'est-ce c'est? Ca va être simplement un fichier ts, donc un fichier de Scripting, qui va fournir de l'information ou qui va permettre de travailler avec de la donnée. Ne faites jamais de travail sur la donnée directement ici dans le constructeur ou directement dans le composant. Ca a aucun sens. Si vous avez de la donnée à traiter, et bien, traitez-là dans un service, traitez-la dans un provider. Même chose, pour créer un provider, vous allez utiliser le générateur. Vous allez pas vous embêter, tout est dejà prévu, on va utiliser, ici encore, Ionic generate, on va lui donner provider, et on va lui dire, par ex, «data». Ce qui va nous permettre d'avoir un provider pour de la data, c'est légèrement différent au niveau du code, mais c'est tout à fait normal. On reviendra un peu là-dessus plus tard, là je vous montre comment le créer, Je vous explique les 3 types réellement d'information qu'on va pouvoir trouver, Provider vous allez l'avoir là, data.ts , maintenant, voilà: c'est un service ni plus ni moins, ça va utiliser une déclaration qui permet de dire qu'il est injectable, donc on peut lui injecter de l'information là, pour l'exemple, on vous a donné ici quelques petites infos qui sont comment on utilise un service http pour faire des requêtes alx, ça on l'exploitera pas réellement dans le cours mais vous pourrez, sans aucun problème aller regarder et vous renseigner là-dessus c'est pas compliqué. Et ici on pourrait, dans ce service avoir des méthodes ce service c'est génial parce qu'on va pouvoir l'injecter. ça on le fera plus tard, évidemment, mais sachez que ça existe, et quand vous traiterez de la donnée, je vous conseille de traiter votre donnée à un endroit particulier ce service data par exemple, pourrait nous fournir des items qu'on va pouvoir après afficher dans le template, et imaginons que ces items-là, j'ai besoin de les utiliser dans 5, 6, 10 pages, j'utiliserai toujours le même service, et, je vais avoir quelque chose de très propre, et quand je veux travailler ma data, je la travaille à 1 seul endroit. Pensez bien à ça c'est extrêmement important, les services, aussi appelés providers, qui vont, ici, permettre de travailler de la donnée, les pages, qui vont être ni plus ni moins que les moules applicatifs qui seront affichés à partir de la navigation c'est vraiment vos grands ensembles et les composants pour découper, redécouper une page, en différents composants qu'on va réutiliser plus tard. Là, avec ça, vous avez une organisation parfaite. Vous aurez une application simple à maintenir avec des petits bouts de code à chaque fois, c'est exactement ce que vous devez faire.

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 !