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

Créer une page

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez une nouvelle page à l'aide de la ligne de commande. Cette ligne de commande génère et met à disposition les fichiers nécessaires.
06:42

Transcription

Alors maintenant que vous avez compris un peu le principe des générateurs, et que vous avez un peu compris les trois types qui existent dans ionic... Je le rappelle, les pages de provider et bien évidemment les components. On va pouvoir fermer tout ça et on va pouvoir parler de la création de page. Des pages vous allez en avoir des dizaines, des centaines dans votre application. Vous n'allez pas vous amuser à tout taper à la main à chaque fois. Non il y a des générateurs pour ça donc on va se baser à chaque fois sur les générateurs, ce sera beaucoup plus simple. Pour le générateur, comment ça va fonctionner ? On va simplement lui dire de générer une page. C'est exactement la même chose donc ionic,generat, page et puis on va donner un nom à notre page. Comment ça marche pour le nom de la page ? Vous avez remarqué qu'on n'a même pas besoin de l'appeler partial. Moi je l'appelle Partial parce que ça me permet un petit peu de m'y retrouver. Pour les pages, on sait qu'à chaque fois ça va être l'intérieur de page. Puis voudrait des noms un peu classique. Avec provider on pourrait aussi l'appeler Data Provider. C'est pas un problème. Mais je le fais généralement, personnellement, que pour les partials après vous faites comme vous voulez. Le nommage ça vous regarde. Imaginons que j'ai besoin d'une page liste qui va me permettre plus tard, d'afficher une liste d'items. Je vais l'appeler comme ça, liste. Alors respectez bien la majuscule au début c'est important parce que c'est le nom de votre page et le nom de la classe aussi. On va lancer le generator et du coup, ça va générer simplement une page et ça c'est bien parce que ça nous prémache un petit peu le travail. Ça va nous créer automatiquement le HTML. Donc là vous pourrez l'enelver aussi le petit commentaire. Il sert un peu à rien. Les espaces entre eux non plus évidemment. Et puis ion-content ici qui va avoir pourquoi pas une ul li. Donc on pourait mettre ici ul li et si vous avez bien compris et bien suivi, évidemment ça, ça va être transformé un petit plus tard en composant. C'est exactement ça. Si c'est ce que vous avez dit en même temps que moi, vous avez tout à fait raison. Ça va être un composant. Donc ça évidemment, on va le sortir à un moment ou à un autre et si vous vous voyez taper des trucs comme ça à l'intérieur d'un template, tout de suite, essayez de vous dire non attends, je ne tape pas de HTML comme ça. Je fais un composant puis je tape mon HTML dans mon composant et puis point barre. On peut y aller différement, c'est-à-dire qu'on peut y aller par étapes. Je commence à taper mon HTML, je fais mon montage et puis je vois que c'est ok. Je déplace le code et puis je vais le mettre tout de suite dans un composant. Essayez de le faire le plus rapidement possible pour pas avoir des trucs immenses et avoir besoin de découper, ça va vous prendre 2 heures. Essayez de le faire au fur et à mesure, vous serez tranquille. Maintenant que j'ai ma page liste, comment je vais faire pour y accéder ? Vous voyez qu'effectivement ici pour le ts, on va vous créer automatiquement une page list, listPage ici donc c'est toujours comme ça la nomenclature. C'est le nom de la page plus le nommage page derrière qui nous permet de nous repérer. On vous injecte automatiquement le NavController qui sera ensuite la possibilité très rapide de venir naviguer et puis le NavParam aussi. Le NavParam on en reparlera aussi ça permet de "pather" des paramètres directement à une route. Ce qui est extrêmement utile. Et ici on vous met aussi un évènement. On ne parlera pas des évnements pendant cette formation mais vous pourrez aller dans la doc et vous renseigner là-dessus, il y a plein d'évènements qui peuvent être utiles dont certainement vous aurez besoin pendant votre développement. Nous on va l'enlever pour le moment, on squeeze cette partie. Elle n'est pas forcément importante dès le départ quand on démarre sur une application ionic. Maintenant qu'on a créé une page, il va falloir l'afficher. On va d'abord la déclarer, c'est hyper important. On l'a fait tout l'heure, on va le refaire aussi. Attention petite subtilité. Ici bien sûr, on va venir l'importer. Donc on va simplement taper ici ListPage. On va appuyer sur entrée. c'est un peu aléatoire. Il va vous le mettre au début, à la fin... Vous le déplacez vous-même ensuite. On va le mettre au niveau des pages comme ça on sait que c'est là et ça on va le déclarer dans les déclarations mais on va également venir ici le déclarer dans les entryComponents. Pourquoi ? Parce que c'est ceux qui vont etre chargés. C'est ceux qui vont être disponibles au travers du routing de ionic. Si vous ne le faites pas, vous ne pourrez pas naviguer dessus. Je vais vous donner une astuce car quand vous allez créer une nouvelle page vous allez vous dire comment je travaille dessus. C'est marrant, j'ai ma page mais quand je charge mon application, j'arrive toujours sur la home. C'est pas ça que je veux, j'aimerais arriver tout de suite sur la page ListPage. Regardez bien ce qui se passe. Le routing et ce qui démarre le routing c'est cette partie-là. Donc c'est à l'intérieur de votre main.ts que vous avez là où vous avez le appModule qui est importé. Quand on est dans le AppModule on voit que c'est MyApp qui va être directement importé. Et MyApp qu'est-ce que c'est . C'est ni plus ni moins que App.Component. Et le AppComponent que vous avez là défini la RootPage et cette RootPage on va pouvoir la modifier. Donc là simplement, pareil vous ferez votre import de ListPage. Voilà comme ça. Vous viendrez le placer au bon endroit. Attention, normalement la norme c'est des espaces. avant et après ce que vous importez pour que ce soit plus propre et pour que ce soit plus lisible. C'est pareil. C'est de la norme, faites ce que vous voulez mais je vous conseille de le respecter parce que ça fait des logiciels beaucoup plus propres. Et puis la subtilité c'est simplement de venir mettre ici votre ListPage plutôt que votre homePage. Si on veut voir quelque chose, ce serait bien de mettre quelque chose dans la li donc on pourrait dire par exemple un item ou alors item comme ça, numéro un. Et puis on va simplement retourner dans le navigateur. Là ça ne compile plus parce qu'on était sorti de la compilation. On va refaire un npm run ionic:serve. Ça va resservir l'appli. Le petit truc embêtant c'est que ça va vous réouvrir un onglet. Ça le fait à chaque fois. Le mieux c'est de fermer l'onglet, vous attendez que ça finisse de compiler. Puis une fois que ça a fini, ça va vous ouvrir automatiquement dans la console. Vous pouvez aussi travailler sur deux consoles. Une dans laquelle vous allez travailler avec les commandes et une que vous laissez tourner avec le compilateur comme ça il recompile à chaque fois. Vous n'avez pas besoin de le relancer, c'est peut-être un peu mieux. Vous remarquez que là, la page qui a été chargée dès le départ c'est la page ListPage. Faites ça à chaque fois sinon vous allez être obligé de créer des liens juste pour aller naviguer. Quand on fait de la conception, c'est peut-être mieux de tout de suite atterrir sur la page. Je récapitule, on créer une page avec le generator. Une fois que c'est créé, on a plus qu'à aller travailler à l'intérieur. Et puis tout simplement, on vient déclarer. On n'oublie surtout pas cette partie-là qui est super importante. Je déclare à chaque fois ma page pour pouvoir travailler dessus. Si c'est une page et pas un component, je le déclare aussi dans les entryComponents pour pouvoir avoir de la naviguation. Sinon ça ne marchera pas. Et bien évidemment, si j'ai envie de pouvoir travailler dessus tout de suite, dans mon App.Component ici le rootPage qui est le rootPage de ionic. Je lui définis le composant sur lequel je veux travailler. Ça vous pouvez faire des copier coller, n'activer que celui que vous voulez, vous organisez le code comme vous voulez. L'idée c'est de pouvoir travailler très rapidement sur une page et puis après vous passez la HomePage comme la page de référence et puis vous pourrez faire aussi de la naviguation puisqu'on va parler aussi de naviguation. Comment je passe d'une page à une autre ? Ça évidemment, c'est déjà prévu et vous avez tous les outils en main pour créer des applications mobiles très puissantes et en très peu de temps. Si vous aviez dû faire ça sur trois plateformes différentes, vous n'imaginez pas le temps que vous auriez pris parce que c'est extrêmement long à faire quand on doit le faire sur Android, IOS, Windows Phone. Là vous le faites une seule fois et ça va tout de suite être disponible partout puisque c'est le templating qui va se charger de faire le bon template pour chaque environnement.

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 !