El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 avanzado: Gestión de archivos en PHP

Actualizar resultados y propagar eventos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta aplicación estamos usando componentes complejos y anidados. Esto, aunque hace nuestra programación más modular y encapsulada, genera dificultades a la hora de administrar datos, así que en esta lección te mostraré cómo propagar un evento personalizado a lo largo de la aplicación para generar acciones en tiempo real desde cualquier componente.
09:31

Transcripción

En esta lección, vamos a aprender cómo administrar y propagar los eventos dentro de Angular 2. Acá yo estoy trabajando dentro de una aplicación que muestra los archivos que se encuentran en una carpeta. Voy a copiar un archivo y voy a pegarlo varias veces y voy a actualizar mi aplicación. Vamos a ver que acá tenemos todos los archivos, resultado que se muestra en esta carpeta. Yo tengo un comando, que me permite a mí borrar la información que se encuentra dentro de cada uno de estos ítems. Y, por ejemplo, si yo quiero borrar la copia número 2, presiono el botón para borrar este archivo, y esto va a ejecutar un código que elimina el archivo, en este caso, la copia 2. Vemos que ya no se encuentra. Voy a borrar la copia 3. Vemos que también se borra. Sin embargo, mi aplicación... Todos los resultados permanecen exactamente iguales. La única forma de ver la actualización que acaba de suceder acá es refrescando la página. Y ahora sí podemos ver el resultado actual. Esto técnicamente no es malo, pero si hace que nuestra aplicación deje mucho que desear. Tenemos que poner atención a los detalles y hacer que nuestra aplicación sea robusta y que ponga atención a estos pequeños detalles para que el usuario tenga una buena experiencia. Así que te voy a mostrar cómo hacer para que una vez que se borre un archivo, podamos actualizar automáticamente los resultados y que el usuario siempre pueda ver los archivos que se encuentran en la carpeta que hemos seleccionado. Para hacer eso, vamos a entrar al código de nuestra aplicación. Yo acá estoy trabajando un módulo, el cual es el que está desplegando cada una de las líneas, que se encuentran en nuestra aplicación, cada una de las líneas que se encuentran acá. Y también es la aplicación que está administrando el evento que se activa cada vez que yo hago clic sobre este botón. Este evento se llama "Borrar". Y básicamente lo que está haciendo es que se conecta a un archivo externo, un archivo externo, en este caso PHP, que recibe un parámetro con la información de la ruta del archivo que vamos a borrar y, a partir de eso, elimina el archivo que le estamos solicitando. Nosotros también estamos utilizando acá el método "subscribe", que es básicamente una promesa que está escuchando, en el momento en que nosotros tenemos una respuesta al servidor. Y, cuando la tenemos, vamos a activar una acción. En este caso, estamos enviando información a la consola. Vamos a guardar y vamos a ver qué es lo que está sucediendo dentro de nuestra aplicación. Vamos a revisar. Acá. Voy a activar la consola, voy a hacer clic derecho y seleccionar la opción "Inspeccionar". Vamos a ver la consola de nuestra aplicación y voy a refrescar solo para saber que tengo los archivos correctos. Entro a la consola. Vamos a borrar cualquier información y voy a borrar esta copia 4, hacer clic acá, voy a tener estas líneas que estoy desplegando desde la consola y también tengo la respuesta que me da el servidor. El servidor me está diciendo que estatus es "ok". Esto significa que se borró el archivo correctamente. También me está diciendo, en el caso de que yo trate de refrescar la información me va a decir que no encuentra el archivo o que no lo puede borrar o me va a dar un mensaje de error. En este caso, me dice que todo se borró correctamente, y ya no existe ese archivo. Vamos a esperar a recibir este tipo de información, y cuando tengamos esa información vamos a activar un evento. Un evento que va a refrescar los datos de nuestra aplicación. Así que vamos a modificar esto. Y, en vez de mandar un mensaje a consola, lo que nosotros vamos a hacer es que vamos a enviar un mensaje que se ejecute dentro de nuestra aplicación. O sea, básicamente vamos a dispersar un evento para que lo pueda recibir toda nuestra aplicación. Esto lo vamos a hacer así. Primero vamos a necesitar crear un "Output". En esta clase, de hecho, tenemos un elemento llamado "Input", que es una forma en que nosotros podemos recibir información externa El "Output" por el contrario, es una forma en que nosotros podemos enviar información hacia afuera de nuestro componente. Así que yo voy a crear ese "Output" con una sintaxis muy similar a la que utilizamos en el "Input". Así que, nada más voy a poner "@Output()". Y, en este caso, no ponemos punto y coma, sino que vamos a poner "cambioArchivo" si esta la información que yo voy a enviar hacia afuera. Lo que voy a enviar va a ser un evento, pero ahora estoy recibiendo algunos mensajes de error del compilador, porque me faltan algunos elementos que no he incluido, por ejemplo, para poder utilizar ese "Output", tenemos que definirlo en la parte superior de nuestra aplicación y tenemos que importarlo junto con el núcleo central de Angular, igual que importamos el "Input". Ahora sí me está leyendo correctamente. Voy a definir también que "cambioArchivo" va a ser un evento de tipo "Eventemitter" y este también lo tengo que importar. Este tipo de dato lo tengo que importar. Así que vamos a ir también al "core", al núcleo de Angular y también vamos a importarlo. Así ya no nos da error. Y vamos a decir que vamos a generar un nuevo emisor de eventos. Incluso, en este caso, vamos a mandarlo acá de tipo "number", donde podamos enviar un dato numérico. Ahora, ya tenemos la información y nosotros vamos a transmitir un evento. Este emisor de eventos nos va a permitir a nosotros comunicar un evento dentro de nuestra clase. Sabiendo eso, también vamos a tomar esta información y nosotros necesitamos que esta información se active únicamente cuando nosotros hemos tenido información correcta desde el servidor. Así que nosotros podemos poner... Una forma rápida de hacerla es que vamos a poner "this.cambioArchivo" y vamos a llamar también el método "emit" que va a emitir un evento. El evento que se llama "cambioArchivo". Ahora, cualquier componente que utilice el componente llamado "item-archivo" puede escuchar este evento. Este componente, en el que estamos nosotros trabajando, está incluido desde el componente "lista-de-archivos". Vamos a ver cómo se ve actualmente nuestro componente "lista-de-archivo". Vamos a entrar y vamos a buscar la plantilla efectivamente. Y vamos a ver que, en este momento, dentro de cada uno de los items de una lista, estamos invocando el componente "app item archivo" que es en el que acabamos de crear el "Output". De hecho, acá estamos viendo el "Input" donde recibimos información. Ahora vamos a enviar información. Sin embargo, esta información no va a estar disponible en todo momento. La información va a estar disponible únicamente cuando nosotros desencadenemos un evento. El evento ya sabemos que se llama tal como lo definimos en el "Output", "cambioArchivo". Vamos a copiar este nombre. Venimos al módulo que hace el "Output", la salida de ese evento, y vamos a definirlo como un evento. En Angular, los eventos se escuchan metiéndolos dentro de paréntesis. Así que estamos escuchando si este módulo genera el evento "cambioArchivo". Y, en el momento en que eso suceda, nosotros vamos a invocar un método dentro de "lista-de-archivos.component". Y le vamos a decir que... ...refrescar la información. Ahora, lo que vamos a hacer es que, cada vez que alguien borre un archivo, vamos a llamar al componente "contenedor", le vamos a enviar un evento y le vamos a decir que actualice la información de toda la lista. Nos falta ahora solamente agregar este método. Vamos a utilizar "refrescar". Vamos a la lista de "archivos-component" Y acá tenemos, por ejemplo, un método que se llama "petición externa", que es justamente el método que llama a la lista completa. Este es el método que invoca a toda la información de la lista, justamente ese es el que queremos llamar. De hecho, en el momento en que este componente arranca, lo invocamos. Así es como lo desplegamos la primera vez. Vamos a llamar a "resfrescar". Lo definimos como que no tiene respuesta, así que declaramos el "void". Y simplemente copiamos "this.peticionExterna" para poder invocar, una vez más, la información de la lista. Estamos listos, para ver los resultados de nuestra aplicación. Tenemos acá un archivo que se llama "Copia 5". Vamos a refrescar. Tenemos este archivo "Copia 5" y lo vamos a borrar. Hasta hace unos momentos, si nosotros borrábamos este archivo, no iba a pasar nada, teníamos que refrescar el documento. Ahora se está generando un evento. Yo lo borro y vemos que se actualiza mi aplicación. Vamos a ver, otra vez borro copia. Mi aplicación se actualiza automáticamente. Esto es gracias a que estamos propagando eventos, dentro de diferentes componentes, y también los estamos escuchando a través de componentes externos. Así es como hacemos que nuestra aplicación pueda escuchar todas las diferentes partes que van generando acciones.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:19/04/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.