Atelier Développement Mobile ISET Tozeur

Atelier 1 : Débuter avec Ionic3

Objectifs :
 Créer une application avec Ionic
 Maîtriser la navigation entre les pages.
 Savoir transmettre des paramètres entre les pages.
Partie 1 : Création d’une application
1. Ouvrir le logiciel Visual Studio Code.
2. Aller au menu View  Terminal
3. Créer une nouvelle application avec la commande :
ionic start navigation blank
4. Puis, choisir l’option : Create a new app with Ionic Pro
5. L’application vient d’être créée.

Ben Mahmoud 1
Atelier Développement Mobile ISET Tozeur

6. Maintenant, exécuter le projet avec la commande : ionic serve

Partie 2 : Navigation dans une application
7. Aller au terminal et ajouter une deuxième page avec la commande :
ionic g page second
8. Dans le fichier second.module.ts :
import { SecondPage } from './second';
9. Dans le fichier home.html :
<button ion-button color="primary" block (click)="navigationLink()"> Aller à la page 2
</button>
10. Dans le fichier home.ts :
import { SecondPage} from '../second/second';
…
navigationLink()
{
this.navCtrl.push('SecondPage');
}
Partie 3 : Passage des paramètres lors de la navigation dans une application
11. Dans le fichier home.ts :
export class HomePage {
public params : any = {
name: 'Ionic',
message : 'hello world'
};
……
navigationLink()
{
this.navCtrl.push('SecondPage', this.params);
}
12. Dans le fichier second.ts :
export class SecondPage {
public message : string;

Ben Mahmoud 2
Atelier Développement Mobile ISET Tozeur

constructor(public navCtrl: NavController, public navParams: NavParams) {

this.message = `${this.navParams.data.name} dit ${this.navParams.data.message}`;
}
ionViewDidLoad() {
//console.log('ionViewDidLoad SecondPage');
console.log(`${this.navParams.data.name} dit ${this.navParams.data.message}`);
}
}
13. Dans le fichier second.html :
<ion-content padding>
<p>{{ message }}</p>
</ion-content>

Ben Mahmoud 3