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

Crear un nuevo registro en Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a utilizar el método post() del módulo http en Angular. Enviaremos datos operacionalizados a una API para generar un nuevo registro y procesaremos el resultado gráficamente en la aplicación.
08:46

Transcripción

En esta lección vamos a aprender cómo crear un nuevo componente dentro de nuestra base de datos. Vamos a abrir el componente llamado "tareas" y específicamente vamos a buscar la plantilla llamada "tareas. component. html". Acá estamos desplegando una lista donde se muestran los ítems que corresponden a nuestra base de datos. Yo voy a insertar acá un nuevo elemento, en este caso un "input", donde voy a recibir el nombre de una nueva tarea. Este "input" va a ser de tipo "text" para que podamos generar un componente de texto y le vamos a asignar algunas propiedades específicas de Angular. Por ejemplo, le voy a agregar una propiedad llamada "ngMode", y en este caso lleva una sintaxis especial donde vamos a utilizar paréntesis cuadrados y luego vamos a utilizar paréntesis redondos. Dentro de estos paréntesis, vamos a definir el "ngMode". El modelo dentro de Angular es un tipo de dato especial que va a tener una conexión a dos vías, por ejemplo yo puedo obtener información desde un modelo pero también puedo enviar información hacia ese modelo. En este caso ya que estamos utilizando un "input", vamos a obtener información cuando el usuario inserte datos acá. Ahora tenemos el modelo y vamos a definir cuál va a ser el modelo en el que vamos a trabajar. Lo que voy a hacer es que voy a definir acá una variable llamada "modelo Item" donde se va a encontrar el modelo donde están los ítems de mi aplicación. Y en este caso vamos a poner "nuevoNombre". Esto simplemente es una recomendación, a mí me gusta trabajar el modelo siempre con propiedades, así cuando inserto nuevos objetos dentro de un formulario o dentro de una aplicación simplemente voy a trabajar todo dentro del mismo objeto y llamo diferentes propiedades, por ejemplo, "objeto2". Así puedo ir trabajando diferentes elementos, pero todos van a estar relacionados por un solo objeto. Voy a borrar este que te estaba poniendo de ejemplo y vamos a agregar también un botón. Y este botón lo que va a hacer es que va a enviar la información que hemos capturado desde este "input", así que vamos a poner que cuando hagamos clic sobre este botón se ejecute un método llamado "crearRegistro". Listo. Vamos entonces a trabajar la información que hemos creado dentro de este modelo. Voy a guardar la información que está acá. Vamos a ver el resultado de nuestra aplicación en este momento y tenemos acá esta entrada de texto y tenemos el botón, el botón aún no tiene texto, así que lo vamos a modificar y vamos a poner "GUARDAR", vamos a guardar los datos y ahora sí, nuestro botón dice "GUARDAR" y aquí está la información para guardar los datos dentro de nuestra aplicación. Ahora ya tenemos lo que sería los elementos básicos para comenzar a trabajar la aplicación. Tenemos acá esta lista de elementos donde se muestra cada uno de los ítems de nuestra base de datos y también tengo una entrada de texto que me permite a mí guardar un nuevo nombre. Vamos ahora a modificar el código para habilitar estas acciones dentro de la plantilla y vamos a pasar a "tareas. component. ts". Lo primero que tenemos que hacer es generar lo que va a ser nuestro modelo y en este caso el modelo se llama "modeloItem", así que vamos a crearlo: "modeloItem" y vamos a definir que esto sea un objeto. Tenemos un error acá de sintaxis. Este objeto lo vamos a inicializar cuando arrancamos nuestra aplicación y vamos a decir que "this . modeloItem" es igual a un objeto vacío. Así vamos a poder asignarle valores dentro de nuestra aplicación. Revisamos el resultado y vemos que ya se está desplegando la información antes que nosotros creáramos el objeto de nuestro modelo, entonces la aplicación estaba dando problema para desplegar los datos. Tenemos ahora, entonces, nuestra aplicación funcionando y vamos a empezar a generar la información a partir de "GUARDAR" este dato. Esto lo vamos a hacer creando el método llamado "crearRegistro". Vamos a ir al código de nuestro componente y vamos a crear un nuevo registro, vamos a devolver "void" y vamos a crear el cuerpo de nuestra función. Lo que tenemos que hacer es conectarnos a la API REST y a partir de eso nosotros poder enviar información. En este caso, yo voy a copiar un código que ya tengo que está obteniendo la información de mi aplicación. Vamos a venir acá y voy a pegarlo aquí. Esto va a tener algunas modificaciones. Primero necesito modificar el tipo llamada. En este caso, nosotros vamos a utilizar el método "post" para poder enviar información dentro de nuestra aplicación. También vamos a tener que enviar datos, así que voy a crear una variable que se va a llamar "parametros" donde vamos a enviar los parámetros, que es la información que necesita recibir mi aplicación para saber qué datos debe incluir dentro del nuevo registro. En este caso vamos a igualarlo a un objeto y este objeto va a tener un valor que se llama "texto" donde vamos a poner acá "xxx" y ahora este valor vamos a tomarlo acá. Voy a copiar. Luego vamos a modificar la llamada que estamos haciendo, en este momento está haciendo una llamada "request" que, por defecto, es una llamada de tipo "get", la vamos a cambiar y en Angular simplemente tenemos que definir cuál va a ser el método de llamado y en este momento vamos a definirlo como "post", porque queremos enviar información. Me aparece acá un error, porque la llamada "post" no solo espera que yo defina la ruta sino que también defina los parámetros de los datos que voy a enviar y los datos que voy a enviar son estos que están dentro del objeto que acabo de definir. Podemos enviar una cantidad indefinida de valores dentro de este objeto "parametros". Tenemos acá también una promesa que espera una respuesta desde el servidor y va a mostrar información, en este caso lo vamos a modificar y lo que vamos a hacer es, para tener una versión unificada de nuestra aplicación, es que vamos a llamar el método "peticionExterna" que hace una llamada a la base datos y muestra los archivos actualizados. Así que vamos a llamar "this. peticionExterna" y ya tenemos lista nuestra aplicación. Vamos a escribir un texto, guardamos y tenemos el resultado. Ahora se está poniendo únicamente la información "XXX". Cada vez que yo presione guardar se va generar un archivo'XXX', no queremos que esto suceda, vamos a borrarlos y lo que vamos a hacer es que vamos a utilizar el valor que se encuentra dentro del modelo. Esto es bastante sencillo, simplemente vamos a reemplazar este valor estático por "this. " y vamos a llamar la información que estamos almacenando dentro de nuestro "template" o plantilla que es "modeloItem. nuevoNombre", así que llamamos "this. modeloItem. nuevoNombre". En este caso nos está mostrando un error de sintaxis y esto lo podemos solucionar rápidamente dentro de "modeloItem", que lo estamos definiendo como objeto, y para evitar este tipo de error lo vamos a definir como "any" y así no tenemos que ejecutar ninguna validación específica y tenemos la información, no importa el formato que nos esté llegando desde la plantilla. Ahora sí, ya tenemos nuestra aplicación lista. Revisamos el resultado y ahora yo voy a escribir "ABC", guardar y tenemos el resultado. Ponemos acá "PRUEBA" y estoy generando todos los ítems utilizando el valor que se encuentra dentro del modelo y utilizando mi API REST.

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.