Angular esencial

Crear un servicio en Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Los servicios de Angular son un elemento indispensable de su arquitectura, debido a que cada componente está desarrollado para tener una total encapsulación. Los servicios pueden ser inyectados dentro de diferentes componentes y comunicar datos a lo largo de toda la aplicación.
07:31

Transcripción

Los servicios son un elemento fundamental para poder trabajar una aplicación profesional. Los servicios nos van a servir a nosotros para comunicar información entre componentes. Por ejemplo, acá estoy trabajando con una aplicación que despliega diferentes componentes. En este caso, yo tengo un componente principal que está desplegando todos los elementos que se encuentran en la parte superior o encabezado. Y luego tengo otro componente que está desplegando los diferentes ítems de una lista. En este caso, si, por ejemplo, yo hago clic sobre cualquier elemento de esta lista, me va a mostrar dentro de un tercer componente la información relacionada con este ítem, en este caso un libro y su autor. Sin embargo, hay un detalle. A pesar de que yo estoy mostrando información del elemento seleccionado, por ejemplo, acá voy a escoger un libro, digamos Frankenstein, y podemos ver el autor, información relacionada con este libro, realmente mi aplicación no sabe exactamente dónde hice clic, porque lo que estamos haciendo realmente es que estamos abriendo un URL que tiene la información sobre este ítem y lo estamos desplegando a través de este URL. Mi aplicación puede saber que elegí el ítem número dos y me lo va a mostrar. Sin embargo, si yo refresco mi aplicación sin saber en dónde hice clic, igual me va a mostrar la información de este libro. O si cambio el'id' sin haber hecho clic en él, me va a mostrar la información de otro libro. En algunos casos, esto puede ser una conducta deseable, pero muchas veces vamos a necesitar saber exactamente dónde hizo clic el usuario o qué acción tomó el usuario y almacenar esa información que se mantenga a lo largo de la vida útil de nuestra aplicación. O, por ejemplo, que yo dentro de la sección del encabezado, como en esta donde parece Club de libros, yo pueda mostrar cuál fue el libro en que hizo clic el usuario. Hay una mala práctica común en la que muchos desarrolladores creen que para poder realizar esto lo que hacen es que tratan de generar una variable global o, por ejemplo, una variable dentro del navegador como, por ejemplo, un "local storage". Esto lo que va a hacer es que, si bien es cierto puede funcionar, va a romper completamente la encapsulación de Angular y vamos a estar desperdiciando abismalmente el uso de esta plataforma. Lo que vamos a hacer es que vamos a utilizar servicios. En esta lección, te voy a mostrar específicamente cómo crear y cómo implementar un servicio dentro de Angular utilizando la línea de comandos. Vamos a ir al código. Y acá yo tengo mi aplicación. Y como podemos ver, en el componente principal yo tengo dos etiquetas: una que dice'app-encabezado'y otra que dice'router-outlet'. Cada una de ellas está desplegando diferentes componentes. El servicio nos va a permitir a nosotros conectar ambos elementos y, por ejemplo, que'app encabezado' pueda recibir la información que se está desplegando dentro de'router-outlet'. Esto lo vamos a hacer implementando un servicio. Así que primero voy a ir a la terminal y en este caso yo estoy ejecutando el comando'ngServe' para desplegar el servidor de mi aplicación. Así que voy a presionar dos veces Cntrl + C y esto va a detener la ejecución del servidor. Una vez que haya detenido el servidor, lo que voy a hacer es que voy a ejecutar un comando que es'ng generate'. Y en este caso vamos a poner'service'. Esto lo que va a hacer es que va a generar un nuevo servicio. Y vamos a definir cuáles van a ser los libros que yo tengo seleccionados a partir de esta lista. Así que, basado en el funcionamiento que va a tener mi servicio, le vamos a poner: 'libros seleccionados' y vamos a presionar Enter. Y esto lo que va a hacer es que va a generar un nuevo servicio. Vemos acá que se han generado dos nuevos archivos, uno que dice'librosseleccionados. service. ts', que es el que contiene el código relativo a este servicio, y otro que se llama 'librosseleccionados. service. spec', que es el que me va a servir a mí para realizar las pruebas correspondientes de "unit testing" dentro de mi aplicación. Ahora, acá también me parece una advertencia que dice que el servicio fue generado, pero no ha sido'provided'. Eso significa que aún no se encuentra habilitado dentro mi aplicación. Entonces, vamos a habilitarlo dentro de la aplicación. Vamos a ir a'app. model. ts', que es donde se encuentra la implementación base de nuestra aplicación, en este caso el módulo principal. Así que lo que voy a hacer es que voy a insertar acá una línea adicional donde voy a activar el servicio que acabo de crear. Así que para eso voy a poner'import' y voy a llamar el servicio que acabo de crear. Vemos que mi servicio se encuentra dentro de'librosseleccionados. service. ts'. Lo voy a abrir. Y acá está el código base de mi servicios. Vemos que está generando una clase llamada'librosseleccionados. service'. Así que voy a copiar ese nombre, simplemente para estar seguro de que estoy insertándolo correctamente, y lo voy a pegar acá dentro de las llaves del'import'. Ahora también voy a decir desde dónde voy a importar esta nueva clase. Así que voy a decir'from' y entre comillas vamos a poner: punto "slash". Y en este caso esto significa que estamos en la raíz de la aplicación, en este caso'app', y vamos a elegir el nombre del archivo, en este caso'librosseleccionados. service'. Vamos a definir: 'libros seleccionados' punto 'service'. Quiero que notes que, en este caso, yo no estoy incluyendo la extensión. TS ¿sí? Simplemente estoy llamando el nombre del archivo sin la extensión final. Si pones TS, te va a dar un error. Ahora ya definimos de dónde vamos a importar este modelo. Y nos falta un último paso para dejar ya listo nuestro módulo creado dentro de la aplicación y es que vamos a buscar acá la sección'providers'. Dentro de'providers', tenemos un arreglo o un "array" vacío y vamos a insertar acá el valor de este nuevo servicio, en este caso'librosseleccionados. service'. Quiero que notes que es exactamente el mismo nombre con el que lo estoy importando. En caso contrario, me va a dar un error. Y ahora sí, ya tenemos listo nuestro servicio. Por ahora no se va a desplegar ningún dato, así que voy a activar otra vez mi servidor. Y vamos a examinar que nuestra aplicación esté funcionando correctamente. En caso de que se incluya incorrectamente, la aplicación va a dar un error fatal y no nos va a funcionar de ninguna forma. Revisamos y vemos que todo está funcionando correctamente. Y esta es la forma en que nosotros podemos crear, implementar de manera básica un servicio dentro de Angular.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.