Angular: 9. Servicios de datos

Vamos a ver qué son los servicios en Angular y para qué sirven.

Como casi todo en Angular, los servicios son clases TypeScript. Su propósito es contener lógica de negocio, clases para acceso a datos o utilidades de infraestructura. Estas clases son perfectamente instanciables desde cualquier otro fichero que las importe. Pero Angular nos sugiere y facilita que usemos su sistema de inyección de dependencias.

Básicamente un servicio es un proveedor de datos, que mantiene lógica de acceso a ellos y operativa relacionada con el negocio y las cosas que se hacen con los datos dentro de una aplicación. Los servicios serán consumidos por los componentes, que delegarán en ellos la responsabilidad de acceder a la información y la realización de operaciones con los datos.

Vamos a crear un servicio sencillo. Primero creamos una carpeta "services" dentro de la carpeta de "app". Y dentro de la carpeta "services" creamos un fichero nuevo llamado "heroes.service.ts", que será nuestro servicio, y lo informamos con el siguiente código:

Como se puede ver, no es más que una clase con un código parecido al de un componente, solo que utilizamos el decorador "Injectable" en lugar del "Component". Dentro del constructor hemos puesto una frase para que escriba en el log cuando se ejecute el servicio.

Una vez terminado el servicio, debemos añadirlo al fichero "app.module.ts", al igual que como hacíamos con los componentes. Debemos importarlo y declararlo en la parte de "providers", tal y como se ve a continuación:

Por último, debemos insertar el servicio en un componente. Lo ideal es que cada componente tenga su propio servicio, de ahí que sea recomendable nombrar el servicio de la misma forma que el componente. En éste caso, vamos a configurar el componente "heroes.component,ts" para que utilice los datos del nuevo servicio "heroes.service.ts". Modificamos el fichero "heroes.component,ts" como se ve a continuación:

Como se puede ver, hemos importado el servicio en la línea 2 del fichero, y le hemos inyectado el servicio al componente en el constructor de éste último, en la línea 11, pasándole un objeto de la clase del servicio como parámetro de entrada. Con ésto, el componente ya puede utilizar el servicio sin problemas.

Aquí vamos a hacer un inciso sobre el tema de la inyección de dependencias en TypeScript.

Cuando TypeScript detecta el modificador de visibilidad "public" o "private" en el parámetro enviado al constructor, inmediatamente declara una propiedad en la clase y le asigna el valor recibido en el constructor. Por tanto, esta declaración:

export class HeroesComponent implements OnInit {

  constructor(private _heroesService:HeroesService) { }

}

Sería equivalente a escribir todo el código siguiente:

export class HeroesComponent implements OnInit {

  private _heroesService:HeroesService;

  constructor(_heroesService:HeroesService) {

    this._heroesService = _heroesService;

  }

}

En resumen, TypeScript entiende que, si defines la visibilidad de un parámetro en el constructor, lo que quieres hacer en realidad es crear una propiedad en el objeto recién construido, con el valor recibido por parámetro.

Bien. Tras esta explicación, ya podemos ver el resultado del código. Ejecutamos la aplicación, y al pulsar la sección de héroes del menú, vemos que se ejecuta el código que insertamos en el constructor del servicio:

Vamos ahora a modificar el servicio para utilizarlo como proveedor de datos para el componente. Vamos a crear un array de datos en el servicio, que posteriormente será utilizado por el componente para mostrarlo por la pantalla.

Primero vamos a modificar el servicio "heroes.service.ts" y, al final del fichero, fuera de la clase, vamos a crear una interface "Heroe" con los datos y tipos que aparecen a continuación:

Después, dentro de la clase "HeroesService", declaramos una propiedad array del tipo de la interfaz "Heroe" que acabamos de crear antes, y lo rellenamos con datos de ejemplo como aparece a continuación:

Por último, dentro de la clase, creamos una función "getHeroes" que nos devuelva la propiedad "heroes":

Ya hemos terminado de modificar el servicio. Ahora modificamos el componente "heroes.component.ts" como se ve a continuación:

Como se puede ver, primero hemos añadido la interfaz "Heroe" a la lista de importaciones en la línea 2.
Depués, en la línea 11, hemos creado una propiedad del tipo de la interfaz del servicio que hemos importado (Heroe).
Por último, en la función "ngOnInit" (que es una función que se ejecuta automáticamente una vez que se haya construido el componente, es decir, después del constructor) hemos indicado que la propiedad "heroes" del componente va a ser igual a la propiedad "heroes" del servicio. Es en ésta línea donde estamos pasando la información del servicio al componente.

Una vez modificada la clase del componente, vamos a modificar su código html ("heroes.component.html") para mostrar los datos recibidos del servicio.
Vamos a utilizar la directiva *ngFor para que aparezca una tarjeta por cada elemento del array "heroes" del componente:

Y éste sería el resultado al levantar la aplicación:

Y eso sería todo.

Como último apunte, aquí hemos creado el servicio de forma manual, pero al igual que ocurre con los componentes, los servicios pueden ser creados mediante línea de comandos. En la consola de comandos, nos situamos dentro del proyecto y ejecutamos el siguiente código:

ng g s services/heroes

Este código tendría el mismo efecto que crear los ficheros a mano. El comando se puede traducir como "ng generate service services/heroes", donde "services/heroes" es la ruta donde va a crearlo.