Consumir APi en IONIC con Angular
1.- Crear Proyecto Ionic ionic usando Shell o consola: start demoAPI blank --cordova
2.- Ir a la carpeta del proyecto: cd demoAPI
3.- Generar las plataformas para el proyecto:
ionic cordova platform add androidionic cordova platform add ios
4.- Buscamos el archivo, app.module.ts y agregar la dependencia HttpClient, usando la libreria HttpClientModule, como se muestra a continuación:
...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [...]
})
export class AppModule {}
5.- Usamos nuevamente la consola e ingresamos el siguiente comando para crear un Servicio para acceder a la api y poderla usar en los modulos del proyecto: ionic g service api-module
ionic creará un archivo api-module.service.ts en el cual agregaremos la librería httpClient
import { Injectable } from '@angular/core';
/*Se agrega httpClient y httpHeaders */
import { HttpClient, HttpHeaders } from '@angular/common/http';
Luego se debe registrar la variable http en el constructor de la clase:
. . .
constructor(
private http: HttpClient
) { }
. . .
Código Completo de api-module.service.ts
import { Injectable } from '@angular/core';
/* libreria a agregar httpClient */
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiModuleService {
url = "https://jsonplaceholder.typicode.com/";
respuesta: any;
constructor(
private http: HttpClient
) { }
//devuelve lista de post
getData_byGET() {
const header = new HttpHeaders ().set('Access-Control-Allow-Origin', '*')
.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT')
.set('Accept', 'application/json')
.set('Content-Type', 'application/json; charset=utf-8')
//.set('Authorization', localStorage.getItem("Token_Full").toString())
//.set('Authorization', 'Bearer ' + localStorage.getItem("Token_Full").toString())
;
return this.http.get(this.url+'post');
}
async login(postData){
const header = new HttpHeaders ().set('Access-Control-Allow-Origin', '*')
.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT')
.set('Accept', 'application/json')
.set('Content-Type', 'application/json; charset=utf-8')
.set('responseType','text');
var datos={ Username: postData.form.value.Username, Password:postData.form.value.Password};
var handleError: any;
//https
this.respuesta= this.http.post(this.url+'login', JSON.stringify(datos), { headers: header })
.toPromise()
.then(response => response as any)
.catch(handleError => handleError as any);
return this.respuesta;
}
}
Para usar el servicio debe crear un page por medio de la consola: ionic generate page consume-api, esto generara un directorio con los archivos de la vista y debera buscar en consume-api.module.ts y luego de abierto colocar la referencia del servicio:
import { Component, OnInit } from '@angular/core';
//libreria a agregar
import { ApiModuleService } from '../api-module.service';
//********************
import { NavController } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
Código de consume-api.ts
import { Component, OnInit } from '@angular/core';
import { ApiModuleService } from '../apirio.service';
import { NavController } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
@Component({
selector: 'app-habladores',
templateUrl: './habladores.page.html',
styleUrls: ['./habladores.page.scss'],
})
export class ConsumeApiPage implements OnInit {
public items;
constructor(
public apiMod: ApiModuleService,
public navCtrl: NavController,
private iab: InAppBrowser
) { }
ngOnInit() {
this.apiMod.getHabladores()
.subscribe(
(data) => { // Success
this.items= data;
},
(error) =>{
console.error(error);
}
)
}
getItems(ev: any) {
// set val to the value of the searchbar
const val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
if(Number.isInteger(val)){
this.items= this.items.filter((item) => {
return (item.Codigo.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}else{
this.items= this.items.filter((item) => {
return (item.Descripcion.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}else{
// Reset items back to all of the items
this.ngOnInit();
}
}
}
Comentarios