ionic-tutorial3

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

ionic g provider PeopleService

import { Http } from '@angular/http';
import { Injectable } from "@angular/core";
import "rxjs/add/operator/map";

@Injectable()
export class PeopleServiceProvider {
  constructor(public http: Http) {
    console.log("Hello PeopleServiceProvider Provider");
  }

  data: any;

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(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 reference
          this.data = data.results;
          resolve(this.data);
        });
    });
  }
}

// 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

ionic g page PeopleList

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]
})
export class PeopleListPage {

  public peoples: any;

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

      console.log("PeopleListPage constructor.");

      this.loadPeople();
  }

  loadPeople(){
    this.peopleServiceProvider.load()
    .then(data => {
      this.people = data;
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PeopleListPage');
  }

}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Peaple List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <button ion-item *ngFor="let person of peoples">
      <ion-avatar item-left>
        <img src="{{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

ionic g page PeopleDetails

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

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

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

@IonicPage()
@Component({
  selector: 'page-people-details',
  templateUrl: 'people-details.html',
})
export class PeopleDetailsPage {

  selectedItem: any;

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

    this.selectedItem = navParams.get('person');
    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PeopleDetailsPage');
  }

}

<ion-header>
  <ion-navbar>
    <button menuToggle *ngIf="!selectedItem">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>People Details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="selectedItem">
    <img src="{{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>

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

<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>