ionic-tutorial3

Ionic tutorial3 : Appel d'une API de type RESTful et affichage des données (liste / détails). L'API utilisée dans ce tutorial est https://randomuser.me qui permet d'avoir un ou plusieurs personnes exemples.

Pour tester cette application en local

git clone https://github.com/nfriaa/ionic-tutorial3.git
cd ionic-tutorial3
npm install
ionic serve

1. Créer une nouvelle application Ionic

ionic start ionic-tutorial3 sidemenu
# puis démarrer dans le navigateur :
ionic serve

2. Créer le provider

C'est la classe qui va intéragir avec le service Web (RESTful) pour récupérer les données.

ionic g provider PeopleService

• changer le code du fichier src/providers/people-service/people-service.ts comme suit : Nous allons recupérer 5 utilisateurs à partir de l'API randomuser.me à l'aide de l'URL https://randomuser.me/api/?results=5

import{Http}from'@angular/http';import{Injectable}from"@angular/core";import"rxjs/add/operator/map";
@Injectable()exportclassPeopleServiceProvider{constructor(publichttp: Http){console.log("Hello PeopleServiceProvider Provider");}data: any;load(){if(this.data){// already loaded datareturnPromise.resolve(this.data);}// don't have the data yetreturnnewPromise(resolve=>{// We're using Angular HTTP provider to request the data,// then on the response, it'll map the JSON data to a parsed JS object.// Next, we process the data and resolve the promise with the new data.this.http.get("https://randomuser.me/api/?results=10").map(res=>res.json()).subscribe(data=>{// we've got back the raw data, now generate the core schedule data// and save the data for later referencethis.data=data.results;resolve(this.data);});});}}

• déclarer ensuite l'objet HttpModule dans le fichier src/app/app.module.ts :

// dans la partie des imports :import{HttpModule}from'@angular/http';// et dans le tableau 'imports' :imports: [
... ,HttpModule],

2. Créer la page qui va contenir la liste des personnes

• générer la page :

ionic g page PeopleList

• puis déclarer cette page dans le menu principale de l'application (voir ionic-tutorial1).

• modifier le code du fichier src/pages/people-list/people-list.ts pour avoir :

import{Component}from'@angular/core';import{IonicPage,NavController,NavParams}from'ionic-angular';import{PeopleServiceProvider}from"../../providers/people-service/people-service";
@IonicPage()
@Component({selector: 'page-people-list',templateUrl: 'people-list.html',providers: [PeopleServiceProvider]})exportclassPeopleListPage{publicpeoples: any;constructor(publicnavCtrl: NavController,publicnavParams: NavParams,publicpeopleServiceProvider: PeopleServiceProvider){console.log("PeopleListPage constructor.");this.loadPeople();}loadPeople(){this.peopleServiceProvider.load().then(data=>{this.people=data;});}ionViewDidLoad(){console.log('ionViewDidLoad PeopleListPage');}}

• modifier le code du fichier src/pages/people-list/people-list.html pour avoir :

<ion-header><ion-navbar><buttonion-buttonmenuToggle><ion-iconname="menu"></ion-icon></button><ion-title>Peaple List</ion-title></ion-navbar></ion-header><ion-contentpadding><ion-list><buttonion-item*ngFor="let person of peoples"><ion-avataritem-left><imgsrc="{{person.picture.thumbnail}}"></ion-avatar><h2>{{person.name.title}} {{person.name.first}} {{person.name.last}}</h2><p>{{person.email}}</p></button></ion-list></ion-content>

3. Créer la page qui va contenir les détails d'une personne

• générer la page :

ionic g page PeopleDetails

• puis déclarer cette page dans le fichier src/app/app.module.ts (voir ionic-tutorial1).

• dans le fichier src/pages/people-list/people-list.html ajouter l'appel de fonction après le clic :

<buttonion-item*ngFor="let person of peoples" (click)="itemTapped($event, person)">

• dans le fichier src/pages/people-list/people-list.ts ajouter la fonction itemTapped qui nous rediriger vers la page PeopleDetailsPage :

itemTapped(event,person){this.navCtrl.push(PeopleDetailsPage,{person: person});}

• le code du fichier src/pages/people-details/people-details.ts :

import{Component}from'@angular/core';import{IonicPage,NavController,NavParams}from'ionic-angular';
@IonicPage()
@Component({selector: 'page-people-details',templateUrl: 'people-details.html',})exportclassPeopleDetailsPage{selectedItem: any;constructor(publicnavCtrl: NavController,publicnavParams: NavParams){this.selectedItem=navParams.get('person');}ionViewDidLoad(){console.log('ionViewDidLoad PeopleDetailsPage');}}

• le code du fichier src/pages/people-details/people-details.html :

<ion-header><ion-navbar><buttonmenuToggle*ngIf="!selectedItem"><ion-iconname="menu"></ion-icon></button><ion-title>People Details</ion-title></ion-navbar></ion-header><ion-content><ion-card*ngIf="selectedItem"><imgsrc="{{selectedItem.picture.medium}}" /><ion-card-content><ion-card-title>
{{selectedItem.name.title}} {{selectedItem.name.first}} {{selectedItem.name.last}}
</ion-card-title><p>
Email: {{selectedItem.email}}
<br/>
Phone: {{selectedItem.phone}}
<br/>
Nationality: {{selectedItem.nat}}
<br/>
City: {{selectedItem.location.city}}
<br/>
State: {{selectedItem.location.state}}
<br/>
Birth date: {{selectedItem.dob}}
</p></ion-card-content></ion-card></ion-content>

Et voilà vous pouvez visualiser la liste des personnes et lorsqu'on clic sur une personne on obtient les détails.

4. Utiliser une même page pour la liste et les détials

Il est possible d'utiliser une seule page. On va appliquer ça à la liste du fichier src/pages/list/list.html :

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
+ <ion-list *ngIf="!selectedItem">
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{item.title}}
<div class="item-note" item-end>
{{item.note}}
</div>
</button>
</ion-list>
+ <div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b> : {{selectedItem.note}}
</div>
</ion-content>

Maintenant si on clic sur un item de cette liste le résultat est affiché dans la même page.