Salut les amis, je suis heureux de vous compter parmi les lecteurs de ce tutoriel. Nous avons dans un tutoriel précédent de notre serie sur ionic angular, parlé de la structure d'un projet.

Il sera question dans ce celui-ci de vous parler de la structure des pages d'une application ionic.

Introduction

Une application mobile peut contenir plusieurs pages. En fonction de la technologie que vous utilisez, ces pages ont une structure bien spécifique. Dans ionic, les pages sont constituées par défaut de - fichiers et pour les créer il suffit de taper la commande ionic generate page nom_de_page

Une fois cette commande valider, ionic va créer un sous-dossier dans le répertoire app de votre projet.

Exemple : Je vais créer une page login dans mon projet abeg. Pour cela je tape ionic generate page login le résultat est le suivant.

Comme je vous le disais nous voyons que ionic à créer une 6 fichiers. Dans la suite de ce tutoriel il sera question de présenter chacun de ces fichiers et leurs utilités.

Les fichiers d'une page ionic

1. login.page.html

Une page ionic est constituer d'un fichier html. C'est dans cette ce fichier que nous allons coder la vu de la page de votre application. Vous pouvez ajouter les différents composants dont votre page a besoin. Ces composants sont disponibles dans la documentation de ionic. Vous pouvez également créer vos propres composants en html 5.

Le fichier html est constitué de deux parties. Un header ou vous pouvez mettre le titre de votre page et un corps (ion-content) pour mettre le contenu de votre page.

2. login.module.ts

Ionic Angular propose un concept de modules afin de mieux structurer le code et faciliter la réutilisation et le partage.

Un module Ionic Angular est un mécanisme permettant de :

• regrouper des composants (mais aussi des services, directives, pipes etc...),

• définir leurs dépendances,

• et définir leur visibilité.

Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur NgModule.

3. login-routing.module.ts

Afin de permettre aux utilisateurs de garder leurs habitudes de navigation en visitant une Single Page Application ou une Progressive Web Application, il est nécessaire d'utiliser un système de "Routing".

Grâce au système de "Routing", les utilisateurs peuvent :

• Utiliser l'historique de leur navigateur (e.g. les boutons back et next),partager des liens,

• ajouter une vue à leurs favoris, ouvrir une vue dans une nouvelle fenêtre via le menu contextuel,

Ionic Angular fournit nativement un module de "Routing" pour répondre à ce besoin.

Nous allons utiliser ce fichier pour définir les chemins des pages vers lesquels nous allons naviguer. Pour mieux comprendre ça je vous invite à lire mon article sur la navigation entre différentes pages ionic.

4. login.page.scss

Cette page est reservée au style de votre page. Vous pouvez donc donner du style à vos différents composants ionic exactement comme avec un projet html. La syntaxe SCSS utilise l'extension de fichier .scss. À quelques petites exceptions près, il s'agit d'un sur-ensemble de CSS, ce qui signifie que pratiquement tous les CSS valides sont également des SCSS valides. En raison de sa similitude avec le CSS, c'est la syntaxe la plus simple à utiliser et la plus populaire.

5. login.page.spect.ts

Les fichiers .spec.ts sont destinés aux tests unitaires pour les composants individuels. Dans la plus par des petits projets que nous aurons à faire ont n'auras pas vraiment besoin de l'utiliser.

6.login.page.ts

Il s'agit en fait d'une classe décorée par le décorateur angular @component. Ce décorateur va spécifier quel sera le fichier html et css associé à cette classe ou ce composant. C'est dans ce fichier que nous allons coder la logique de notre page ionic.

Ce fichier nous permet de comprendre une chose fondamental, en réalité si nous voulons coder notre page ionic, nous allons toucher à trois fichiers. Ce fichier login.page.ts, le fichier login.page.html et le fichier login.page.scss.

On a l'impression de travailler sur un projet web (html + Css + Js )

C'est vraiment dans ce fichier que nous allons mettre nos variables, et nos fonctions.

Conclusion

Une page ionic est composée du plusieurs fichiers. Mais les fichiers qui nous intéresseront se sont :

• Les fichier .html

• Les fichier .scss

• Et les fichier page.ts ou le composant

C'est fichier me permettent de coder la vu (ce que utilisateur vois et touche), et la logique de notre page ionic.

Si vous avez aimer ce tutoriel merci de liker et de partager avec vos amis. Et laisse moi ton nom en commentaire pour faire savoir que tu me suis.

#2Articles1Week