TP : Travaux Pratiques - Bases d’Ionic & Angular

Cette série de TPs est conçue pour apprendre les fondamentaux du développement mobile avec Ionic et Angular, de l’installation à la création de formulaires.

TP 1 : Installation de l’Environnement et Premier Projet

Objectif : Configurer les outils de développement et lancer une application de base.

Installation du CLI : Ouvrez un terminal et installez l’interface de ligne de commande Ionic globalement :
```
npm i -g @ionic/cli
```
Création du projet : Créez une nouvelle application Angular nommée monApp avec un template “blank” :
```
ionic start monApp blank --type=angular
```
Lancement : Allez dans le dossier du projet et lancez le serveur de développement :
```
cd monApp
ionic serve
```

TP 2 : Structure d’une Page Mobile

Objectif : Comprendre l’organisation visuelle d’une page Ionic.

Analyse du fichier HTML : Ouvrez src/app/home/home.page.html et identifiez les trois sections :
- <ion-header> : En-tête fixe avec le titre.
- <ion-content> : Zone de contenu défilable.
Modification du titre : Changez le contenu de <ion-title> par “Mon Profil”.
Création d’une nouvelle page : Utilisez le CLI pour générer une page de formulaire :
```
ionic generate page pages/formulaire
```

TP 3 : Éléments de Formulaire et Liaison de Données

Objectif : Créer un formulaire d’inscription simple en utilisant les composants Ionic.

Mise en place du formulaire : Dans formulaire.page.html, reproduisez la structure suivante :

<ion-content>
    <form #userForm="ngForm" class="form-padding">
        <ion-item>
            <ion-label position="floating">Nom</ion-label>
            <ion-input type="text" name="nom" ngModel required></ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="floating">Email</ion-label>
            <ion-input type="email" name="email" ngModel required></ion-input>
        </ion-item>
        <ion-button expand="full" type="submit">Soumettre</ion-button>
    </form>
</ion-content>

Explication : Pourquoi utilise-t-on ngModel et #userForm="ngForm" ici ?

TP 4 : Navigation entre Pages

Objectif : Permettre le passage de la page d’accueil vers la page de formulaire.

Ajout d’un bouton de navigation : Sur la page d’accueil (home.page.html), ajoutez un bouton pour aller au formulaire :
```
<ion-button routerLink="/formulaire">S'inscrire</ion-button>
```

Bouton de retour : Dans l’en-tête de la page formulaire, ajoutez un bouton de retour automatique :

<ion-buttons slot="start">
    <ion-back-button defaultHref="/home"></ion-back-button>
</ion-buttons>

TP 5 : Affichage de Listes et Composants Autonomes (Standalone)

Objectif : Comprendre la différence entre NgModule et Standalone et afficher des données dans une liste.

Utilisation d’une liste : Affichez une liste de contacts factices dans l’accueil :

<ion-list>
    <ion-item>
        <ion-label>
            <h2>Jean Dupont</h2>
            <p>Développeur Mobile</p>
        </ion-label>
    </ion-item>
</ion-list>

Concept de Standalone : Expliquez pourquoi un composant autonome réduit le “boilerplate” et comment il se déclare dans les métadonnées @Component.