Categorias
iiiiii
consumir servicio JSON
Descripcion
Como crear un service y consumirlo ionic
Nota
<!--
para consumir un servicio web es necesario :
se debe cenrtalizar todo en un lugar llamado unservices.el cual nos va permitir conpartir toda la informacion
en todos los componentes que lo requieran
1. ng g s services/data --spec=false {g generar, services la carpeta, data el nombre del servicio, spec para no archivo de prueba}
nos generara el archivo data.service
2. para hacer peticiones http se debe importar un modulo en app.module ()
-->
<!--Se llama el servicio datos con el => | async para disparar que se consuma el servicio -->
<li *ngFor="let dato of datos | async" class="list-group-item">
<h2>{{dato.title}}</h2>
<p>{{dato.body}}</p>
</li>
html
/*Inicio App.module.js*/
//modulo para consumir o crear peticiones http
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
MenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PagesModule,
HttpClientModule /*Y se importa*/
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
/*Fin App.module.js*/
/*Inicio data.services.ts***************************************************************************************************************/
import { HttpClient } from '@angular/common/http'; /*Se debe importar para consumir servicios*/
import { getSafePropertyAccessString } from '@angular/compiler';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
//se le inyecta al contructor una constante de tipo HttpCliente con el nombre http
constructor(private http:HttpClient) {}
// se crea una funcion para usar la nueva variable http y realizar una peticion http a un servicio web
getPosts(){
return this.http.get('https://jsonplaceholder.typicode.com/posts');
}
}
/*Fin data.services.ts***************************************************************************************************************/
/*Inicio de PostComponent.ts*/
import { DataService } from '../../services/data.service'; /*Se debe importar el servicio recien creado data.services.ts */
@Component({
selector: 'app-post',
templateUrl: './post.component.html',
styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
datos : any;
constructor(private DataServices:DataService) { }
//funcion que se ejecuta cuando se carga la pagina de post
ngOnInit(): void {
//asi se suscribe a un servicion es decir abre conexion al servicio cuando finaliza la peticion se cierra pero en muchas
//ocaciones tal vez no pase, asi que se debe cerrar la peticion manualmente o dejar que angular lo haga.
/*this.DataServices.getPosts()
.subscribe((posts:any)=>{
this.datos = posts;
console.log(posts);
});*/
this.datos = this.DataServices.getPosts(); /*Se crea una variable de tipo any con el nombre dato el cual solo contiene un puntero a el servicio*/
}
}
/* FIN de PostComponent.ts*/