• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 28/11/2019

Créez des pages et naviguez

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Toute cette théorie peut paraître plutôt abstraite et difficile à comprendre : vous allez donc passer à la pratique !  Dans cette partie du cours, vous allez imaginer que vous développez une application qui permet la gestion des appareils électriques chez vous — je dis "imaginer" simplement parce qu'il vous manquera l'interface entre votre application et les appareils eux-mêmes.  Vous allez simplement créer le frontend (avec, plus tard, une partie du backend) pour cette application.

Créez et accédez à une nouvelle page

Il est possible d'utiliser le CLI pour générer une nouvelle page, mais pour cette première fois, vous allez la créer manuellement afin de bien comprendre le fonctionnement.  Créez donc un sous-dossier dans  pages  appelé  appareils , et dedans, créez  appareils.html  ,  appareils.ts  et   appareils.scss . Ces fichiers correspondent à la page qui montrera tous les appareils électriques.

Comme pour un component Angular habituel, vous avez un template, un component et une feuille de style.  Commencez par créer le component :

import { Component } from '@angular/core';

@Component({
  selector: 'page-appareils',
  templateUrl: 'appareils.html'
})
export class AppareilsPage {
  
}

Pour l'instant, aucune vraie différence avec un component Angular classique.  Passez maintenant au template, à l'aide des components et directives Ionic pour la mise en page :

<ion-header>
  <ion-navbar>
    <ion-title>Appareils</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Ici apparaîtra la liste d'appareils</p>
</ion-content>

<ion-footer padding>
  <p>Bas de page</p>
</ion-footer>

Le template se divise en trois parties principales : un  ion-header , un  ion-content  et un  ion-footer  . Comme leurs noms l'indiquent, ces parties correspondent à l'en-tête, au contenu et au bas de page : ce sont des components fournis par Ionic qui s'affichent correctement sur tous les types d'appareils en respectant les normes des OS différents.

À l'intérieur du  ion-header , vous avez  ion-navbar  : il s'agit d'un component qui génère une barre de navigation qui, entre autres, contiendra le bouton Back qui est généré automatiquement par Ionic lors d'un  push  de page afin de pouvoir revenir en arrière (de  pop  la page).  Le  ion-title  crée un titre de page avec les styles associés.

Le  ion-content  correspondra au contenu de la page, créant une zone de scroll indépendante afin de lisser l'expérience utilisateur : l'utilisateur n'aura pas à remonter toute la page, par exemple, pour pouvoir toucher le bouton Back.  Ici, vous avez également la directive  padding  , qui ajoute un padding CSS à l'élément pour que le contenu ne touche pas les bords de l'écran.

Le  ion-footer  est également indépendant du scroll, et permet d'afficher des éléments en bas de l'écran.

Pour que votre page soit reconnue et utilisable par l'application, il faut la déclarer dans  AppModule .  Ajoutez donc  AppareilsPage  aux arrays  declarations  et  entryComponents  :

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AppareilsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AppareilsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

Maintenant que vous avez créé une page, il faut pouvoir y accéder.  Retournez dans  home.html , remplacez le titre par "Page d'accueil" et le contenu de la balise  ion-content  :

<ion-header>
  <ion-navbar>
    <ion-title>
      Page d'accueil
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="onGoToAppareils()">Appareils</button>
</ion-content>

Et implémentez cette méthode dans  home.ts  :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AppareilsPage } from '../appareils/appareils';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  onGoToAppareils() {
    this.navCtrl.push(AppareilsPage);
  }

}

Le  NavController  (importé par défaut en suivant les instructions de ce cours) vous permet de gérer la navigation, et ici, vous lui demandez simplement de  push  votre page  AppareilsPage  sur le stack de navigation.  Vous avez donc :

Maintenant que vous savez créer une nouvelle page, vous allez découvrir comment passer des données d'une page à l'autre.

Passez des données entre les pages

Vous allez maintenant créer une page qui permettra d'afficher un seul appareil.  Profitez du CLI, et exécutez la commande suivante :

ionic generate page single-appareil --no-module

Ainsi, le CLI génère une nouvelle page dans un sous-dossier single-appareil du dossier  pages.

Afin de garder une organisation cohérente dans le projet, déplacez le dossier  single-appareil  dans le dossier  appareils  .

Enfin, n'oubliez pas de déclarer votre nouvelle page dans  AppModule  , dans les arrays  declarations  et  entryComponents  .

Pour accéder à votre nouvelle page, vous allez créer deux boutons dans le template  d'AppareilsPage  :

<ion-content padding>
    <button ion-button (click)="onLoadAppareil('Machine à laver')">Machine à laver</button>
    <button ion-button (click)="onLoadAppareil('Télévision')">Télévision</button>
</ion-content>

Et vous allez créer la méthode  onLoadAppareil()  :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SingleAppareilPage } from './single-appareil/single-appareil';

@Component({
  selector: 'page-appareils',
  templateUrl: 'appareils.html'
})
export class AppareilsPage {

