WhatsApp

  
Domina la Implementación de Servicios en Angular: Ejemplos de GET y POST

Domina la Implementación de Servicios en Angular: Ejemplos de GET y POST

Empiece a escribir aquí...

Creando un Servicio en Angular

En la arquitectura de aplicaciones Angular, los servicios desempeñan un papel fundamental. Son clases que permiten compartir datos y lógica entre componentes y son especialmente útiles cuando se trata de consumir APIs externas.

Paso 1: Genera un Nuevo Servicio

Para comenzar, abre tu terminal y navega hasta el directorio raíz de tu proyecto Angular. A continuación, ejecuta el siguiente comando para generar un nuevo servicio. Asegúrate de sustituir "nombre-del-servicio" con el nombre que desees para tu servicio:


ng generate service nombre-del-servicio

Paso 2: Estructura del Servicio

El comando anterior generará dos archivos: nombre-del-servicio.service.ts y nombre-del-servicio.service.spec.ts. El primero es donde escribiremos la lógica del servicio, y el segundo se utiliza para pruebas unitarias.

Paso 3: Inyectar Dependencias y Configurar HttpOptions

Si tu servicio necesita interactuar con APIs externas, debes inyectar el módulo HttpClient en el constructor y configurar HttpHeaders y httpOptions. Aquí te muestro cómo hacerlo:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class NombreDelServicioService {
private apiUrl = 'URL_DE_TU_API_EXTERNA'; // Reemplaza con la URL de tu API externa

// Inyecta el módulo HttpClient en el constructor
constructor(private http: HttpClient) { }

// Método para obtener datos desde la API externa mediante una solicitud GET
obtenerDatosDesdeAPI(): Observable<any> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud GET a la API externa con las opciones configuradas
return this.http.get(this.apiUrl, httpOptions);
}

// Método para enviar datos a la API externa mediante una solicitud POST
enviarDatosALaAPI(datos: any): Observable<any> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud POST a la API externa con las opciones configuradas
return this.http.post(this.apiUrl, datos, httpOptions);
}
}

En estos métodos, hemos configurado httpOptions con un encabezado de tipo de contenido ('Content-Type') y un encabezado de autorización ('Authorization'). Asegúrate de ajustar la URL y los encabezados según tu propia API y requisitos de autenticación

Paso 5: Importar y Usar en un Componente

Para utilizar el servicio en un componente, primero debes importarlo y luego inyectarlo en el constructor del componente. Luego, puedes usar los métodos del servicio según sea necesario para interactuar con las APIs externas. Aquí tienes un ejemplo de cómo importar y usar el servicio en un componente:

import { Component, OnInit } from '@angular/core';
import { NombreDelServicioService } from './nombre-del-servicio.service'; // Importa el servicio

@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html',
styleUrls: ['./mi-componente.component.css']
})
export class MiComponente implements OnInit {

constructor(private servicio: NombreDelServicioService) { } // Inyecta el servicio en el constructor

ngOnInit(): void {
// Utiliza los métodos del servicio para interactuar con la API externa
this.servicio.obtenerDatosDesdeAPI().subscribe(data => {
// Procesa los datos recibidos
});
}
}

Paso 6: Registrar el Servicio en un Módulo

Finalmente, asegúrate de registrar el servicio en el módulo de tu aplicación. Puedes hacerlo agregando el servicio en la propiedad providers del módulo, generalmente en el archivo app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Importa el módulo HttpClient

import { AppComponent } from './app.component';
import { NombreDelServicioService } from './nombre-del-servicio.service'; // Importa el servicio

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule // Agrega el módulo HttpClient a los imports
],
providers: [
NombreDelServicioService // Registra el servicio en providers
],
bootstrap: [AppComponent]
})
export class AppModule { }

Con estos pasos, habrás creado un servicio en Angular, lo habrás importado en un componente y lo habrás registrado en un módulo, lo que te permitirá consumir APIs externas de manera efectiva en tu aplicación Angular. ¡Estás listo para comenzar a trabajar con servicios y APIs externas!

Ejemplo: API Películas GET y POST

Hemos creado un servicio llamado EntryService para ilustrar cómo configurar y utilizar servicios en Angular. Este servicio se encarga de interactuar con una API externa para realizar operaciones relacionadas con películas y clasificaciones.


Estructura del Servicio


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface Movie {
id: number;
nombre: string;
director: string;
clasificacion: string;
}

export interface Classification {
id: number;
nombre: string;
}

@Injectable({
providedIn: 'root'
})
export class EntryService {
private apiUrl = 'http://localhost:3000'; // Reemplaza con la URL de tu API externa
constructor(private http: HttpClient) { }

// Método para obtener películas mediante una solicitud GET
getMovies(): Observable<Movie[]> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud GET a la API externa con las opciones configuradas
return this.http.get<Movie[]>(`${this.apiUrl}/peliculas`, httpOptions);
}

// Método para obtener clasificaciones mediante una solicitud GET
getClassifications(): Observable<Classification[]> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud GET a la API externa con las opciones configuradas
return this.http.get<Classification[]>(`${this.apiUrl}/clasificaciones`, httpOptions);
}

