Angular 2 avanzado: Trabajo con APIs

Emitir datos dentro de la aplicación

¡Prueba gratis durante 10 días

nuestros 1218 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aprenderemos en esta lección cómo controlar y distribuir el flujo de eventos de una aplicación y utilizaremos las librerías de Angular que nos permiten distribuir globalmente un evento personalizado. De este modo crearemos una acción inmediatamente después de confirmar la finalización de un proceso de la API.
07:18

Transcripción

En esta lección vamos a aprender cómo propagar eventos dentro de una aplicación Angular. Yo acá estoy trabajando dentro de mi aplicación y esta aplicación lo que está haciendo es que está eliminando un registro desde una base de datos. Estoy utilizando el método "delete" y estoy enviando un registro dinámico para que mi aplicación REST pueda entender cuál es el registro que quiero eliminar. Una vez que he terminado de realizar el proceso, voy a obtener una respuesta. Estoy utilizando esta promesa, que en este caso se llama "subscribe", que se ejecuta una vez que yo tenga información del servidor que me puede decir si se ejecutó correctamente o no la operación. Yo necesito enviar la información dentro de mi aplicación para saber que debo actualizar los datos y desplegar el nuevo resultado. Veamos ahora cómo está funcionando mi aplicación y vemos que tengo tres registros. Y este botón que se encuentra acá me permite a mí a activar la llamada a la API REST donde voy a eliminar este registro. Así que al hacer clic acá acabo de eliminarlo. Sin embargo, los eventos no se han propagado dentro de la aplicación y no podemos visualizarlo dentro de la aplicación. Así que voy a presionar "refresh" y ahora tenemos el resultado. Vamos a modificar esto para que nuestra aplicación pueda hacer automáticamente este proceso. Voy a ir al código de mi aplicación y voy a entrar específicamente al comando "tarea-individual. component". Acá es donde yo estoy realizando el proceso de borrar el registro. En este caso yo necesito distribuir un evento dentro de la aplicación, porque la invocación a los datos que se encuentran dentro de la API REST para mostrar la lista correspondiente a la base de datos se encuentra dentro de este otro componente llamado "tareas". Vamos a enviar un evento desde "tarea-individual" hasta "tareas". ¿Cómo hacemos esto? Bueno, primero tenemos que definir un punto de salida de nuestra aplicación. Acá, yo previamente había definido un "input" o una entrada de datos. Ahora voy a hacer el proceso a la inversa: voy a generar un "output" o una salida de datos, voy a utilizar una sintaxis muy similar que es "@ output" con la'o'mayúscula, y ponemos paréntesis. Ahora me está apareciendo acá un error de sintaxis, porque no tengo definido este "output". Y voy a hacer que esté disponible en mi aplicación buscando dónde estoy importando el "core" o núcleo de Angular, y agrego este módulo. Ahora sí, ya está disponible en mi aplicación y voy a definir cuál va a ser el evento que voy a distribuir, en este caso se va a llamar "cambio Tarea". "cambioTarea" va a ser un evento de tipo "Event Emitter". Vamos a enviar también un dato que va a ser de tipo número. Y vamos a definir que esto sea un "new EventEmitter". Vamos a ponerlo acá con doble't'. Y nos falta entonces importar este dato dentro de nuestra aplicación. Para eso también tenemos que ir acá, al inicio nuestra aplicación, donde se encuentra el "import" y vamos a importar el "Event Emitter". Listo. Vamos a copiarlo acá –parece que tengo un error de sintaxis–. Listo, ahora sí. Tenemos que "cambioTarea" es un evento de tipo "EventEmitter" que va a ser acá –vamos a inicializarlo como un nuevo– objeto de este tipo. Vamos a poner paréntesis, punto y coma y ahora sí estamos inicializando una nueva instancia de este objeto. Una vez que ya lo tenemos definido, tenemos que transmitir este evento. Este tipo de evento nos permite a nosotros propagar información dentro de una aplicación. Para hacerlo tenemos que buscar en nuestra aplicación dónde estamos borrando un registro. Por ahora yo estoy generando una llamada a la consola, así que voy a borrar esta llamada a la consola que simplemente está mostrando un dato. Y lo que voy a hacer es que voy a llamar a "this . cambioTarea" y voy a darle el método "emit" para que emita o transmita una señal dentro de la aplicación y que podamos ejecutar tareas en otras partes. Ahora, ¿dónde vamos a ejecutar esa tarea? Vamos a ir entonces precisamente al componente "tareas". Vamos a ir a la plantilla. Acá nosotros estamos de hecho enviando información gracias al "input" que teníamos definido en nuestra aplicación. Vemos que acá está el "input" llamado "tareaInfo" y acá está "tareaInfo", donde le estamos inyectando los datos. Ahora vamos a agregar nuestro "output". En este caso el "output" va a ser un evento, se va a manejar como si fuera un evento. El evento que nosotros estamos enviando va a ser "cambioTarea", tal como lo tenemos definido como "output". Así que yo me vengo acá, a mi "ítem" y le digo que cuando reciba el evento "cambioTarea" ejecute una función. En este caso la función se va a llamar "actualizar" y vamos a crearlo dentro de nuestra aplicación. Voy a copiar el nombre y voy a ir a "tareas-component" –recordemos que estoy trabajando dentro de la plantilla "tareas-component"–. Busco "tareas-component. ts", voy a crear el método llamado "actualizar", no recibe parámetros, tiene como resultado un "void". Y lo que voy a hacer es que voy a volver a llamar a la API REST para que me despliegue los datos como lo está haciendo al inicio mi aplicación, tal como lo vemos acá en "ngOnInit". Así que voy a llamar a "this . peticiónExterna" y listo, ya tengo definido el evento, ya lo estoy transmitiendo. Estoy atrapando ese evento dentro de otro componente y estoy ejecutando una acción que en este momento es básicamente conectarme otra vez a mi API utilizando en este caso el comando "get" para obtener una lista de los registros que ahora van a estar actualizados con los cambios que acabo de hacer. Tengo ahora dos elementos dentro de mi aplicación. Vamos a presionar el botón de Borrar, esto transmitió –se realizó bastante rápido–, esto transmitió los eventos a la aplicación. Ya mi aplicación se dio cuenta de que había un cambio, volvió a llamar la información de la API y está desplegando los cambios. Podemos borrar este último evento también y vemos que se refleja inmediatamente, prácticamente en tiempo real, dentro de nuestra aplicación, los cambios.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/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.