Introducción a los servicios en Angular

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 🙂

2 comentarios

  1. I have been browsing online more than three hours as of late, but I by no means discovered any
    interesting article like yours. It is lovely price sufficient for me.
    Personally, if all site owners and bloggers made
    excellent content material as you did, the web might be much more helpful than ever before.

  2. My programmer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a variety of websites for about a year and am anxious about
    switching to another platform. I have heard excellent
    things about blogengine.net. Is there a way I can import all my wordpress content into it?
    Any kind of help would be really appreciated!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar