Angular esencial

Cargar archivos externos en Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una parte fundamental de una aplicación Angular es la capacidad de conectarse a datos externos. En esta lección vamos a aprender a utilizar el módulo HTTP para interactuar con datos externos y procesar datos dentro de un componente.
09:32

Transcripción

Cuando trabajas en una aplicación Angular y conforme vaya convirtiéndose en algo más sofisticado, eventualmente vas a necesitar interactuar con datos externos. Por datos externos me refiero a servicios web, API o sencillamente un archivo que se encuentre separado de nuestra aplicación. Todos estos datos externos nos van a servir para hacer más modular o más dinámica nuestra aplicación. Pensemos, por ejemplo, acá en esta aplicación en la que estoy trabajando. Por ahora, yo tengo una aplicación en la cual tengo una lista de libros y esta lista se está generando de manera estática, lo que quiere decir que, dentro de mi aplicación, se encuentran todos los libros que estoy desplegando en ella. Lo que vamos a hacer en este ejercicio es que vamos a reemplazar la información que está generando esta lista y vamos a utilizar un archivo externo para hacer la información dinámica. Vamos a ir al código de nuestra aplicación y vamos a examinar cómo se está mostrando esta información actualmente. Acá yo estoy trabajando esa lista en un componente llamado'lista-de-libros. component. ts'. En este caso, estoy desplegando todos los libros de esta lista a partir de un "array". Este "array" está conformado por una serie de objetos. Lo primero que voy a hacer es que voy a eliminar este "array" llamado'libros' y voy a dejar mi aplicación así. Vamos a revisar el resultado y vemos que por ahora no me está mostrando ninguna lista, porque acabo de eliminar esta información estática. Ahora lo que vamos a hacer es que vamos a tomar esta información externa a partir de un archivo que se encuentra en mi servidor. Así que voy a ir a la carpeta'Assets', que se genera automáticamente en mi proyecto y acá voy a crear una nueva carpeta. En este caso la voy a llamar 'Json', donde voy a almacenar un archivo que está en este formato. El formato JSON se utiliza mucho para el transporte de datos, porque utiliza muy poca información. Así que yo lo que voy a hacer es que voy a entrar a esta carpeta'Json', vamos a crear un nuevo archivo y este nuevo archivo se va a llamar'lista-de-libros. json'. Ahora que tengo este archivo, 'lista-de-libros. json', voy a pegar la información que tenía hasta hace unos segundos, el "array", con todos los libros. Básicamente, estoy replicando todos los datos estáticos, pero ahora los estoy poniendo dentro de un archivo externo. Vamos a guardar y ahora vamos a conectar nuestra aplicación para que pueda leer la información que se encuentra dentro de ese archivo externo. Lo primero que vamos a necesitar es importar un par de elementos nuevos. Vamos a ir al inicio del componente, y vamos a incluir 'import', y vámonos a llamar algunos elementos, en este caso'http'. Quiero que la primera H esté en mayúscula. Vamos utilizar 'Response' y los vamos a importar desde el módulo de'angular' "slash"'http'. Listo. Ahora tenemos acceso a los primeros elementos que nos van a permitir a nosotros conectarnos. 'Http'básicamente nos va a permitir a nosotros generar una conexión externa y'Response'nos va a permitir trabajar los datos que recibimos a partir de esa conexión y desplegarlos dentro de nuestra aplicación. Siguiente paso es que voy a crear una variable privada dentro de mi aplicación, para hacer una instancia de'http'. Esto lo voy a hacer dentro del constructor llamando a'private http', que va a ser el nombre de la variable, y vamos a decir que esta variable sea de tipo 'http'. Listo. Ahora, teniendo esta información, vamos a crear un nuevo método que se va a llamar'cargar Lista'. Este método se va a encargar de conectarse a través de'http', invocar la información que se encuentra en este archivo que acabamos de crear y desplegarla en esta aplicación. Así que para eso vamos a llamar a'this' punto 'http', que es la variable que acabamos de crear, y vamos a llamar acá a un método llamado'request'. 'Request', básicamente, lo que va a hacer es que nos va a generar una conexión de'http'con un archivo externo. Debemos definir, entonces, cuál va a ser el archivo con el que nos vamos a conectar. Así que, entre paréntesis, en este caso entre comillas, vamos a definir cuál va a ser el archivo al que nos vamos a conectar, en este caso 'assets', tal como la carpeta en la que acabamos de crear este archivo'json', y ponemos'json', en este caso'lista- de- libros. json'. Ahora, 'Request'nos va a devolver en este caso un observable. Los observables, básicamente, nos van a permitir a nosotros trabajar con información asíncrona. En este caso, nosotros estamos realizando una carga externa de un archivo que no se va a realizar de manera inmediata. Así que tenemos que esperar hasta que este archivo llegue a nuestra aplicación y a partir de ahí trabajar con los datos que están dentro de este archivo. Así que, para saber cuándo la información dentro de un observable está disponible, vamos a utilizar el método'subscribe' y dentro de él vamos a ejecutar una acción. En este caso, vamos a poner acá, entre paréntesis, que 'respuesta', que va a ser la respuesta que vamos a obtener de nuestro archivo, sea del tipo de dato 'Response'. Y vamos a ejecutar acá un código. Lo que se encuentre dentro de estas llaves es el código que se va a ejecutar una vez que tengamos una respuesta de 'lista-de-libros. json'. Ahora, acá, lo que vamos a hacer es que recordemos que nosotros ya teníamos definido una variable que se encontraba dentro de la aplicación, que era de tipo "array". Así que yo voy a tomar esta variable y voy a decir que'this'punto'libros' sea igual a 'respuesta'. Vamos a guardar, y en este caso creo que me está dando un error. El error me lo está dando porque'this'punto'libros'es un elemento de tipo "array" y'respuesta'en este punto es un elemento de tipo'response'. Así que para asegurarnos de que estamos obteniendo la información en el formato correcto, yo voy a llamar a'respuesta'punto 'json', que va a convertir la información a un formato JSON. Volvemos a revisar acá y tenemos nuestra variable'libros', que es un "array" de objetos y en este punto lo estamos igualando a la respuesta que nos llega desde'lista-de-libros . json'. Ya lo tenemos listo para trabajar, solo nos falta un detalle: vamos a tomar este método 'cargarLista' y lo vamos a invocar en el momento en que nuestra aplicación arranca. Esto es, en el evento'ngOnInit', que se ejecuta en el momento en que este componente está disponible para poder ser utilizado por el usuario. Así que vamos a llamar a'this'punto 'cargarLista' y ahora, en el momento en que se ejecuta mi aplicación, en el momento en que entramos específicamente a este documento, vamos a llamar al método'cargarLista', que va a hacer una invocación'http. request', va a invocar este archivo JSON y, cuando tenga la información, va a igualar los datos que se encuentren en él a la variable 'this'punto'libros'. Ahora'this'punto'libros' ya se encuentra listo para trabajar y desplegar la información dentro del documento. Veamos el resultado final de nuestra aplicación y vemos que ya se está mostrando la información correspondiente al documento en el que yo estoy trabajando. Ahora, ¿cuál es la ventaja de tener información dinámica? Es que, sin tener que modificar el código de mi aplicación, yo puedo cambiar los datos que se encuentran dentro de esta lista. Por ejemplo, si yo regreso al archivo JSON y quiero cambiar el título de un libro, por ejemplo, el primer libro, que en este caso es El retrato de Dorian Grey, vamos a cambiarlo y simplemente voy a poner asterisco, asterisco, asterisco y vamos a cambiar el autor por 0000. Listo. Yo no tuve que modificar el código JavaScript de mi aplicación, solamente modifiqué el JSON. Así que regresamos y vemos cómo ya cambió la información de mi aplicación. Esto lo puede hacer cualquier persona, no necesariamente un técnico. Y además, si nosotros estamos utilizando una aplicación o una base de datos, podemos generar este archivo a través de un lenguaje dinámico como Ruby, PHP o. NET y que este archivo se conecte a través de una base de datos y nos muestre información dinámica. Así es como nosotros podemos trabajar información externa dentro de nuestra aplicación y poder hacer nuestras aplicaciones un poco más sofisticadas y más dinámicas.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/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.