Angular 2 avanzado: Gestión de archivos en PHP

Inyectar valores dinámicos entre componentes con @Input

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a aprender a crear componentes más modulares y encapsulados, por eso vamos a insertar un componente dentro de otro inyectando datos que nos permitirán manejar cada archivo de forma individual.
09:01

Transcripción

En la arquitectura de Angular, se sugiere que, cada vez que tengamos algún componente muy complejo, lo tratemos de dividir en componentes más pequeños. En este caso, yo tengo una aplicación en la cual estoy descargando información que viene de un servicio externo. Ahora, esta información nos está llegando desde este archivo PHP y estamos viendo cómo nos llega diferentes datos de "nombre", "tamaños", "rutas". Todo lo estamos desplegando dentro de el servidor. Ahora, yo lo que estoy haciendo es que estoy tomando cada uno de los ítems que me están llegando desde la lectura que se hace de una carpeta y lo estoy desplegando en una línea, utilizando la directiva llamada "ngFor". Y esto lo estoy haciendo a través de un componente llamado "lista-de-archivos", que podemos ver acá, donde estoy utilizando el "ngFor" y, por cada uno de los ítems que me llegan de esa carpeta, estoy desplegando un nombre. Ahora, vamos a modificar esta conducta y lo que vamos a hacer es que, en vez de solamente desplegar el nombre, vamos a crear acá adentro un componente. Cada uno de los ítems que recibamos va a ser un componente donde vamos a desarrollar diferentes partes y diferentes interacciones. Para hacer esto, vamos a necesitar incluir un componente dentro de otro componente y te voy a mostrar cómo hacerlo. Acá yo estoy dentro de la terminal de Visual Studio y ya he generado previamente un componente nuevo que se llama "item-archivo". Para generarlo, solamente tuve que escribir "ng g component" y puse el nombre, en este caso "item-archivo". Al presionar Enter, se genera este nuevo componente y todos los elementos necesarios para configurarlo y hacerlo funcionar se van a crear dentro de la carpeta correspondiente. En este caso, acá yo ya tengo el resultado. Lo que tengo es un componente que se encuentra con el código por defecto y vemos que tiene creado un "selector". En el caso de la línea de comandos de Angular, siempre vamos a tener este mismo patrón. Vamos a tener el nombre del componente, en este caso, "item-archivo" y va a tener siempre el prefijo "app". Voy a copiar este nombre que justamente es el "selector" porque voy a incluir este módulo dentro de otro módulo. ¿Cómo lo hacemos? Esto de hecho ya está funcionando en la aplicación actual. Si nosotros revisamos dentro de la plantilla principal, revisemos "app.component", vas a ver que tenemos un titulo acá y tenemos invocando un componente. Voy a borrar, de hecho, este titular para que se vea mejor nuestra aplicación y voy a repetir un proceso muy similar dentro de "lista-de-archivos". "lista-de-archivos", en este caso, es el componente que nos está desplegando cada uno de los ítems de esta lista. Voy a reemplazar el valor que despliega el nombre y voy a poner nada más unas líneas para que lo podamos ver dónde se está haciendo efecto. Y vemos que acá nos aparecen tres grupos de líneas. ¿Por qué? Porque básicamente del servicio de PHP nos dice que la carpeta que estamos leyendo tiene tres archivos. Ahora, vamos a modificar esta información. Yo acá lo que voy a hacer es que voy a incluir el nuevo componente, vamos a poner acá una etiqueta, que se va a llamar "app-item-archivo". Cerramos la etiqueta y vamos a tener acá la información que se despliega de este nuevo componente. Recuerda que no debe haber ningún tipo de texto, ni ninguna información dentro de este componente porque realmente va a ser sobrescrita, se va a borrar, una vez que Angular active el contenido de este módulo. Vamos a guardar la información, y vamos a ver que es lo que va a suceder. Si revisamos dentro de este nuevo módulo, vamos a revisar acá la plantilla, vemos que la plantilla dice "item-archivo works!". Este texto se genera automáticamente y lo que voy a hacer es que ahora voy a poner unos asteriscos para que veamos el resultado dentro del servidor. Voy a abrir ahora el navegador y vamos a ver que se está mostrando el contenido del nuevo módulo. Lo que está sucediendo es que estamos invocando tres veces el módulo que acabo de crear y tres veces se está desplegando la plantilla. Volvemos a la plantilla y vamos a hacer que se muestre información más dinámica y que se muestre efectivamente el nombre del archivo con el que estamos trabajando. Vamos a necesitar recibir la información que nos está llegando desde esta lista. Yo necesito inyectar, dentro de este componente, información. Ahora, tiene que ser información dinámica para que se muestre cada uno de los datos que nos llegan de el servicio. Para eso, yo voy a utilizar un elemento llamado "Input". El "Input" lo voy a insertar dentro del nuevo componente, el "item-archivo". Vamos a ir a el código y vamos a decirle que este nuevo componente nos acepte la información que nosotros le vamos a incluir a través de parámetros. Lo vamos a hacer incluyendo un nuevo módulo llamado "Input". Y este "Input" lo vamos a aceptar, lo vamos a habilitar dentro de nuestro código con la opción "@Input", quiero que notes que estoy poniendo el "Input" con mayúscula y estoy poniendo acá paréntesis y tampoco estoy poniendo punto y coma. Acá no va un punto y coma, es un error de sintaxis. Ahora, voy a definir cuál va a ser el valor que vamos a recibir y cómo lo vamos a tratar. Este valor que vamos a recibir se va a llamar "item-info" "item-info" lo vamos a definir como un tipo de dato "any". Esto lo estoy haciendo simplemente a manera de ejemplo porque el tipo de dato "any" nos va a servir a nosotros como una especie de comodín. Lo podemos utilizar cuando no sabemos específicamente qué tipo de dato vamos a recibir. Puedes utilizar el tipo de dato si estás seguro de qué tipo de dato vas a recibir o, en el caso de que no sepas, utilizar "any". Ahora, ya tenemos una opción que se va a llamar "item-info" y que va a llegar a través de un "Input". Lo tenemos habilitado dentro de nuestro componente, así que vamos a insertar esa información. Volvemos otra vez a donde se está generando la lista. En el componente "lista-de-archivos", vamos acá y estamos invocando el módulo, pero ahora vamos a tener acceso a inyectarle información. ¿Cómo vamos a hacer esto? Fácil. Vamos a poner la sintaxis de Angular. Nos pide que utilicemos, en este caso, paréntesis cuadrados y vamos a poner acá "item-info" que es el nombre del "Input" o la entrada de datos que acabamos de crear. "item-info" Y le vamos a decir cuál es el valor que vamos a recibir. El valor que vamos a recibir tenía mal puestas la comillas, tengo que utilizar siempre comillas dobles dentro de HTML. El valor que vamos a recibir, en este caso, es el valor que nos llega de "item", tal como lo estábamos desplegando antes, pero en este caso yo no voy a desplegar sus valores, sino que voy a mandar el objeto completo de el "item". Vamos a guardar la información. Si vemos ahora el resultado, vamos a ver que se ve exactamente igual porque no he modificado la plantilla de mi módulo. Vamos a hacer eso como paso final y voy a tomar la información. Recordemos que "item-info", sólo para recapitular... En este caso estamos generando una lista; la lista tiene un componente; este componente recibe la información que nos llega, en este caso, de cada uno de los ítems o de los archivos que estamos leyendo; y vamos al componente que acabamos de crear; revisamos y estamos creando un "Input"; definimos el tipo de datos; y ahora yo voy a tomar este objeto que estamos recibiendo y lo voy a desplegar dentro de mi código. Simplemente pongo "ítem-info" y vamos a tomar una de las propiedades que nos llega desde el servicio. Por ejemplo, podemos desplegar acá "nombre" o "tipo". Vamos a buscar acá y ponemos "nombre". Y vamos a poner acá un "slash", simplemente para que lo podamos ver correctamente. y ponemos también "itemInfo.tipo". Y, así, vamos a ver acá, por ejemplo, el nombre del archivo "slash", el tipo de documento. Guardamos la información. Estamos listos para ver nuestra aplicación. Abrimos la aplicación y, ahora sí, nuestro módulo, en cada una de las veces que lo invocamos dentro de otro módulo también, nos está mostrando la información que nosotros necesitamos. Esta es la forma en que nosotros podemos no solo inyectar módulos dentro de otros módulos, sino que, gracias a la propiedad "Input", nosotros podemos inyectar valores, como estamos haciendo acá, inyectar valores y hacer que estos componentes sean dinámicos y poder hacer aplicaciones mucho más complejas.

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.