Angular 2 avanzado: Gestión de archivos en PHP

Regresar a la carpeta superior

¡Prueba gratis durante 10 días

nuestros 1218 cursos !

Prueba gratis Mostrar modalidades de suscripción
Mientras navegamos en la aplicación podremos abrir diferentes carpetas y subcarpetas y podremos profundizar en los archivos de nuestro servidor sin importar la complejidad de la estructura, pero, gracias a un dato que hemos creado dentro de nuestra API, siempre podremos regresar por nuestro camino. En esta lección te mostraré cómo hacerlo.
08:07

Transcripción

En esta lección, vamos a aprender cómo navegar dentro de carpetas y regresar a la carpeta en la que nos encontrábamos. Yo acá estoy trabajando una aplicación en la cual tengo habilitada la navegación entre carpetas y acá estoy trabajando en un archivo que está en formato de carpeta. Al hacer clic sobre la flecha que me permite abrir esta carpeta, voy a ver los contenidos que están en ella, pero, al tratar de regresar, me va a sacar de la aplicación. Yo voy a insertar un elemento de navegación para que, en el momento en que yo entre a esta carpeta, me permita regresar al lugar donde me encontraba antes. Vamos a abrir el código de la aplicación yo acá estoy trabajando en un componente llamado "lista-de-archivos" el cual se conecta a un servicio en PHP y trae la información de los archivos que se encuentran en una carpeta. Voy a crear dos nuevos métodos, que me van a permitir a mí navegar entre carpetas. Y vamos a comenzar con "mostrarSuperior". El método "mostrarSuperior" me va a permitir a mí desplegar un dato en caso de que yo me encuentre dentro de una carpeta interna. Vamos a utilizar esta sintaxis y vamos a devolver un valor. El valor que vamos a devolver, en este caso, va a ser el que se encuentra dentro de un servicio que ya tengo instalado que se llama "rutasDeArchivosService". Este servicio me permite a mí conocer en qué ruta me encuentro y, también, saber si la ruta en la que yo me encuentro tiene un nivel superior o me encuentro en la carpeta base. Entonces, voy a utilizar uno de los métodos que ya tengo creados que se llama "obtenerSuperior". Esto me va a devolver el valor que se encuentra dentro de la carpeta superior. En caso de que yo me encuentre en la carpeta raíz, lo que me va a devolver es un valor "False". Entonces, voy a tomar este valor y me voy a ir a la plantilla de "archivos.component". Yo acá tengo el componente que genera la lista, al menos en su raíz, y voy a desplegar acá un botón. A este botón, simplemente para que se vea un poco más atractivo, le voy a agregar unas clases de "bootstrap" que me van a permitir desplegarlo en color rojo. Y, también, le vamos a agregar un texto y un ícono utilizando Font Awesome que es una librería que tengo instalada en esta aplicación y solamente vamos a poner "Nivel Superior". Vamos a guardar; vamos a revisar el resultado de la aplicación; vemos que acá se encuentra este botón que me dice que vamos a ir al nivel superior. Volvemos otra vez a la aplicación. Dentro de la aplicación, yo lo que voy a hacer es que voy a habilitar este botón y voy a hacer que se muestre únicamente si estamos en un nivel inferior. Recordemos que el método "mostrarSuperior" que está invocando un servicio... Vamos a ver cuál es la información que define este servicio, en este caso "ruta-de-archivos.service". Vemos que "obtenerSuperior" me devuelve un resultado. En caso de que yo me encuentre dentro de una carpeta interna, me devuelve la carpeta superior; y, en caso de que me encuentre en la carpeta raíz, donde ya no hay ninguna carpeta superior, me va a devolver un valor "false". Precisamente, esto está diseñado así para que yo pueda ocultar este botón en caso de que estemos en la carpeta raíz. ¿Cómo vamos a ocultarlo? Utilizando la directiva "ngif". Y para eso ponemos "*nGIF =". Y vamos a llamar un método. ¿Qué método vamos a llamar? "mostrarSuperior", porque así, en caso de que estemos en la carpeta superior, tenemos un valor "false". Y sabemos que la directiva "ngif" oculta los elementos que se encuentran donde la hemos definido, en caso de que el resultado que se encuentra ahí sea "false". Vamos a revisar la aplicación y vemos que ya el botón no se ve. Si paso a la carpeta interna, estamos dentro de un nivel inferior así que puedo subir a un nivel superior sin embargo, en este momento, el botón no sirve. Vamos a asignarle un nuevo método que nos va a permitir subir dentro de nuestra aplicación y así vamos a poder navegar entre carpetas, pero esta vez, de regreso. Vamos a asignarle un evento. El evento, en este caso, va a ser un clic y vamos a definir un método que se va a llamar "irASuperior". Así que, cada vez que hagamos clic sobre este botón, vamos a llamar a un método que se va a llamar así, "irASuperior". Voy a copiar este nombre y vamos a guardar. Volvemos, otra vez, a la programación de nuestro componente. Y, justo después de "Mostrar Superior", voy a incluir este nuevo método. Y, dentro de este nuevo método... vamos a terminar la sintaxis. Dentro de este nuevo método, vamos a definir un par de valores. Primero, vamos a llamar a "this.rutasDeArchivosService". Vamos a llamar al servicio donde se están controlando las rutas y le vamos a decir que definamos una nueva ruta. Vamos a definir una ruta y la ruta que vamos a definir va a ser la que se encuentra dentro de "mostrarSuperior". Recordemos que "mostrarSuperior", en caso de que nos encontremos en la carpeta Raíz, nos da "false", pero en caso de que nos encontremos en una carpeta interna, nos devuelve la carpeta superior. O sea, si estamos dentro de "archivos", nos va a devolver ningún valor, pero si estamos dentro de "archivos/ test", nos va a devolver la carpeta superior que, en este caso, es "archivos". Así podemos regresar. Vamos a eliminar este texto que acabo de incluir y esto significa que nos va a devolver, nos va a regresar a la ruta en la que nos encontrábamos antes. Listo. Tenemos ya nuestra navegación lista y nos falta un detalle. Si nosotros definimos la nueva ruta, no va a pasar nada porque tenemos un valor dentro de el servicio pero no estamos invocando que se genere ninguna acción. Vamos a necesitar que se active el método "peticiónExterna" para pedirle información de la carpeta, esta vez con la ruta que acabamos de definir. Vamos a ir a "irASuperior". Y, en "irASuperior", vamos a definir, después de que asignamos un nuevo valor para la ruta. Volvemos a llamar la información y se va a refrescar los datos y vamos a tener el resultado de ver la carpeta en la que nos encontrábamos antes. Veamos el resultado final de nuestra aplicación. Estamos en la carpeta raíz. No se ha de mostrar ningún botón. Entramos a una carpeta secundaria. El botón ya se puede mostrar y, ahora, le hacemos clic. Nos va a devolver a la carpeta anterior. Va a llamar el servicio que nos representa los datos; le va a asignar una nueva ruta. Vamos a tener los resultados de la carpeta anterior. Y, ahora, podemos navegar entre carpetas y también podemos regresar entre ellas.

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.