Beruflich Dokumente
Kultur Dokumente
1 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
/*
Generated class for the HttpProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-
injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class HttpProvider {
@NgModule({
declarations: [
MyApp,
HomePage
],
2 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
PruebaProvider,
]
})
export class AppModule {}
/*
Generated class for the HttpProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-
injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class HttpProvider {
datos : any;
path : string = 'https://randomuser.me/api/?results=25';
3 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
loadUsers(){
return this.http
.get(this.path)
.map(res => res.json(),
err => {
console.log(err);
}
)
}
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "romain",
"last": "hoogmoed"
},
"location": {
"street": "1861 jan pieterszoon coenstraat",
"city": "maasdriel",
"state": "zeeland",
"postcode": 69217
},
"email": "romain.hoogmoed@example.com",
"login": {
"username": "lazyduck408",
"password": "jokers",
"salt": "UGtRFz4N",
"md5": "6d83a8c084731ee73eb5f9398b923183",
"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
"sha256":
4 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
"5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
},
"dob": "1983-07-14 07:29:45",
"registered": "2010-09-24 02:10:42",
"phone": "(656)-976-4980",
"cell": "(065)-247-9303",
"id": {
"name": "BSN",
"value": "04242023"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/83.jpg",
"medium": "https://randomuser.me/api/portraits/med/men
/83.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb
/men/83.jpg"
},
"nat": "NL"
}
],
"info": {
"seed": "2da87e9305069f1d",
"results": 1,
"page": 1,
"version": "1.1"
}
}
<ion-header>
<ion-navbar>
<ion-title>
Usuarios
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let usuario of usuarios">
5 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
<ion-avatar item-start>
<img [src]="usuario.picture.medium">
</ion-avatar>
<h2>{{ usuario.name.first }}</h2>
<p>{{ usuario.email }}</p>
</ion-item>
</ion-list>
<button ion-button full (click) = "cargarUsuarios()">Cargar
Usuarios</button>
</ion-content>
usuarios : any[];
6 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
usuarios : any[];
cargarUsuarios(){
this.http.loadUsers().subscribe( res => {
this.usuarios = res.results;
console.log(this.usuarios)
},
error =>{
console.log(error);
});
}
7 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
/*
Generated class for the HttpProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-
injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class HttpProvider {
datos : any;
path : string = 'https://randomuser.me/api/?results=25';
loadUsers(){
return this.http
.get(this.path)
.map(res => res.json(),
err => {
console.log(err);
}
)
.toPromise();
}
cargarUsuarios(){
8 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
9 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
postDatos(){
let datos = {
nombre:'Edu',email:'edu.revilla.vaquero@gmail.com'}
let headers = new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
});
let options = new RequestOptions({
headers: headers
});
var url = 'www.miservicio.com/adduser/';
return new Promise(resolve => {
this.http.post(url,JSON.stringify(datos),options)
.subscribe(data => {
resolve(data['_body']);
});
});
}
10 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
<?php
$postdata = file_get_contents("php://input");
if (isset($postdata)) {
$request = json_decode($postdata);
echo $request->nombre;
echo $request->email;
?>
11 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
12 de 13 7/09/2017 09:34
Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
13 de 13 7/09/2017 09:34