Cómo consumir una API RESTFul con Angular: Tutorial paso a paso
Angular es un framework de desarrollo de aplicaciones web que permite crear aplicaciones de una sola página de forma rápida y eficiente. En este tutorial, te mostraremos cómo consumir una API RESTFul con Angular paso a paso.
Paso 1: Crear un nuevo proyecto de Angular
Lo primero que necesitamos hacer es crear un nuevo proyecto de Angular. Para ello, abrimos una terminal y nos dirigimos a la carpeta en la que queremos crear el proyecto. Luego ejecutamos el siguiente comando:
ng new nombre_del_proyecto
Paso 2: Crear un servicio para consumir la API
Una vez creado el proyecto, necesitamos crear un servicio en Angular que nos permita consumir la API RESTFul. Para ello, creamos un archivo llamado api.service.ts y lo ubicamos en la carpeta de servicios de nuestro proyecto. A continuación, escribimos el siguiente código en el archivo:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'URL_DE_LA_API_RESTFUL';
constructor(private http: HttpClient) { }
public obtenerDatos() {
return this.http.get(this.apiUrl);
}
}
Paso 3: Consumir la API desde un componente
Una vez creado el servicio, podemos consumir la API desde un componente de Angular. Para ello, creamos un nuevo componente o utilizamos uno existente y lo modificamos para que llame al servicio y obtenga los datos de la API. A continuación, mostramos un ejemplo de cómo hacerlo:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
@Component({
selector: 'app-ejemplo',
templateUrl: './ejemplo.component.html',
styleUrls: ['./ejemplo.component.css']
})
export class EjemploComponent implements OnInit {
public datos: any;
constructor(private apiService: ApiService) { }
ngOnInit(): void {
this.apiService.obtenerDatos().subscribe((response) => {
this.datos = response;
});
}
}
Conclusión
En este tutorial, hemos aprendido cómo consumir una API RESTFul con Angular paso a paso. Hemos creado un nuevo proyecto de Angular, creado un servicio para consumir la API y consumido la API desde un componente. Esperamos que este tutorial te sea útil para tus proyectos futuros. ¡Buena suerte!
Web de las API para desarrolladores: https://rickandmortyapi.com/
Quise integrarlo como prueba a mi proyecto ya que quiero trabajar con aws pero no me muestra por consola del navegador los datos del array 😢 (ocupo la misma api del video pero no muestra ) ayuda plis
R = /rr/
Gracias
Lo use para conectar el backend en Java y Spring Boot con el Frontend y funcionó a la primera, muchas gracias por compartir contenido de calidad.
Wow muchas gracias, funciona perfectamente
Muchas gracias, el video me sirvió para conectar una API que hice con Spring, genio!
Lo use para conectar una API desde Django Rest Framework y una app Ionic y me funcionó a la perfección, muchas gracias
Buen video, una consulta.
si tengo que pasar por la api headers y data (datos). como haría?
es necesario crear interfaces para renderizar el resto de propiedades de la api, o solo como lo mostraste en el video 13:32 sería suficiente.
Se puede hacer con localhost:8080?
Precioso video 🙂
'Promo SM' ✅
Cordial saludo, tengo una duda al momento de crear el proyecto ya salen todas las carpetas por defecto pero no tengo por ninuna parte la carpeta "app-routing.module.ts, sabes por qué?
Hola, el video esta bueno, pero al consumir otra api, me sale error
home.component.ts:21 ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
que puede ser?
Genial, vamos a ver si me puedo guiar de aquí..