El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 avanzado: Trabajo con APIs

Instalación de Angular 2 CLI

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Crear un proyecto de Angular 2 manualmente puede ser complicado y consumir mucho tiempo por la necesidad de instalar librerías externas, ajustar los archivos en el lugar correcto y enlazar todas las partes. Las herramientas de consola de Angular facilitan notablemente el proceso, y en esta lección vamos a aprender a instalarlas y utilizarlas.
05:24

Transcripción

Existen muchas formas de crear un proyecto en Angular, podemos hacerlo manualmente o podemos utilizar algún tipo de automatización. Para este curso vamos a utilizar la consola de Angular o el Angular CLI. Vamos a utilizar este proyecto porque nos va a ayudar a automatizar gran cantidad de tareas y también nos va a dar un patrón común para poder trabajar nuestros futuros proyectos. Para instalarlo vamos a ir a la terminal del sistema. En este caso, yo voy a utilizar Visual Studio Code y voy a utilizar la terminal que tiene este programa para instalar Angular desde la línea de comandos yo voy a utilizar el administrador de paquetes de Node. Voy a incluir "npm" y vamos a utilizar el comando "install -g angular guión -cli". Esto va a instalar todos los paquetes necesarios para poder utilizar Angular desde la terminal y poder generar todos los archivos y los diferentes elementos que vamos a necesitar para trabajar una aplicación en Angular. Una vez instalado Angular CLI, vamos a poder generar directamente nuestro proyecto desde la terminal del sistema. Voy a incluir el comando "clear" para que podamos leer mejor los elementos que aparecen en pantalla y voy a llamar un comando específico que acabo de instalar que se llama "ng", "ng" va a llamar todos los elementos relacionados con la librería de Angular dentro de la terminal. Ahora le voy a enviar un comando específico que va a ser "new" para que me genere un nuevo proyecto, le voy a poner un nombre a este proyecto, en este caso vamos a ponerle "prueba", y vamos a presionar Enter y esto lo que va a generar, desde la consola, es un nuevo proyecto de Angular. Vemos que se ha creado una nueva carpeta, también tenemos una serie de archivos y también vemos que está descargando archivos en la terminal. Los archivos que va a descargar son todos los que están relacionados con el proyecto y todo lo que vamos a necesitar para poder crear una aplicación. Una vez terminado el proceso de descarga, vamos a estar listos para poder trabajar con nuestro proyecto. Vamos a ingresar a la carpeta en la que se encuentra el proyecto con el comando "cd" e incluyendo el nombre con el que lo hemos creado, en este caso "prueba". Y otra de las ventajas que nos ofrece esta herramienta que acabamos de instalar es que podemos generar un microservidor que nos va a generar una aplicación completa en Angular que va a compilar todos los elementos de TypeScript y que además va a insertar todas las librerías y códigos que necesitemos para poder trabajar. Simplemente vamos a llamar el comando "ng serve" para generar este servidor y vamos a ver que comienza a trabajar la terminal, vemos que nos da una instrucción y nos da acá una dirección que dice "localhost: 4200". Esta es la dirección en la que va a estar mostrándose nuestra nueva aplicación. Vamos a copiarla y abrirlo dentro de una ventana del navegador donde podemos ver el resultado de nuestra aplicación. Esto es el mensaje que aparece por defecto, vamos a modificarlo entrando al proyecto en el que se encuentra nuestra aplicación y vamos a buscar la carpeta "src", que es donde se encuentra el código fuente. Dentro de ella vamos a ver una carpeta que se llama "app", que es donde está específicamente nuestra aplicación. Y en el caso de esta aplicación que viene por defecto, vamos a buscar el archivo que se llama 'app . component. ts', que es un archivo de TypeScript donde se está enviando una variable llamada "title" y aparece el texto que estamos viendo dentro de la aplicación, vamos a cambiarlo, vamos a escribir "prueba" y vamos a guardar. Quiero que notes que cuando yo guardo mi documento comienza a trabajar otra vez la consola. Lo que acaba de pasar es que el servidor, además de estar mostrando los archivos, cada vez que yo ejecuto algún cambio en el código fuente va a volver a compilar y va a generar una nueva versión de la aplicación con los cambios que acabo de incorporar. Vamos a ver el resultado y vemos que aparece el texto que yo acabo de insertar. De esta forma, nosotros vamos a poder trabajar nuestras aplicaciones ahorrando tiempo y también, sin tener que pensar en todos los detalles propios de la configuración, de una aplicación Angular, únicamente nos tenemos que enfocar en desarrollar específicamente el código de lo que será nuestra aplicación.

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:
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.