  constructor(private navCtrl: NavController) {}

  onLoadAppareil(name: string) {
    this.navCtrl.push(SingleAppareilPage, {appareilName: name});
  }
}

Il faut injecter  NavController  , puisque vous allez implémenter la navigation, et que vous ajoutez un deuxième argument à la méthode  push() . Passer cet argument sous forme d'objet facilite la récupération des données par la page cible, surtout si vous y passez plusieurs données.

Passez justement à la page cible (supprimez le commentaire généré par Ionic) :

<ion-header>

  <ion-navbar>
    <ion-title>{{ name }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>Plus d'informations pour {{ name }}</p>
</ion-content>

Le template est prêt à recevoir la donnée, donc vous allez maintenant la récupérer grâce aux  NavParams  (vous pouvez supprimer la méthode  ionViewDidLoad() , les commentaires générés par Ionic, ainsi que l'injection de  NavController ) :

import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
  selector: 'page-single-appareil',
  templateUrl: 'single-appareil.html',
})
export class SingleAppareilPage implements OnInit {

  name: string;

  constructor(public navParams: NavParams) {
  }

  ngOnInit() {
    this.name = this.navParams.get('appareilName');
  }

}

Ici, vous utilisez la méthode  get()  pour récupérer  appareilName  de l'objet passé par la méthode  push()  et pour en attribuer la valeur à  name . Puisque Ionic se sert d'Angular, vous pouvez implémenter la méthode  ngOnInit()  pour ce faire.

Ainsi, vous pouvez naviguer vers  SingleAppareilPage  en lui fournissant les données nécessaires.

Naviguez autrement

Il existe deux directives utiles pour la navigation simple.  Vous pouvez modifier la page d'accueil comme suit :

import { Component } from '@angular/core';
import { AppareilsPage } from '../appareils/appareils';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  appareilsPage = AppareilsPage;

}

Vous retirez toute intégration du  NavController  pour simplement créer une propriété qui contient la page cible.  Ainsi, dans le template, vous pouvez utiliser la directive  navPush  :

<ion-header>
  <ion-navbar>
    <ion-title>
      Page d'accueil
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button [navPush]="appareilsPage">Appareils</button>
</ion-content>

Tabs

Pour une meilleure expérience utilisateur dans une application mobile, il est souvent plus intéressant d'avoir plusieurs tabs pour la navigation.  Concrètement, avec Ionic, cela consiste à avoir plusieurs stacks de navigation : un pour chaque tab.  Par exemple, pour votre application des appareils électriques, vous pourriez avoir un tab pour les appareils et leur statut, et un autre, par exemple, pour gérer des réglages globaux de la maison.

Avec Ionic, la navigation par tab se fait en créant une page spéciale qui contient simplement les tabs et leur logique, et en utilisant cette page comme  rootPage .

Commencez par créer une page simple pour les réglages (on la peuplera plus tard). Vous pouvez utiliser le CLI, si vous le souhaitez, je vais la créer manuellement (dans un sous-dossier  settings  du dossier  pages ) :

import { Component } from '@angular/core';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {

}
<ion-header>
  <ion-navbar>
    <ion-title>Réglages</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Ceci est la page des réglages !</p>
</ion-content>

<ion-footer padding>

</ion-footer>

Que vous ayez créé la page manuellement ou avec le CLI, n'oubliez pas de l'ajouter aux arrays  declarations  et  entryComponents  d' AppModule .

Maintenant, vous allez créer la  TabsPage  qui contiendra les tabs et qui servira de base pour la navigation.  Créez un sous-dossier  tabs  dans le dossier  pages , créez un fichier TypeScript et un fichier template (pas besoin de styles ici).

Dans le fichier TypeScript, vous créerez simplement une propriété pour chaque tab qui contiendra la page que vous souhaitez afficher :

import { Component } from '@angular/core';
import { AppareilsPage } from '../appareils/appareils';
import { SettingsPage } from '../settings/settings';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  appareilsPage = AppareilsPage;
  settingsPage = SettingsPage;
}

Ensuite, le template utilise les components  ion-tabs  pour créer les tabs de navigation :

<ion-tabs>
  <ion-tab [root]="appareilsPage" tabTitle="Appareils" tabIcon="bulb"></ion-tab>
  <ion-tab [root]="settingsPage" tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs>

Chaque  ion-tab  comporte :

  • un  root  : il s'agit de la  rootPage  pour le stack correspondant au tab

  • un  tabTitle  : le titre affiché sur le tab

  • un  tabIcon  : le nom du Ionicon souhaité, choisi dans la documentation

Après avoir intégré  TabsPage  dans les  declarations  et  entryProviders  de votre  AppModule , il faut dire à Ionic de s'en servir comme  rootPage  dans  AppComponent  :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Ainsi, vous avez intégré une navigation par tabs à cette application simple.

Exemple de certificat de réussite
Exemple de certificat de réussite