// Método para agregar una película mediante una solicitud POST
addMovie(movie: Movie): Observable<Movie> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud POST a la API externa con las opciones configuradas
return this.http.post<Movie>(`${this.apiUrl}/peliculas`, movie, httpOptions);
}

// Método para agregar una clasificación mediante una solicitud POST
addClassification(classification: Classification): Observable<Classification> {
// Configura las opciones de la solicitud HTTP
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'token_' // Reemplaza 'token_' con tu token real si es necesario
})
};

// Realiza la solicitud POST a la API externa con las opciones configuradas
return this.http.post<Classification>(`${this.apiUrl}/clasificaciones`, classification, httpOptions);
}
}

Explicación:

  1. Importamos las dependencias necesarias, incluyendo HttpClient, que nos permite hacer solicitudes HTTP.
  2. Creamos una clase llamada EntryService y la marcamos como un servicio inyectable utilizando el decorador @Injectable.
  3. Definimos la URL de nuestra API externa en private apiUrl. Debes reemplazarla con la URL real de tu API.
  4. Implementamos cuatro métodos:
    • getMovies(): Realiza una solicitud GET para obtener una lista de películas desde la API.
    • getClassifications(): Realiza una solicitud GET para obtener una lista de clasificaciones desde la API.
    • addMovie(movie: Movie): Realiza una solicitud POST para agregar una película a la API.
    • addClassification(classification: Classification): Realiza una solicitud POST para agregar una clasificación a la API.
  5. En cada método, configuramos las opciones de solicitud (httpOptions) que incluyen el encabezado 'Content-Type' como 'application/json' y un encabezado de autorización ('Authorization') con un token ficticio ('token_'). Debes actualizar estos valores según las necesidades de tu API.


Importar el servicio en un componente

1. Importar el Servicio y Tipos


import { Component, OnInit } from '@angular/core';
import { EntryService, Movie, Classification } from './entry.service';

2. Inyectar el Servicio en el Constructor

constructor(private entryService: EntryService) {}

3. Usar los Métodos del Servicio en ngOnInit


ngOnInit(): void {
this.entryService.getMovies().subscribe(data => {
this.movies = data;
});

this.entryService.getClassifications().subscribe(data => {
this.clasificaciones = data;
});
}

4. Agregar Datos Utilizando los Métodos del Servicio


const newMovie: Movie = {
id: this.movies.length + 1,
nombre: "Nueva Película",
director: "Nuevo Director",
clasificacion: "Nueva Clasificación"
};

this.entryService.addMovie(newMovie).subscribe(response => {
console.log("Película agregada:", response);
});
}

addClassification() {
const newClassification: Classification = {
id: this.clasificaciones.length + 1,
nombre: "Nueva Clasificación"
};

this.entryService.addClassification(newClassification).subscribe(response => {
console.log("Clasificación agregada:", response);
});
}

Configuración del archivo app.module.ts

Dentro de nuestro proyecto Angular, el archivo app.module.ts juega un papel crucial. Aquí es donde configuramos y registramos todos los componentes, módulos y servicios que nuestra aplicación necesita. Vamos a echar un vistazo a cómo se ve este archivo después de haber configurado nuestro servicio EntryService.

Importación del Servicio y el Módulo HttpClientModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EntryService } from './entry.service'; // Importamos nuestro servicio aquí
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; // Importamos el módulo HttpClientModule

  • Hemos importado nuestro servicio EntryService en la parte superior del archivo. Esto nos permite utilizarlo en toda la aplicación.

  • También hemos importado el módulo HttpClientModule. Este módulo proporciona las capacidades necesarias para realizar solicitudes HTTP en nuestra aplicación Angular.

Configuración de Imports

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule // Agregamos el módulo HttpClientModule a la lista de imports
],
providers: [EntryService], // Registramos nuestro servicio como proveedor
bootstrap: [AppComponent]
})

  • En la sección de declarations, enumeramos todos los componentes que utilizaremos en nuestra aplicación. En este caso, solo tenemos AppComponent.

  • En la sección de imports, hemos agregado BrowserModule y AppRoutingModule para habilitar funcionalidades fundamentales y manejar las rutas de nuestra aplicación. Además, hemos incluido HttpClientModule para permitir solicitudes HTTP.

  • La sección de providers es donde registramos nuestro servicio EntryService como proveedor. Esto hace que el servicio esté disponible en toda la aplicación y se pueda inyectar en los componentes que lo necesiten.

Resumen

Con esta configuración final en el archivo app.module.ts, hemos habilitado el uso de nuestro servicio EntryService y el módulo HttpClient para realizar solicitudes HTTP. Esto es esencial para interactuar con APIs externas y proporciona una base sólida para construir una aplicación Angular efectiva y dinámica.

Ahora, estamos listos para utilizar nuestro servicio en componentes y aprovechar al máximo las capacidades de Angular.


Compartir

Domina la Implementación de Servicios en Angular: Ejemplos de GET y POST
Luis Alberto González Trejo 14 septiembre, 2023
Compartir
Categorías


Iniciar sesión dejar un comentario

  
App de Angular con Nginx: Guía Paso a Paso