This my provider people-service.ts
import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
/*
Generated class for the PeopleServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class PeopleServiceProvider {
data: any;
constructor(public http: Http) {
console.log(‘Hello PeopleServiceProvider Provider’);
}
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;
resolve(this.data);
});
});
}
}
home.ts file
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {PeopleServiceProvider} from ‘…/…/providers/people-service/people-service’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
providers: [PeopleServiceProvider]
})
export class HomePage {
public people: any;
constructor(public navCtrl: NavController, public peopleService: PeopleServiceProvider) {
this.loadPeople();
}
loadPeople(){
this.peopleService.load()
.then(data => {
this.people = data;
});
}
}
home.html file
<ion-navbar *navbar>
Home
{{person.name.first}} {{person.name.last}}
{{person.email}}
