Angular 2 avanzado: Trabajo con APIs

Exportar la aplicación de Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una vez terminado el proceso de desarrollo, es momento de compilar el código fuente, que hasta ahora está basado en TypeScript y separado en múltiples archivos, para convertirlo en una aplicación basada en CSS, HTML y JavaScript 100% compatible con todos los navegadores web modernos.
04:25

Transcripción

Nuestra aplicación ya se encuentra terminada y estamos listos para publicar. Vamos a proceder a compilar nuestra aplicación desde la línea de comandos de Angular. Yo acá estoy trabajando en mi aplicación y tengo activo el servidor de la línea de comando de Angular, así que voy a detenerla con el comando Control + C, vamos a confirmar que queremos que se tenga, voy a escribir "clear" para que sea más fácil de leer y voy a incluir el comando "ng build". Esto va a compilar mi aplicación y la va a dejar lista para publicar. Va a tomar toda la información, todo el código fuente, todas las librerías y todos los datos necesarios para que nuestra aplicación pueda funcionar dentro de un servidor. Durante todo el tiempo de desarrollo hemos trabajado en un servidor de pruebas que Angular ha generado. Ahora vamos a trabajar nuestra aplicación y como vemos, acá se encuentra una carpeta llamada "Dist" y esta es la carpeta que nosotros vamos a utilizar para trabajar nuestra aplicación dentro de otro servidor. Esta aplicación, ya que está basada en Angular y es HTML con JavaScript, no necesita ningún tipo de plataforma particular, puede trabajar en un servidor Node o en un servidor Apache o en el servidor que más se ajuste a tus necesidades. En este caso, yo voy a mostrar dentro del navegador la aplicación ya compilada, que se encuentra como te acabo de mostrar dentro de la carpeta /Dist/. Revisamos y acá se encuentra mi aplicación. Acá se encuentran todos los archivos en JavaScript completamente compatibles con todos los navegadores. Recordemos que durante el tiempo de desarrollo hemos trabajado en formato TypeScript, que no se puede leer directamente desde un navegador, pero en este caso estamos trabajando JavaScript que es 100 % compatible con todos los navegadores. Tenemos una carpeta donde se encuentra mi aplicación y toda la información alrededor de ella en los demás archivos. Ahora vamos a copiar esta información y en mi aplicación Node yo he definido una carpeta en la que voy a trabajar los archivos públicos. Yo he definido esta carpeta como'público' y tengo un archivo'index'que he incluido simplemente para demostrar que funciona correctamente. Ahora voy a pegar la aplicación y vamos a reemplazar ese archivo'index'por el de nuestra aplicación y ahora ya funciona nuestra aplicación directamente dentro del Node. Voy a revisar el servidor Node como lo he estado trabajando y acá tengo la carpeta'público', pero dentro de mi servidor yo tengo definido que utilicemos una carpeta para archivos estáticos. Así que en el servidor Node que estoy trabajando puedo seguir trabajando mi API REST, pero también puedo servir los archivos de la aplicación y todo va a quedar dentro de un solo lugar. Vamos a ver el producto final. En este momento, yo voy a detener el servidor de Angular, vamos a cerrar esta consola y ahora solamente está funcionando el servidor Node. Mi servidor Node está trabajando en el puerto 8080, así que vamos a entrar para ver la aplicación. Esta es la aplicación antigua que estaba dentro del "localhost: 4200" que era el puerto que estábamos usando para depuración. Voy a actualizar y vemos que ya no va a funcionar correctamente porque ya no está funcionando este servidor. Voy a cambiar al "localhost" y vamos a pasar a Node que se encuentra en el puerto 8080. Y ahora se está cargando mi aplicación porque he definido que cuando no tengamos ninguna ruta específica de la API, que en este caso la ruta de la API se encuentra únicamente dentro de la carpeta API y específicamente dentro de "lista". Precisamente por eso es que siempre es bueno que incluyamos las API dentro una carpeta definida para poder trabajar diferentes contenidos dentro de nuestro navegador, y en este caso si entramos directamente al servidor, también vamos a tener la aplicación que está interactuando con nuestra a API REST y de hecho ya está desplegando resultados. Podemos seguir incluyendo valores y vamos a poder seguir trabajando en nuestra aplicación pero ahora todo desde Node y ya con archivos directamente estáticos. Así que ya nuestra aplicación está lista para producción y estamos listos para publicar.

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)
Excelente Curso
Juan de Dios T.
Excelente 100% recomendado.
 
Software:
Fecha de publicación:4/05/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.