Tutorial de Ionic Peticiones HTTP API REST

Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...
ionic start pruebahttp1 blank
ionic g provider http
import { Injectable } from '@angular/core';
1 de 13 7/09/2017 09:34
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';
/*
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 {
constructor(public http: Http) {

console.log('Hello HttpProvider Provider');
}
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 { PruebaProvider } from '../providers/prueba/prueba';
import { HttpModule } from '@angular/http';
@NgModule({
declarations: [
MyApp,
HomePage
],
2 de 13 7/09/2017 09:34
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
PruebaProvider,
]
})
export class AppModule {}

import { Http} from '@angular/http';
/*
injection.html
*/
@Injectable()
datos : any;
path : string = 'https://randomuser.me/api/?results=25';
3 de 13 7/09/2017 09:34

}
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
"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
<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>
import { HttpProvider } from '../../providers/http/http';
constructor(public navCtrl: NavController, public http:

HttpProvider) {
usuarios : any[];
import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { HttpProvider } from '../../providers/http/http';
6 de 13 7/09/2017 09:34
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
usuarios : any[];
constructor(public navCtrl: NavController, public http:

HttpProvider) {
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

import { Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
/*
injection.html
*/
@Injectable()
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
this.http.loadUsers().then( res => {

this.usuarios = res.results;
console.log(this.usuarios)
},
error =>{
console.log(error);
});
}
9 de 13 7/09/2017 09:34
import { Http, Headers, RequestOptions } from '@angular/http';
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
<?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
S el primero en decir que te gusta.
12 de 13 7/09/2017 09:34
13 de 13 7/09/2017 09:34

Tutorial de Ionic Peticiones HTTP API REST

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial de Ionic Peticiones HTTP API REST

Cargado por

Copyright:

Formatos disponibles

Tutorial de Ionic Peticiones http API REST | Reviblog https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api...

ionic start pruebahttp1 blank

ionic g provider http

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

import { Http } from '@angular/http';

constructor(public http: Http) {

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

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

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

constructor(public http: Http) {

import { HttpProvider } from '../../providers/http/http';

constructor(public navCtrl: NavController, public http:

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

constructor(public navCtrl: NavController, public http:

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

constructor(public http: Http) {

this.http.loadUsers().then( res => {

import { Http, Headers, RequestOptions } from '@angular/http';

S el primero en decir que te gusta.

También podría gustarte