La structure d'un projet Ionic diffère de celle d'un projet Angular pour le web. C'est tout à fait normal, car ici, vous créez une application mobile — ces applications n'ont ni la même structure, ni les mêmes fonctionnalités qu'une application web traditionnelle. Avant de commencer à coder, je vous propose une visite guidée de la structure d'un projet Ionic.
L'arborescence
Pour expliquer l'arborescence d'un projet Ionic, j'ai choisi de vous montrer un projet ayant déjà été configuré pour le déploiement. Ainsi, vous en comprendrez le fonctionnement avant de commencer.
Comme pour un projet Angular, par exemple, vous avez un dossier node_modules qui comporte tous les modules Angular, Ionic et Cordova installés par le CLI, ainsi que tous les modules que vous pourrez installer pour compléter votre application. Rien de bien surprenant ici.
Vous avez le dossier platforms , créé par le CLI au moment de l'ajout d'une plateforme cible pour votre application. Ce dossier contient la majorité des ressources nécessaires au build final de votre application pour les plateformes différentes comme iOS et Android (les deux plateformes que vous verrez dans ce cours).
Ensuite, le dossier plugins contient les plugins Cordova qui permettent, par exemple, d'accéder aux fonctions natives des appareils, comme l'appareil photo ou la géolocalisation. Il contient également le plugin qui permet d'exécuter votre application Angular sur mobile.
Le dossier resources contient les images correspondant à l'icône et au splash screen de votre application. Le dossier www est également géré par le CLI pour la création des packages finaux pour votre application.
D'une façon générale, vous aurez très rarement à toucher aux dossiers ci-dessus, car ils sont générés et gérés par le CLI d'Ionic. Le dossier qui vous concernera pour la création de votre application est le dossier src .
Le dossier src
Voici le dossier src de l'application que vous avez créé avec le CLI.
Comme dans un projet Angular, vous avez un dossier app avec un component, un module, un template, et une feuille de style. Mais comme vous le verrez dans ce chapitre, ce ne sera pas votre dossier de travail principal.
Le dossier assets contiendra les assets statiques de votre application, comme des images, par exemple. Le dossier theme , comme son nom l'indique, permet de modifier le thème de votre application. Vous aborderez ces sujets plus tard dans ce cours.
Vous avez également un dossier pages , qui contiendra toutes les pages de votre application.
Mais qu'est-ce qu'une page ? C'est comme une page web ? Un component ?
Pages, components et navigation
Ouvrez app.component.html , qui n'a qu'une ligne :
<ion-nav [root]="rootPage"></ion-nav>Dans une application Angular habituelle, on s'attendrait à trouver des components ou un template qui correspondraient à ce que l'on voit dans le navigateur en exécutant ng serve, mais la structure d'une application Ionic est légèrement différente. En effet, le template qui correspond à ce que vous voyez est home.html , dans le dossier pages/home :
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
</p>
</ion-content>Vous y trouvez plusieurs balises ion- qui seront expliquées dans les cours suivants : pour l'instant, le plus important est de comprendre le concept d'une page. Une page est un component qui prend tout l'écran de l'appareil et auquel on accède par la navigation. Comme dans une application web, vos pages contiendront d'autres components.
Au lieu de fonctionner avec le Router d'Angular, la navigation d'une application Ionic correspond à un stack de pages sur lequel on push les pages que l'on souhaite visualiser. La page visible à l'écran correspond à la dernière ayant été ajoutée au stack. Pour revenir en arrière, on pop la dernière page ajoutée, dévoilant l'avant-dernière, etc.
Toute la navigation d'une application Ionic commence avec la rootPage . Cette page, définie dans app.component.ts et intégrée dans app.html , sera la page de base pour toute votre application : la première page du stack de navigation.
export class MyApp {
rootPage:any = HomePage;Pour l'instant, vous allez garder HomePage en rootPage . Plus tard dans ce cours, vous apprendrez à utiliser ce système pour intégrer une navigation par tabs.
