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

Démarrer avec un nouveau projet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec un projet neuf, vous disposez déjà de tout ce qu'il faut pour bien démarrer. Partez à la découverte des fichiers de bootstrap et des modules de départ.
08:43

Transcription

Maintenant au niveau du code source de votre application à proprement parler, ça va se passer comment? On a quelques dossiers qui sont importants, dosiers app, dossiers assets, dossiers pages, dossiers themes et enfin quelques fichiers qui sont à la racine du dossier src. Dans le dossier app, celui qui va nous intéresser dans cette vidéo, c'est le bootstrap de votre application le démarrage pur de votre application, les 1ers fichiers qui sont chargés qui définissent vraiment le corps de votre application. Tout ça ne fonctionne pas tout seul - ça fonctionne également avec l'index.html. L'index.html, c'est un index .html assez basique, en fait ça définit un doc type ici, en html 5, et puis quelques petites infos, notamment un viewport particulier pour éviter d'avoir des problèmes avec le dimensionnement des écrans, une détection de format par rapport aux téléphones... Ici on a également l'icone classique du fav icone, qui va pas vous servir à grand chose, je vous le dis tout de suite, c'est vraiment l'icone qui va se trouver plutôt dans les ressources ici qui sera utilisé. Un thème color: très important. Le theme-color c'est intéressant pourquoi? Parce que c'est ce qui va vous permettre de changer notamment sur la dernière version d'Android, la couleur qui se trouve tout en haut. Ca, vous pourrez le customiser. Ensuite on trouve ici une insertion d'un script Cordova. Alors Cordova.js ce sera pas disponible tout le temps, notamment ce sera pas disponible dans le navigateur, faut savoir que cordova.js c'est ce qui permet de faire le lien entre les plugins natifs et le vrai Native, et du coup, cordova.js ne sera utilisé que lorsque vous êtes sur une application téléphone. Ensuite en dessous, des serviceWorkers. Il y a des implémentations de serviceWorkers maintenant qui peuvent être intéressants, un serviceWorker ça peut vous permettre de faire des choses en arrière plan, en arrière tâche, donc là on vous laisse simplement ajouter, vous voyez c'est commenté, par contre il ya un serviceWorker qui est créé ici, qui vous montre comment vous pouvez travailler avec les Workers, c'est des choses assez nouvelles, et ce n'est pas encore très très utilisé. Mais, ça existe et c'est déjà pris en compte, et il ya déjà un exemple. Ensuite vous avez un buildMain.css. On reviendra sur le style et les façons d'appliquer un thème à son app un peu plus tard, sachez que il est défini ici. Le main.css, attention. Et il est dans le dossier build. Ca a une importance pour plus tard. Et puis enfin on a une application. Une application Ionic, une application Angularjs, qui est définie ici, qui va donc démarrer à cet endroit là. Enfin, on ajoute le polyfill, les polyfills, donc ce sont, pour les anciens navigateurs, les différentes valises, etc, qui sont regénérées pour que ça fonctionne, alors, pour nous il ya pas vraiment d'impact particulier sachant qu'on sera toujours sur des dernières versions de navigateurs, puisque votre application après elle tournera dans un Chrome, ou dans un Chromium, ou alors dans un Safari quand vous serez sur Ios.. Pour le coup ici, pas besoin de s'embêter avec ça, en tous cas vous le touchez pas, surtout, de toutes façons c'est un x.html, vous ne le toucherez pas, ça sert à rien, tout est déjà prévu pour que vous puissiez travailler directement. Enfin on a le main.js ici, qui sera généré, lui, puisque ce sera tout ce que vous avez fait vous, dans votre application, à l'intérieur de src, qui sera compilé directement dans un main.js. Et pareil pour le main.css, c'est vraiment tout votre css qui sera compilé. et vous retrouverez qu'un seul fichier à la fin, c'est extrêmement rapide à charger. Maintenant, le bootstrap de l'appli à proprement parler. Comment ça fonctionne? On a app.html ici, qui, comme vous pouvez le voir, vient simplement référencer ici un composant Angular. un composant Angular c'est un peu particulier. En fait ça, c'est un composant Ionic, qui est de base, et qui permet de définir que la page qui sera chargée, la première, ce sera la root page. Et, cette rootPage, elle est bien définie quelque part. app.html est en liaison directe avec app.component. Et ici, vous avez le code d'un composant Angular. Je vais faire un topo rapide de ce que c'est un composant Angular, c'est simplement un bout de texte et c'est intéressant parce que c'est une classe, une vraie, donc un bout de texte qui définit une classe, cette classe là sera attachée directement à la vue, c'est comme on était en train de coder un contrôleur pour la vue. On a de la notation qui permet de définir que c'est un composant, et cette annotation a des paramètres qui sont définis ici, à l'intérieur d'un objet. Le template URL, notamment, définit quelle est le template attaché, ici, c'est app.html; celui qu'on a là. On pourrait le renommer comme on veut, ça marcherait pas de problème, suffit d'avoir le fichier qui va avec. Enfin, on a un nom de classe: MyApp. Vous essayez de respecter tout le temps cette particularité là, c'est à dire avoir des noms de classe qui soient réellement propres avec une majuscule devant, etc, c'est une convention de nommage. On définit à l'intérieur de cette classe ici, un paramètre de classe qui est égal à quelque chose, et ce quelque chose, qu'est-ce que c'est ? La Home Page. On y reviendra après, c'est une page qui est créée qui a un chemin, particulier, et qui est donc une classe. Au même titre que celui-là, ça va être un composant aussi, et, vous remarquez qu'un composant ça s'exporte, puisque c'est, le mot clé qu'on a ici, export, et ça permet d'être importé ailleurs. Ici, le import permet d'importer le Home Page, depuis un chemin particulier et de le réutiliser sur une variable. Cette même variable, si vous le regardez bien le app.html, elle est réutilisée dans le template. A chaque fois que vous mettez une variable comme ça et que vous allez définir une propriété dans votre classe elle sera automatiquement exposée dans la vue et vous pourrez l'utiliser. Enfin vous remarquez quelque chose de particulier, c'est que maintenant, avec les classes en Angular, on a la possibilité de définir un constructeur. Ce constructeur est un peu particulier parce que vous êtes sur du TimeScript donc, un langage typé qui est un langage au dessus de JavaScript, qui vous permet notamment dans cette partie là, de venir faire, dans le constructor, et c'est un vrai nom, celui-ci protégé, il faut utiliser constructor, qui permet de démarrer une classe et de faire des choses, et permettra également, par de l'injection, donc là on définit que la variable plateform, elle est typée platform, donc avec le type platform, et vous voyez que c'est pareil c'est un import, ce qu'on a là haut, et bien ça, ça permet de définir les types, et ça permet à l'intérieur de faire des injections. donc y a plus toute cette phase d'injections, etc, d'Angular 1, tout est fait automatiquement, Vous typez dans le contructeur quelque chose, il est automatiquement injecté dans l'appareil il est automatiquement utilisable dans le corps du constructeur ou de n'importe quoi d'autre. Quand vous avez des injections, utilisez toujours le constructeur pour passer vos injections. Et c'est tout - après, évidemment, il faudra regarder la documentation des diff injections, de ce que vous avez, des services, etc, ça vous le trouverez facilement dans la documentation nous on va parler des choses plus génériques. Partez d'un principe: à chaque fois qu'on utilise quelque chose notamment, le composant, qu'on aille ici - ou alors, à l'intérieur, la status bar, le splashscreen, etc, c'est des choses qui sont toujours importées. celle qui va nous intéresser le plus, c'est toujours, ça: ce qui provient du package Angular Core, parce que c'est le composant, et on en a besoin à chaque fois qu'on ait fini un nouveau composant. ça c'est le composant de base. Vous aurez pas besoin de le toucher, à moins que vous ayez des choses à faire de façon globale sur votre app, vous pourrez le faire ici. Faut savoir aussi qu'on a un main.ts. et le main.ts, c'est vraiment le bootstrap qui démarre l'application. Si vous regardez bien, ça se base sur le app module. Ah! ca veut dire qu'on a aussi un module. Module se trouve ici, et le module permet de démarrer l'application. Je récapitule: on a un module, qui va venir référencer ici avec, une annotation NgModule, qui provient donc de Angular Core, Différentes déclarations, et là vous serez obligé de déclarer tous vos composants: my app, home page, etc, pour qu'ils soient disponibles dans l'injection et disponibles dans l'import-export. Les imports de base, ça c'est vraiment, ici l'import de Ionic module, vous aurez pas besoin d'y toucher plus que ça, Le bootstrap permet de dire quelle est l'application que l'on bootstrap, donc là, c'est l'application Ionic app, et puis, enfin les composants d'entrée, c'est vraiment pareil, ça va de paire avec la déclaration pour déclarer des composants qu'ils soient disponibles partout. Pour les providers, c'est important aussi, si vous définissez vos propres providers, vos propres classes de services, vous devrez les mettre à l'intérieur des providers. Donc, pour récapituler réellement, on a un module, ce module, il est disponible et il permet, au travers de main, de faire le bootstrap de l'application, dans le module on a défini ici les dépendances, et, on a surtout, une 1ère application, un app component, ici, my app, qui permet de définir le rootpage, celui qui va être chargé en tout premier donc c'est vraiment le composant de base, et, ici, on a le app module qui démarre, et le app module, lui, prend les dépendances. Donc voyez que, au début c'est pas très compliqué, pour définir quel est le module ou le composant qui va démarrer en tout premier, c'est celui-ci : ici on utilise: IonicModule.forRoot(myApp), MyApp c'est bien le composant qu'on a vu au tout début, celui-ci, qui a comme template cette partie-là. Donc, on démarre vraiment absolument tout, depuis cette partie-là. Ce sera... toujours... pareil : ! Ca, vous ne toucherez, quasiment pas, à moins que vous ayez, forcément, besoin de rajouter des pages, etc, ou, dans ce cas là vous viendrez les référencer dans les déclarations ici, et dans les composants ici. Et vous oublierez pas surtout de les importer. Vous ne pourrez pas les référencer si vous ne les importez pas. Donc, importation, référencement, on a un ng module, on a ici un composant de base, et ensuite on a plein de composants, en fait, un composant par page - vous verrez, après on va en créer ensemble.

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 !