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 🙂

37 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 Is there a way I can import all my wordpress content into it?
    Any kind of help would be really appreciated!

  3. Howdy! I realize this is kind of off-topic however I needed to ask.
    Does building a well-established website such as yours require a massive amount work?
    I’m brand new to writing a blog but I do write in my journal daily.

    I’d like to start a blog so I will be able to share my experience and thoughts online.
    Please let me know if you have any recommendations or tips for new aspiring bloggers.
    Appreciate it!

  4. Hey! I’m at work browsing your blog from my new iphone
    4! Just wanted to say I love reading your blog and look forward to all your posts!
    Keep up the excellent work!

    Review my page:

  5. Very good information. Lucky me I found your blog by accident (stumbleupon).
    I have saved it for later!

    Also visit my blog post: chef’s knife

  6. Just what I was searching for, appreciate it for posting.

    Here is my web site: tooth pain relief

  7. Hi there Dear, are you actually visiting this website
    regularly, if so afterward you will definitely obtain fastidious know-how.

  8. Fantastic blog you have here but I was wondering if you knew of
    any community forums that cover the same topics discussed here?
    I’d really like to be a part of group where I can get suggestions from
    other experienced individuals that share the same interest.
    If you have any recommendations, please let me know.

  9. We stumbled over here from a different page and thought I may as well check
    things out. I like what I see so now i’m following you. Look forward to looking over your web
    page yet again.

  10. This blog was… how do you say it? Relevant!!
    Finally I have found something which helped
    me. Many thanks!

  11. But wanna remark that you have a very nice website, I the style it really stands out.

    Feel free to visit my web site;

  12. Can I simply just say what a relief to uncover someone
    that truly knows what they are discussing on the
    net. You actually understand how to bring a problem to light and make it
    important. A lot more people should read this and understand this side of the story.
    I can’t believe you are not more popular because you
    definitely possess the gift.

    my blog post

  13. Great article! That is the type of info that should be
    shared around the net. Disgrace on Google for now not positioning this put up upper!
    Come on over and discuss with my site . Thank you =)

  14. Thank you for the good writeup. It in reality was once a amusement
    account it. Glance advanced to more introduced agreeable
    from you! By the way, how could we communicate?

  15. This is the perfect web site for everyone who
    would like to understand this topic. You realize a whole lot its almost tough to argue with
    you (not that I personally will need to…HaHa). You definitely put a fresh spin on a topic that has been written about for years.
    Excellent stuff, just great!

  16. Thanks for finally talking about > Introducción a los servicios
    en Angular – Java desde 0 < Loved it!

  17. Awesome blog! Is your theme custom made or did you
    download it from somewhere? A design like yours with a few simple adjustements would really make my blog shine.
    Please let me know where you got your design. Bless you

  18. I blog quite often and I genuinely appreciate your information. Your article
    has truly peaked my interest. I am going to take a note of your blog
    and keep checking for new details about once a week. I subscribed to your Feed as well.

  19. When I initially left a comment I seem to have clicked on the -Notify me when new comments are added- checkbox and from now on every time a comment is
    added I recieve 4 emails with the exact same comment.
    Perhaps there is an easy method you are able to remove me from that service?

  20. I’ve beеn browsing online more than 3 hours today, yet I nevsr found any interesting article like yours.
    It is pretty worth enouցh for me. In my view, if
    aⅼl web owners and blօggers made good content as
    you did, tthe internet wіll be a lot more useful than ever before.

    My ԝebрaɡe debt consolidation

  21. Firset off I would like tօ say ѕuperb blog!
    I had a quick question that I’d like tо ask if you do nnot mind.

    I waѕ curious to know howw you center yourself aand clear
    your thougһts before writing. I have had trouble clearing my mind
    in gettig myү thougfhts out there. I truly do
    enjoy writing but it jսst seems like the first 10 to 15 minute are generally wasteⅾ just trying tto figure out how to
    begin. Any recommendations or hints? Cheers!

    My web-site; debt consolidation (

  22. My family all the time say that I am wasting my time here at
    web, except I know I am getting experience daily by reading such pleasant posts.

  23. Quality content iss the crucial tⲟo interest the peoρⅼe to go to
    see the site, that’s what this web pazge iis provіding.

    my web page; debt consolidation (http)

  24. I am in fact happy to read this blog posts which includes plenty of useful information, thanks for providing these

  25. I really like what you guys are usually up too.
    Such clever work and reporting! Keep up the terrific works guys I’ve included you guys to

  26. Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my
    comment didn’t appear. Grrrr… well I’m not writing all that over again. Regardless,
    just wanted to say superb blog!

  27. Greetings from Los angeles! I’m bored to tears at work so I decided to
    browse your blog on my iphone during lunch break.
    I really like the information you provide here and can’t wait to take a look when I get home.
    I’m shocked at how quick your blog loaded on my cell phone
    .. I’m not even using WIFI, just 3G .. Anyhow, very good site!

  28. We will teach you how to earn $ 7000 per hour. Why?
    We will profit from your profit.

  29. Thanks to my father who told me on the topic of this web site,
    this web site is truly awesome.

  30. I’d like to find out more? I’d like to find out more details.

  31. I was able to find good information from your content.

  32. I think the admin of this web site is actually working hard in support
    of his web page, since here every information is quality based material.

  33. Hello! This is my first visit to your blog! We are a team of volunteers and starting a new
    project in a community in the same niche. Your blog provided us valuable information to work on. You have done a outstanding

  34. Hey! Someone in my Myspace group shared this site with us so I came to take a
    look. I’m definitely enjoying the information. I’m bookmarking and
    will be tweeting this to my followers! Great blog and great design and style.

  35. Howdy, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam comments?

    If so how do you protect against it, any plugin or anything you can recommend?
    I get so much lately it’s driving me mad so any support is very
    much appreciated.

  36. Thanks for any other informative blog. The place else could I get that kind of
    information written in such an ideal method? I have a
    project that I am simply now working on, and I’ve been on the look out for such info.

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.