Angular 2 avanzado: Trabajo con APIs

Manejar rutas estáticas

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Para el servidor que vamos a crear en este proyecto, vamos a trabajar con llamadas usando el formato RESTful, sin embargo también podemos habilitar un servidor estático. Aquí es donde vamos a almacenar, por ejemplo, nuestra aplicación Angular una vez terminada.
06:02

Transcripción

Vamos a configurar en nuestra aplicación la ruta base de nuestros archivos estáticos. Voy a entrar al documento donde se encuentra mi servidor, en este caso'servidor. js', y voy a agregar algunos elementos nuevos. Como puedes ver, acá estoy creando una variable llamada aplicación donde puedo configurar y modificar los elementos que la controlan. Ahora voy a agregar un elemento llamado configuración dentro de mi aplicación, que me va a permitir a mí modificar algunas propiedades de ella. Voy a ejecutar acá una función y vamos a agregar algunas propiedades. Voy a utilizar "app" y voy a definir que utilicemos una carpeta estática. Para eso, vamos a decir que "use" y vamos a definir que dentro de "express . static", vamos a definir la ruta donde se van a encontrar los archivos estáticos. Para saber en qué carpeta nos encontramos, por ejemplo, en este momento yo me encuentro dentro de mi ordenador y estoy trabajando específicamente en una carpeta llamada'node'. Ahora, yo voy a definirle a mi ordenador que dentro de esta ruta se cree una carpeta donde voy a almacenar los archivos estáticos. Para no incluir la dirección completa, la cual puede variar, voy a utilizar un parámetro especial que me permite incluir valores dinámicos, en este caso voy a utilizar el valor "dirname". Esto, básicamente, me va a enviar directamente a la ruta en donde se está ejecutando mi servidor y una vez que esté ahí le voy a concatenar el valor, en este caso público, donde voy a incluir los valores, así, que se encuentran dentro de una carpeta. Ahora, como podemos notar, en este momento yo tengo una ruta, vamos a ver que sería dentro de la carpeta'node', específicamente donde está mi archivo'servidor. js' y le estoy definiendo que entre a la carpeta'publico', sin embargo esa carpeta aún no existe. Vamos a crearla. Y ahora que la hemos creado, cuando un usuario entre a nuestra aplicación, va a entrar directamente a la carpeta, en este caso'publico'. Nos falta un detalle más, necesitamos definir también una llamada por "get" y definir la ruta por defecto. En este caso vamos a utilizar el valor "app" donde está nuestra aplicación, vamos a definir el método, en este caso "get", y vamos a definir también una ruta por defecto. Para eso vamos a utilizar el comodín que va a ser el símbolo de asterisco, esto significa cualquier ruta que no hayamos definido, y vamos a ejecutar entonces una función, cada vez que alguien entre a esta dirección. Vamos a definir dos parámetros, el primero va a ser el "request" o petición, y el segundo vamos a definir acá: los "recursos". Una vez definidas estas dos propiedades, voy a utilizar la propiedad "recursos" y voy a enviar un archivo con comando "send File", que va a ser la respuesta para la petición que estamos haciendo y voy a definirle una ruta, la ruta va a ser: ". /publico", o sea, la dirección que ya hemos definido antes, donde se van a encontrar nuestros archivos para mostrar en el servidor, y también voy a incluir el documento'index. html'. Este documento aún no lo he creado, así que vamos a pasar a "publico", vamos a crear un archivo, se va a llamar'index. html' y acá vamos a escribir "Hola Mundo". Recapitulando, tenemos entonces nuestra aplicación, estamos llamando una instancia de ellas y la estamos configurando utilizando acá una función, estamos invocando de nuevo la aplicación y estamos utilizando un parámetro para que utilicemos directamente una dirección estática dentro de nuestro ordenador. En este caso, en la carpeta en que se encuentra el archivo '/publico', hemos creado esa carpeta y más adelante también estamos definiendo una ruta por defecto. La ruta, en este caso, la estamos definiendo con asterisco y definimos que en el momento en que alguien entre a esta ruta enviemos un archivo que va a ser 'publico/ index. html'. Esa va a ser la respuesta de nuestro servidor. Vamos a ver cómo está funcionando en el navegador y revisamos acá y si entramos a: "localhost: 8080", que es donde tenemos definido nuestro servidor, vamos a entrar y vemos que en este momento yo estoy refrescando y me está dando un error, me está diciendo que la conexión se ha rechazado. ¿Por qué está sucediendo esto? Si revisamos una vez más, en este caso, yo no estoy ejecutando el servidor, he hecho los cambios pero no lo estoy ejecutando. Vamos a ejecutarlo utilizando "nodemon" para poder desplegar los cambios que hagamos y llamamos el nombre al servidor: "servidor. js". Se está ejecutando el servidor, en este punto estamos escuchando el puerto 80 y estamos mostrando una respuesta en caso de que el usuario entre a cualquier dirección que no tengamos definida, vamos a redirigir y vamos a enviar el archivo que se encuentra en la carpeta'publico', específicamente el archivo'index. html'. Revisamos el resultado, actualizamos y ahora sí, ya tenemos nuestro servidor básico desplegando archivos en HTML.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Formadores:
Fecha de publicación:4/05/2017
Duración:3:02 horas (29 Videos)

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.