En este artículo os presentaremos a los servicios también conocidos como “services”. Una de las piezas fundamentales en el desarrollo de aplicaciones Angular.

¿Qué son los servicios?

Un servicio es la capa encargada de traer/proporcionarnos los datos a nuestra aplicación de Angular.

Normalmente, nuestro servicio para acceder a estos datos suelen conectarse al servidor donde están almacenada dicha información, por ejemplo una BBDD, una API Rest, etc.

Además de proporcionarnos dichos datos, un servicio también mantiene la lógica de acceso a dichos datos, es decir, define que podemos hacer y que no con los datos de la fuente, define a que datos podemos acceder, como realizaremos las llamadas a dichos datos, etc.

Los servicios nos van a permitir desde comunicar componentes hasta consumir webservices o cualquier otra tarea.

Los servicios se encargan en traer datos y los componentes en presentarlos de manera correcta.

Creando nuestro primer servicio manualmente

Para crear nuestros servicios vamos al directorio src>app y creamos un nuevo fichero:

Como casi todo en Angular, los servicios son clases TypeScript.

La estructura de su nombre debe de ser nombreServicio.service.ts

Ahora, en su interior definimos la clase y realizamos el export para que sea visible desde el resto del modulo:

Un ejemplo podría de un servicio (que por el momento no se comunica con nadie) y con los datos hardcodeados podría ser:

Si queremos podemos hacer una representación “más real” (aunque también hardcodeada ya que no nos estamos conectado a ningún sitio ni obteniendo dichos datos desde algún medio) del servicio haciendo que getUsuarios nos devuelva un listado de objetos de los usuarios de una BBDD (por ejemplo):

Hasta ahora, simplemente hemos mostrando los datos por la consola pero ni los hemos guardado en nuestro componente y hemos trabajado con ellos.

Pero podemos guardar los datos en nuestro componente además, una vez tenemos los datos en nuestro componente podemos mostrar dicha información en nuestro template de la siguiente manera:

El resultado será:

Creando nuestro un servicio mediante a la instrucción de @angular/cli

Existe la alternativa de agilizar la velocidad de creación de la estructura de servicio gracias a la instrucción @angular/cli:

ng generate service <name> [options]

ng g s <name> [options]

En el fichero del servicio, vemos que además nos aparece un @Inyectable del que hablaremos en próximos artículos.

Si nos fijamos esta alternativa de crear un servicio es mucho más rápida y además nos crea un archivo para escribir los test de dicho servicio.

Tight Coupling vs Dependency Injection

En el ejemplo que acabamos de mostrar, realizábamos una instanciación del servicio users.service.ts mediante a una llamada a su constructor (que aunque no existe sería por defecto en blanco) new UserService() y posteriormente realizábamos la llamada hacía su método getUsers.

Pero ¿Qué pasaría si queremos pasarle parámetros a dicho constructor? Pues que tendremos que escribir dichos parámetros en cada uno de los componentes o no mostrará un mensaje de error:

Podemos añadir las claves al constructor cuando realizamos la instanciación de la clase y resolvemos el problema:

Pero como podéis ver tenemos una dependencia de la clase UserService que contiene el servicio. Por lo que, nuestro componente no va a actuar de forma independiente al servicio esto es lo que se conoce bajo el termino de Tight Coupling.

Para resolver esta dependencia, en la próxima lección os explicaremos como resolver esto mediante a la inyección de dependencias (injection dependency).

Espero que os haya gustado la lección. Nos vemos, un saludo 🙂