นำโปรเจ็กส์จาก การเรียกใช้ HTTP แบบ GET มาพัฒนาเพิ่ม
A provider is an Angular component that can be injected into other pages which allows us to call some functions.
A provider has no view, it’s only returning data to us. And that’s exactly what we need.
สร้าง provider ใหม่ชื่อ api
[code]
$ ionic g provider api
[/code]
แก้ไขไฟล์ src/providers/api/api.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable() export class ApiProvider { constructor(public http: HttpClient) { console.log('Hello ApiProvider Provider'); } getFilms() { return this.http.get('https://swapi.co/api/films'); } } |
แก้ไขไฟล์ src/pages/home/home.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { Component } from '@angular/core'; import { NavController, IonicPage, NavParams } from 'ionic-angular'; import { Observable } from 'rxjs/Observable'; //import { HttpClient } from '@angular/common/http'; import { ApiProvider } from './../../providers/api/api'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { films: Observable<any>; constructor(public navCtrl: NavController, public apiProvider: ApiProvider) { //this.films = this.httpClient.get('https://swapi.co/api/films'); this.films = this.apiProvider.getFilms(); } openDetails(film) { this.navCtrl.push('DetailPage', { film: film }); } } |
Link