Angular 2 avanzado: Gestión de archivos en PHP

Leer datos externos de un servidor

¡Prueba gratis durante 10 días

nuestros 1270 cursos !

Prueba gratis Mostrar modalidades de suscripción
Angular 2 tiene una enorme diversidad de módulos para realizar los trabajos más comunes de una aplicación. En esta lección aprenderemos a usar el módulo HTTP que será la base de nuestra aplicación al permitirnos leer datos externos de un servidor.
08:45

Transcripción

En esta lección, vamos a aprender cómo leer datos de un servicio externo, en este caso, un servicio que nos va a dar la información de los contenidos de una carpeta. Acá, estoy trabajando una aplicación, en la cual he creado un componente llamado "Lista de archivos". Este componente tiene el código que se incluye por defecto dentro de la línea de comandos de Angular y estoy utilizando el comando "ng serv" para procesar esta aplicación, compilarla y utilizarla como un servidor secundario, mientras estoy en modo de pruebas en mi aplicación Angular. Por ahora, esto no está realizando ningún trabajo en particular, pero vamos a tomar la información de un servicio externo. Vamos a buscar la información a la que me refiero. En este caso, tengo un servidor "local host apache" que está mostrándome esta información utilizando PHP. Básicamente esto está mostrando la información que se encuentra dentro de una carpeta, y específicamente vemos que me está mostrando información de imágenes PowerPoint, incluso un archivo .zip. Vamos a tomar esta información y la vamos a leer dentro de una aplicación Angular. Vamos a ir a la aplicación y voy a comenzar importando algunos módulos adicionales. Utilizo el comando "Import" y vamos a importar dos módulos que son "Http" y "Response". En ambos casos, los vamos a importar desde el módulo de Angular de "Http", y cerramos con punto y coma (";"). Una vez que ya tenemos acceso a este módulo, podemos utilizar las llamadas de http, en este caso Http me permite conectarme con datos externos y Response me permitirá trabajar con la respuesta que me va dar esta petición. Entonces, vamos a venir acá al evento "ngOnInIt", cuando este componente está disponible dentro de la aplicación va a ser lo primero que vamos a ejecutar. Así que vamos a inicializarlo con un método llamado "petición externa". Me aparece acá con una línea roja porque aún no he creado el método correspondiente. Así que lo vamos a crear, Simplemente agrego este mismo nombre, le pongo paréntesis, defino que va a tener como respuesta "ningún elemento" así que le voy a definir "void" porque no devuelve nada este método y vamos a llamar "this.http". En este punto va a dar un error. Necesitamos inicializar este objeto que es una instancia del módulo que estamos importando. Lo vamos a hacer dentro del constructor y vamos a poner que la variable privada "Http" sea de tipo, en este caso, "Htpp". Quiero que notes las mayúsculas, que en este caso tienen un efecto sobre el código. Ahora que ya tenemos inicializada esta instancia de http, que me permite hacer una llamada, voy a utilizar justamente un método llamado "Request" que me conecta con un dato externo de internet y lo que tengo que hacer es definir dónde se encuentra el servicio que quiero leer. En este caso se encuentra dentro de "local host." Recordemos que cuando estés trabajando una aplicación debes incluir la dirección correspondiente según tu caso, en este caso, estoy trabajando como digo en "local host" y el archivo se llama "leer-carpeta.php". Una vez que tengo acceso a él, voy a incluir la promesa "Subscribe" que básicamente lo que me permite es esperar a tener acceso a este archivo, ya que estamos haciendo una carga asincrónica. Entonces, cuando tenga acceso a este archivo y haya descargado correctamente la información, puedo ejecutar tareas, antes de eso, no puedo trabajar con datos que no existen dentro de mi aplicación. Dicho eso, vamos a crear un objeto de respuesta y vamos a parametrizar la respuesta de tipo "response". Y en el momento en que tengamos acceso a la respuesta de ese archivo —que puede tomar un tiempo dependiendo de la conexiòn— vamos a ejecutar una función y esta función basicamente va a decir que "this." y, en este caso, voy a crear una variable nueva que se llama "archivos" es igual a la respuesta en formato JSON ( "archivos = res.json") Ahora, necesitamos definir esta variable que está acá, así que vamos a copiarla y vamos a incluir acá que "archivos" sea una variable. Recordemos que dentro de "typescript" siempre debemos definir el tipo que va a tener una variable, así que en este caso vamos a decir que sea un arreglo, pero que esté a su vez formado por objetos. Ya definimos el tipo de datos que vamos a tener y, en teoría, nuestra aplicación ya está funcionando. Si revisamos, en la aplicación dentro de nuestro servidor, en este caso, nos encontramos en "local host" con el puerto "4200" y vemos que me dice "app works". Esto no significa nada, necesitamos incluir la informaciòn del módulo que acabamos de hacer, para lo cual, simplemente debemos buscar la plantilla principal de nuestra aplicación, en este caso "app.component", y acá vamos a poner una etiqueta con el nombre de nuestro módulo, que en este caso se llama "lista.d. archivos component". De hecho, podemos buscarlo dentro del archivo que lo genera y vemos que acá hay una propiedad que se llama "selector" donde se genera el nombre con el que podemos invocar este elemento a través de una etiqueta y ya lo estamos mostrando. Ahora, vamos a mostrar la información que estamos invocando a "archivos". Vamos a tomar este párrafo que viene por defecto y lo voy a reemplazar por un "div" sobre el que vamos a iterar utilizando una propiedad de Angular, específicamente una directiva,"ngFor", que nos sirve para tomar un valor, en este caso, el que viene de los archivos e iterar sobre él para desplegar cada uno de los ítems que se encuentran en él. Entonces vamos a definir las propiedades de este bucle que va a ser "let" y vamos a crear una instancia que se va a llamar "item" y vamos a decir que esta instancia se cree por cada uno de los elementos que se encuentran en el arreglo "archivos" y tendremos acceso a una instancia de cada uno de los elementos de ahí. Vamos a tomar acá la información, por ejemplo, desplegar datos. En Angular, podemos desplegar datos directamente de la aplicación utilizando llaves —recuerda que tienen que ser llaves dobles—, así que vamos a poner "item.nombre". Estoy utilizando la propiedad "nombre" porque dentro del servicio que recibo tenemos una propiedad llamada "nombre" y estoy iterando sobre cada uno de los elementos de este arreglo. Volvemos a la aplicación, estamos listos para probar. Guardamos, revisamos acá y vemos que aparece mi aplicación, el texto que aparece por defecto "app works¡", pero también está el componente que acabo de agregar y por cada uno de los elementos que aparecen en el arreglo que estoy invocando, me da la información, en este caso en un archivo .jpg, PowerPoint y .zip. Si revisamos dentro del directorio en el que estamos trabajando, en este caso, la carpeta "archivos", vemos que estos son los tres archivos con los que estamos trabajando con el mismo nombre y con la extensión correspondiente.

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.