Ionic: การเรียกใช้ HTTP แบบ GET

ทดลองเรียกใช้ HTTP
แสดงรายการ (list)

api

1. ทดลองเรียกใช้ HTTP

เรียกใช้ HttpClientModule โดยการ
แก้ไขไฟล์ src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { HttpClientModule } from '@angular/common/http';

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

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

HttpClientModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Now we are ready to make HTTP calls to anywhere we want!

แก้ไขไฟล์ src/pages/home/home.ts
ให้เรียกไปที่ https://swapi.co/api/films

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

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

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

  films: Observable<any>;

  constructor(public navCtrl: NavController,
    public httpClient: HttpClient) {

    this.films = this.httpClient.get('https://swapi.co/api/films');
    this.films.subscribe(data => {
      console.log('my data: ', data);
    })
  }
}

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

import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

films: Observable<any>;

constructor(public navCtrl: NavController,

public httpClient: HttpClient) {

this.films = this.httpClient.get('https://swapi.co/api/films');

this.films.subscribe(data => {

console.log('my data: ', data);

})

}

ดูที่ Debug ด้วยการกด F12 ดูก็จะเห็นข้อมูลที่วิ่งมาละ

2. แสดงรายการ (list)

แก้ไขไฟล์ src/pages/home/home.ts

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

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

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

  films: Observable<any>;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private httpClient: HttpClient) {

    this.films = this.httpClient.get('https://swapi.co/api/films');
  }

  openDetails(film) {
    this.navCtrl.push('DetailPage', { film: film });
  }
}

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

import { NavController, IonicPage, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

films: Observable<any>;

constructor(public navCtrl: NavController,

public navParams: NavParams,

private httpClient: HttpClient) {

this.films = this.httpClient.get('https://swapi.co/api/films');

}

openDetails(film) {

this.navCtrl.push('DetailPage', { film: film });

}

แก้ไขไฟล์ src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let film of (films | async)?.results" (click)="openDetails(film)">
      {{ film.title }}
    </button>
  </ion-list>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

</button>

</ion-list>

</ion-content>

list

สร้าง page ใหม่ชื่อ detail

[code]
$ ionic g page detail
[/code]

แก้ไขไฟล์ src/pages/detail/detail.ts

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

@IonicPage()
@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {

  film: any;

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

    this.film = this.navParams.get('film');
  }

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

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-detail',

templateUrl: 'detail.html',

})

export class DetailPage {

film: any;

constructor(public navCtrl: NavController,

public navParams: NavParams) {

this.film = this.navParams.get('film');

}

ionViewDidLoad() {

console.log('ionViewDidLoad DetailPage');

}

แก้ไขไฟล์ src/pages/detail/detail.html

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

<ion-content padding>
  <ion-card>
    <ion-card-content>
      {{ film.opening_crawl }}
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>detail</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-content>

</ion-card-content>

</ion-card>

</ion-content>

list2

Link

ionicacademy.com

Phaisarn Sutheebanjard

blog.phaisarn.com

Ionic: การเรียกใช้ HTTP แบบ GET

1. ทดลองเรียกใช้ HTTP

2. แสดงรายการ (list)