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

Conectando Angular a la API con http

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una parte fundamental de nuestra aplicación es la capacidad de conectarse a una API. En esta lección vamos a aprender a utilizar el módulo http para interactuar con datos externos y procesar datos de y hacia la API.
08:46

Transcripción

En esta lección vamos a conectar nuestra aplicación a un servidor externo, utilizando un componente de Angular. Yo acá tengo una aplicación y estoy trabajando dentro de la carpeta 'lista-de-pendientes', 'app'. Vamos a entrar acá a donde tengo los componentes y voy a crear uno nuevo. Para eso voy a abrir la consola de Visual Studio. En este caso, por la configuración de mi proyecto, quiero que notes que estoy trabajando en dos diferentes carpetas, una llamada'angular' y otra llamada'node'. En esta'angular'es donde tengo la aplicación que he creado, así que voy a entrar acá, a la carpeta'angular'y vamos a entrar a la carpeta'lista-de-pendientes' donde tengo mi aplicación. Acá es donde yo voy a poder crear tanto los componentes como generar un servidor. Primero voy a crear un nuevo componente utilizando el comando "ng g component" y le voy a definir el nombre y en este caso se va a llamar "tareas". Acabo de crear el componente, voy a revisar dentro de la carpeta 'src', 'app', encuentro acá mi componente, de hecho todavía no aparece, porque necesito actualizar y ya aparece el componente creado. Voy a entrar dentro de este componente que acabo de hacer llamado "tareas". Dentro de este componente, yo voy a hacer que Angular pueda conectarse a un servicio externo. Para hacer eso necesito importar algunas librerías adicionales de Angular. Acá, de hecho, estoy importando automáticamente el núcleo de Angular y algunos módulos propios de él. Voy a importar a través del comando "import", defino, llaves, y voy a decir qué elementos quiero importar, en este caso voy a importar el módulo HTTP, que me permite a mí hacer conexiones externas, y también el módulo "response" que me permite a mí procesarlas. Una vez que tenga estos dos módulos declarados, voy a definir de dónde quiero que se importe la información. En este caso voy a definir "@angular" para definir que parte de Angular necesito importar, y en este caso voy a importar el módulo HTTP, que es donde se encuentran estos dos elementos. Finalizo con punto y coma y ahora sí, mi aplicación está lista para poder procesar información externa. Ahora, para poder acceder a la información externa, yo voy a necesitar una instancia de este módulo HTTP. Para inicializarlo, debo ir al constructor de mi aplicación y declarar una variable privada, en este caso le vamos a poner "http", para no olvidarla y vamos a decir que es de tipo HTTP, y quiero que notes que estoy utilizando acá mayúscula porque ese es el tipo de dato que acabo de importar. No necesito hacer nada más en el constructor, ya tengo declarada la variable básica. Ahora, una vez que tengo declarado el acceso a HTTP, yo voy a declarar un nuevo método, en este caso se va a llamar "petición Externa", donde voy a llamar un documento externo. En este caso, no voy a devolver ningún dato. Recordemos que dentro de Typescript, nosotros tenemos que definir cuál es la respuesta que da cada método y de hecho debemos definir también qué tipo de dato es cada vez que creamos una variable. En este caso voy a definir que no nos devuelva nada, con el tipo data "void", y una vez que he declarado mi método vamos a llamar la variable que acabo de declarar, que se llama "this. http", que es esta que está acá. Quiero que notes que en este caso estoy usando la minúscula, porque es el nombre de la variable y no del tipo de dato. Ahora, una vez que la he invocado, voy a llamar un método propio de HTTP que es "request". "Request" me permite a mí conectarme a un documento externo y a partir de ese documento externo generar una respuesta. Vamos a decirle cuál es el documento al que nos vamos a conectar. En este caso yo necesito conectarme a una API que tengo funcionando dentro de mi ordenador y la dirección es esta que está acá. Una vez que ya tengo definida la ruta a la que me voy a conectar, también voy a generar una promesa. En este caso, la promesa lo que va a hacer es que va a esperar a que nosotros obtengamos una respuesta del servidor. Por ejemplo, cuando yo me conecte a este servidor y obtenga algún dato de respuesta, esta promesa se va a ejecutar. En este caso vamos a definirlo como "subscribe" y en el momento en que tengamos información desde este punto de entrada de la API, vamos a ejecutar una función. Entonces vamos a declarar las variables que va a tener esta función, que van a ser "respuesta" y "respuesta" va a ser una variable del tipo "response" como la que acabamos de importar. Y una vez que tengamos una respuesta y tengamos datos dentro de esta función, vamos a decir que mostremos la información que acabamos de recibir de respuesta y que lo hagamos en formato JSON. Esto nos va a permitir a nosotros desplegar la información en objetos agrupados. Necesitamos ejecutar esta función. En Angular 2, nosotros tenemos eventos y el evento que ya viene definido desde el inicio en que nosotros creamos este módulo es el evento "ngOnInit". Este evento se ejecuta en el momento en que nuestra aplicación se inicializa, así que yo voy a decirle que "this. peticionExterna", que es el método que ya tengo definido, se ejecute en el momento en que inicializa mi aplicación. Vamos a guardar y solo nos falta incluir este componente dentro de nuestra aplicación, así que vamos a ir al componente principal llamado "app. component. html", que es en este caso la plantilla de la aplicación y vemos que ya tenemos un par de módulos funcionando. Así que yo voy a modificar esto ligeramente y vamos a poner acá "div" y dentro de ese "div" vamos a poner el pie de página, que es un componente, y también vamos a poner el "app - tareas", que es el componente que acabamos de crear. También, ya que estoy utilizando Bootstrap en este caso, voy a incluir "clase" y vamos a agregar un "container", que es una clase que me va a ayudar a darle una apariencia responsiva y también va a ayudarme a desplegar mejor los contenidos. Así que ya tengo almacenada la información, vamos a arrancar el servidor y en este caso Angular va a comenzar a funcionar dentro de mi aplicación. Sin embargo, hay un detalle, en este caso no me voy a poder conectar a una API, porque no tengo funcionando el servidor, en este caso está funcionando con Node. Así que yo tengo dentro de mi proyecto una carpeta llamada'node' donde tengo un archivo llamado'servidor. js' y voy a arrancar este servidor, así que simplemente presiono +, acá esto me va a abrir otra ventana de la terminal, voy a ir a la carpeta donde se encuentre este servidor y vamos a arrancarlo y ahora sí, ya están funcionando ambos servidores. Vamos a probar cómo está funcionando mi aplicación. Está funcionando, hemos cambiado la forma en que se despliega, estamos utilizando el "container" y vamos a revisar la consola y vemos que en el momento en que se inicializa esta sección que dice "tareas works! " tengo también un arreglo donde se están mostrando los elementos que están dentro del servicio que está dentro de Node, y en este caso estoy mostrando los resultados que se encuentran dentro de una base de datos MongoDB.

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.