TypeScript / Angular – Services

Bienvenidos sean a este post, hoy hablaremos sobre los servicios.

Hasta el post anterior hemos generado una aplicacion bastante avanzada pero todavia muy basica. Para mejorar esto, agregaremos dos conceptos de angular como son servicio e inyeccion. El primer concepto se refiere a la capacidad de poder separar los datos de la aplicacion y las funciones para poder ser usados en otros componentes de la aplicacion, y a su vez para poder ser usados de esta manera deben ser inyectables. El segundo concepto tambien denominado inyeccion de dependencias es el encargado de manejar las dependencias de los componentes de la aplicacion y servicios para que puedan ser usados por otros componentes. Para ver como trabajan estos conceptos utilizaremos el codigo de nuestro proyecto, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser utilizado. Nuestro primer paso sera ejecutar el siguiente comando en el directorio raiz de la aplicacion:

$ ng generate service viviendas --skip-tests

Este nos creara un archivo con el nombre de viviendas.service.ts en el directorio app. Con nuestro archivo creado vamos a modificarlo de la siguiente manera:

app/viviendas.service.ts

import { Injectable } from '@angular/core';
import { Ubicacionviviendas } from './ubicacionviviendas';

@Injectable({
  providedIn: 'root'
})
export class ViviendasService {
  readonly url = 'https://angular.io/assets/images/tutorials/faa';

  listaUbicacionViviendas: Ubicacionviviendas[] = [
    {
        id: 0,
        nombre: 'Casa inicial',
        ciudad: 'Santa Rosa',
        pcia: 'CBA',
        foto: `${this.url}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`,
        wifi: false
    },
    {
        id: 1,
        nombre: 'Departamento Universitario',
        ciudad: 'Cordoba',
        pcia: 'CBA',
        foto: `${this.url}/brandon-griggs-wR11KBaB86U-unsplash.jpg`,
        wifi: true
    },
    {
        id: 2,
        nombre: 'Casa grande y antigua',
        ciudad: 'Alta Gracia',
        pcia: 'CBA',
        foto: `${this.url}/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg`,
        wifi: false
    },
    {
        id: 3,
        nombre: 'Casa confortable',
        ciudad: 'Villa General Belgrano',
        pcia: 'CBA',
        foto: `${this.url}/ian-macdonald-W8z6aiwfi1E-unsplash.jpg`,
        wifi: true
    },
    {
        id: 4,
        nombre: 'Casa moderna',
        ciudad: 'Embalse',
        pcia: 'CBA',
        foto: `${this.url}/krzysztof-hepner-978RAXoXnH4-unsplash.jpg`,
        wifi: true
    },
    {
        id: 5,
        nombre: 'Casa final',
        ciudad: 'Santa Monica',
        pcia: 'CBA',
        foto: `${this.url}/r-architecture-JvQ0Q5IkeMM-unsplash.jpg`,
        wifi: true
    }
  ];

  getTodasUbicaciones(): Ubicacionviviendas[] {
        return this.listaUbicacionViviendas;
  }
  getUbicacionPorId(id: number): Ubicacionviviendas | undefined {
        return this.listaUbicacionViviendas.find(
          ubicacionViviendas => ubicacionViviendas.id === id);
  }
}

Lo primero que hicimos fue importar a nuestra interfaz, luego modificamos la exportacion de la clase y en este agregamos las casas que contenemos en hogar.component.ts, ,es exactamente el mismo codigo. Y al final agregamos dos funciones. La primera nos devolvera todas las ubicaciones de las casas. La segunda nos devolvera la especificada mediante el id de cada una. Para ello usa el find y lo hace mediante el id informado y la propiedad id de este listado.

Lo siguiente es ir a hogar.component.ts donde al inicio del archivo agregaremos la siguiente linea:

import { ViviendasService } from '../viviendas.service';

Esto nos importara el servicio que creamos anteriormente, luego tomaremos esta linea:

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

Y lo modificaremos de la siguiente manera:

import { Component, inject } from '@angular/core';

En este caso importamos a inject para poder realizar la inyeccion del servicio. Nuestro ultimo paso sera modificar el bloque de exportacion de la clase HogarComponent de la siguiente manera:

export class HogarComponent {
  listaUbicacionViviendas: Ubicacionviviendas[] = [];
  serviceViviendas: ViviendasService = inject(ViviendasService);

  constructor() {
        this.listaUbicacionViviendas = this.serviceViviendas
                                        .getTodasUbicaciones();
  }
}

Basicamente, eliminamos los datos que contenia para luego inyectar a nuestro nuevo servicio y que sea este el que devuelve la infomracion. Por eso primero creamos un array para contenerlo y este seaa del tipo de Ubicacionviviendas. Luego tenemos el objeto que usaremos de servicio y este sera el que recibe la inyeccion del servicio. Para finalmente mediante un constructor mostraremos el resultado de utilizar a la funcion encargada de mostrar todas las ubicaciones. Si lo comprueban el sitio deberia seguir funcionando de la misma forma pero ahora los datos se obtienen mediante el servicio. Convirtiendo a la aplicacion en una forma mas practica de poder enviar los datos sin tener que modificarla cada vez que deseamos agregar datos o simplemente estabeciendo otro origen, como una base de datos. Antes de finalizar les dejo un link para descargar todos los archivos del proyectos y los trabajados en este post:

En resumen, hoy hemos visto servicios, que es, para que sirve, como se utiliza, con quien va de la mano, y finalmente lo aplicamos en nuestro proyecto para ver como trabaja. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.