TECNOLOBO

No recuerdas tu codigo?
Se te olvido como se hace?

Aqui podras guardar lo que necesiten
Y cuando sea necesesario

Creado por julian gomez
iiiiii

consumir servicio JSON



Descripcion

Como crear un service y consumirlo ionic

html


<!-- 
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>

						

typescript


/*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*/