El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Usando Servicios de Angular

Siguiente ►
►

En este tema, aprenderemos cómo utilizar servicios en Angular dentro de una aplicación Ionic. Los servicios son una parte fundamental de Angular, ya que permiten compartir datos y lógica entre diferentes componentes de la aplicación. Vamos a cubrir los siguientes puntos:

  1. ¿Qué es un servicio en Angular?
  2. Creación de un servicio.
  3. Inyección de dependencias.
  4. Uso de servicios en componentes.
  5. Ejemplo práctico.
  6. Ejercicio práctico.

  1. ¿Qué es un servicio en Angular?

Un servicio en Angular es una clase que contiene lógica y datos que pueden ser compartidos entre diferentes componentes de la aplicación. Los servicios se utilizan para:

  • Encapsular lógica de negocio.
  • Compartir datos entre componentes.
  • Realizar operaciones asíncronas, como llamadas HTTP.
  • Manejar la lógica de autenticación y autorización.

  1. Creación de un servicio

Para crear un servicio en Angular, utilizamos el comando ng generate service o su abreviatura ng g s. Vamos a crear un servicio llamado data.

ng generate service data

Este comando generará dos archivos: data.service.ts y data.service.spec.ts. El archivo data.service.ts contiene la lógica del servicio, mientras que data.service.spec.ts es para pruebas unitarias.

  1. Inyección de dependencias

Angular utiliza el patrón de inyección de dependencias para gestionar los servicios. Esto significa que los servicios se inyectan en los componentes que los necesitan. Para que un servicio esté disponible en toda la aplicación, debemos proporcionarlo en el root de la aplicación.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }
}

La anotación @Injectable con el parámetro { providedIn: 'root' } indica que el servicio está disponible en toda la aplicación.

  1. Uso de servicios en componentes

Para utilizar un servicio en un componente, primero debemos inyectarlo en el constructor del componente. Vamos a inyectar el DataService en un componente llamado HomeComponent.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    // Aquí podemos usar el servicio
  }
}

  1. Ejemplo práctico

Vamos a crear un ejemplo práctico donde el DataService obtiene datos de una API y los comparte con el HomeComponent.

Paso 1: Modificar el servicio para obtener datos

Primero, vamos a modificar el DataService para que realice una solicitud HTTP a una API. Necesitamos importar el módulo HttpClientModule en el AppModule.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts() {
    return this.http.get(this.apiUrl);
  }
}

Paso 2: Inyectar el servicio en el componente y usarlo

Ahora, vamos a inyectar el DataService en el HomeComponent y usar el método getPosts para obtener datos.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  posts: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getPosts().subscribe((data: any) => {
      this.posts = data;
    });
  }
}

Paso 3: Mostrar los datos en la plantilla

Finalmente, vamos a mostrar los datos obtenidos en la plantilla del HomeComponent.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <ion-label>
        <h2>{{ post.title }}</h2>
        <p>{{ post.body }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

  1. Ejercicio práctico

Ejercicio

Crea un servicio llamado UserService que obtenga una lista de usuarios de la API https://jsonplaceholder.typicode.com/users. Luego, inyecta este servicio en un componente llamado UserComponent y muestra la lista de usuarios en la plantilla del componente.

Solución

Paso 1: Crear el servicio

ng generate service user

Paso 2: Modificar el servicio para obtener datos

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get(this.apiUrl);
  }
}

Paso 3: Crear el componente

ng generate component user

Paso 4: Inyectar el servicio en el componente y usarlo

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.getUsers().subscribe((data: any) => {
      this.users = data;
    });
  }
}

Paso 5: Mostrar los datos en la plantilla

<ion-header>
  <ion-toolbar>
    <ion-title>
      Users
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-label>
        <h2>{{ user.name }}</h2>
        <p>{{ user.email }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Conclusión

En esta sección, hemos aprendido qué son los servicios en Angular, cómo crearlos, inyectarlos en componentes y utilizarlos para obtener datos de una API. Los servicios son una herramienta poderosa para compartir lógica y datos entre diferentes partes de una aplicación, y son esenciales para construir aplicaciones escalables y mantenibles. En el próximo módulo, exploraremos cómo almacenar datos localmente en una aplicación Ionic.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados