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 { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetalhesPage } from '../pages/detalhes/detalhes';
import { ContactosApiProvider } from '../providers/contactos-api/contactos-api';
import { KeysPipe } from '../pipes/keys/keys';
@NgModule({
declarations: [
MyApp,
HomePage,
DetalhesPage,
KeysPipe
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DetalhesPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ContactosApiProvider
]
})
export class AppModule {}
Provider: contactos-api.ts
import { Http, Response } from "@angular/http";
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs";
@Injectable()
export class ContactosApiProvider {
constructor(private http: Http) {
}
getData(){
return this.http.get('https://randomuser.me/api/?results=10')
.map((data: Response) => data.json());
}
}
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import { ContactosApiProvider} from '../../providers/contactos-api/contactos-api';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
myUser = [];
constructor(public navCtrl: NavController, public contactosApiProvider: ContactosApiProvider) {
contactosApiProvider.getData().subscribe(newUser => {
this.myUser = newUser;
console.log(this.myUser);
});
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title text-center>
Contactos
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let theUser of myUser">
<p>{{theUser.name.last}}</p>
</button>
</ion-list>
</ion-content>