Angular 2 avanzado: Gestión de archivos en PHP

Renombrar un archivo usando Ng Model

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una de las capacidades más interesantes y populares de Angular es el modelo, un elemento que genera una conexión a dos vías para modificar sus valores. Esto significa que, tanto el código de la aplicación como el usuario, pueden alterar los valores allí contenidos. Usaremos en esta lección los modelos en conjunto con una conexión a nuestro servidor para modificar el nombre de un archivo.
09:46

Transcripción

En esta lección, vamos a aprender cómo modificar el nombre de un archivo interactuando con un servicio de PHP. Acá estoy trabajando con una aplicación que tiene una herramienta que me permite a mí desplegar una entrada de datos y ocultarla. Vamos a conectar esta entrada de datos con Angular para poder utilizar la información y modificar el nombre de nuestro archivo. Para eso, vamos a comenzar modificando la entrada de datos. Vamos a ir al código. Yo estoy trabajando dentro de un componente llamado "item-archivo.component" que es el que controla esa sección de mi aplicación. Vamos a buscar la entrada de texto y vamos a definirla como un modelo. En Angular, nosotros tenemos un tipo especial de dato que se llama "modelo", que nos permite modificar la información a dos vías. Eso quiere decir que podemos desplegar información que viene desde el código, pero también podemos obtener información del lado del usuario. La conexión entre ambas partes se realiza en tiempo real y cualquier modificación que se haga en la aplicación o que haga el usuario va a verse reflejado en su contraparte correspondiente. Así que para incluir un modelo, vamos a poner paréntesis cuadrados; dentro de ellos paréntesis redondos y ponemos la directiva "ngModel" y hemos creado un modelo. Ahora, un detalle, simplemente es una recomendación: cuando crees un modelo, lo ideal sería que generes un objeto y que a ese objeto le agregues propiedades por cada uno de los elementos que se encuentran dentro de un formulario. Por ejemplo, en este caso yo voy a asignar el modelo a un objeto llamado "modeloItem". Si yo tuviera muchas entradas de texto, simplemente le voy a asignar una propiedad a cada una y todas van a quedar relacionadas a través del objeto, en este caso, "modeloItem". Voy a agregar una propiedad que se va a llamar "nuevoNombre" y esta propiedad va a ser la que está relacionada con esta entrada de texto. Si yo pusiera, por ejemplo, otra acá y quisiera poner "viejoNombre", ambas estarían relacionadas dentro de el mismo objeto. Vamos a borrar esta segunda operación de ejemplo. Y ahora ya tenemos listo este objeto que va a ser un modelo. Vamos a declararlo dentro de nuestra aplicación. Así que vamos al componente y buscamos al inicio de nuestro código donde vamos a poner que es un elemento, en este caso, vamos a ponerlo de tipo "any", simplemente para definirlo rápidamente, y lo voy a, también, instanciar dentro de mi constructor, así que vamos a poner que "this.modeloItem" es igual a un objeto vacío" y, con esto, ya puedo agregarle una cantidad indefinida de propiedades para que se ajuste a cualquier formulario. Ahora que ya tenemos este "modeloItem", vamos a capturar la información para que tenga una conducta en la cual, cuando yo hago clic sobre algún ítem y despliego esta entrada de texto, me muestre el nombre que tiene actualmente el ítem. Lo que vamos a hacer es que vamos a encontrar el método que se encarga de administrar la visibilidad del componente de entrada de texto y en este caso se llama "activarEdicion". Le voy a decir que cada vez que se despliegue "activarEdicion"... "this.modeloItem". Y vamos a buscar el nombre del modelo, en este caso, "nuevoNombre". Y a esto me refiero por la entrada de texto. Le vamos a asignar un valor. Ahora, ¿qué valor le vamos a asignar? Vamos a buscar acá y le vamos a inyectar un valor en el momento en que llamemos "Activar edición". Vamos a inyectarle el valor que se encuentra acá del nombre. Así que cuando llamamos "activarEdicion", que está acá, vamos a también invocar "nombre" que va a ser de tipo "string" y le definimos que el valor de nuestra entrada de texto va a ser "nombre". Guardamos, compilamos, revisamos nuestra aplicación y, al hacer clic, nos aparece el nombre que tiene el archivo. Ahora, recordemos que un modelo tiene información que se sincroniza a dos vías. Estamos usando una porque le estamos definiendo el valor. Pero si yo hago algún cambio, también puedo recibir esa información del lado de nuestro componente. Así que vamos también a trabajar eso. Volvemos al código y vamos a crear una función que en este caso vamos a llamar "renombrar", que nos va a permitir a nosotros cambiar el nombre a nuestros archivos utilizando un servicio de PHP. Acá, más arriba, yo tengo una función llamada "borrar" donde estoy utilizando una operación muy similar. Así que voy a copiar este código y lo voy a pegar en "renombrar". Pero le voy a hacer algunas modificaciones para que aprendas a trabajar algunos trucos adicionales dentro de el "request" de HTTP. Vamos a hacer algunos cambios, de los que tenía "borrar" y, por ejemplo, acá nosotros estamos utilizando la propiedad "search" para inyectar valores de tipo "GET" dentro de la ruta de nuestro documento. Voy a modificar esto y vamos a utilizar un nuevo objeto de Angular, el cual voy a crear con esta variable local, que se va a llamar "parametros". Y esta variable "parametros" va a ser de tipo "URLSearchParams" que nos permite generar múltiples parámetros dentro de un URL. Ahora, acá me está dando un error y esto es básicamente porque no he incluido este tipo de dato dentro de mi aplicación, así que voy a buscar, específicamente, el módulo "Angular HTTP" y le voy a agregar este tipo de dato. Y ahora sí, ya me esta funcionando correctamente. Así que voy a decir que esto sea un nuevo objeto de tipo "URLSearchParams" y vamos a agregarle parámetros. Ahora, este documento con el que vamos a trabajar va a recibir dos parámetros. Para eso, entonces, vamos a llamar la instancia "parametros". Le vamos a utilizar el método "set". Y acá vamos a definir el nombre que va a tener la variable que queremos enviarle al servidor, en este caso, "ruta-archivo," y le ponemos el valor que queremos que tenga. En este caso, yo necesito que tenga la ruta del archivo y el nombre del archivo. Así que voy a utilizar los valores "item.ruta" e "item.nombre". Estos valores todavía no están definidos, así que voy a copiarlo, voy a pegarlo dentro de "renombrar" y lo que voy a hacer es que voy a inyectar el valor del "item" dentro de "renombrar". Busquemos nuestra aplicación y vamos a buscar el botón "Ok". Y, en este botón "Ok", que es el que me permite a mí a mí aceptar los cambios, yo voy a llamar la función "renombrar" y le voy a inyectar el valor de "itemInfo". Llamamos "[click] = "renombrar"" e inyectamos los valores que se encuentran dentro de este ítem. Volvemos al código. Ya tenemos definido el parámetro "ruta-archivo". Yo necesito incluirle otro valor que en este caso va a ser el nuevo nombre que va a tener este archivo. Básicamente, tengo que definirle la ruta, pero también tenemos que definir el nuevo nombre. Así que los parámetros van a ser así: defino el nuevo nombre, que va a ser "Nuevo archivo", que es el nombre de la variable que voy a enviar. Defino la ruta, que es exactamente la misma ruta que tenía el archivo anterior, pero esta vez voy a definirle como nombre el valor que se encuentra dentro de nuestra entrada de datos. Así, aprovechamos la conexión a dos vías de los modelos. Finalmente, dentro de la llamada a nuestro documento, vamos a modificar dos partes. Primero, vamos a enviar el objeto "Parámetros", que va a inyectar todas las variables dentro de nuestro documento y también voy a actualizar la ruta al archivo que modifica, en este caso, los nombres, que en mi caso, se encuentra dentro del "Local Host" y se llama "renombrar-archivos.php". Tenemos listos todos los cambios. Vamos a revisar nuestra aplicación. Recordemos que, una vez que tengamos una respuesta del servidor, vamos a emitir un evento llamado "cambioActivo" que va a refrescar la información en nuestra aplicación. Así que vamos a buscar respaldos, inyectamos la información del nombre utilizamos las dos vías de información, cambiamos el valor del "Input" aceptamos, enviamos los datos, actualizamos y tenemos el resultado que se ve prácticamente en tiempo real, pero hemos modificado el nombre de un archivo. Si revisamos los datos del servidor, vemos que acá ya están los cambios y aparece el archivo con el nombre que acabamos de modificar.

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.