Angular 2 avanzado: Trabajo con APIs

Eliminar un registro

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección comenzaremos a utilizar las funciones avanzadas del módulo http y aplicaremos el método DELETE, que le permite a nuestra API RESTful distinguir el tipo de petición y aplicar la información que enviamos desde la aplicación para eliminar un registro específico.
07:41

Transcripción

En esta lección vamos a aprender cómo eliminar un registro desde una base datos. Vamos a aprovechar algunos elementos especiales que tenemos dentro de nuestra aplicación, por ejemplo vamos a eliminar la información a través de una API REST que nos va a permitir a nosotros seleccionar un registro y eliminarlo. También vamos a aprovechar al máximo esta API REST y vamos a utilizar un método específico de HTTP para poder eliminar la información. Vamos utilizar específicamente el método "delete", que es el que nosotros trabajamos como estándar para poder enviar información y eliminar un registro. Ahora voy a modificar mi aplicación, voy a buscar en la carpeta donde se encuentran el código fuente y específicamente voy a seleccionar un componente llamado "tarea-individual". En mi aplicación, este componente lo que hace es que genera un ítem dentro de una lista, vamos a ver cómo está funcionando este componente y vemos que acá yo estoy generando una lista a partir de un llamado a una API REST, específicamente estoy utilizando el método "get". Esto me devuelve la información que está dentro de una base de datos y voy a utilizar el método "delete", por ejemplo para eliminar un registro. Voy a aprovechar que ya tengo creada una barra de herramientas y voy a asignarle una conducta específicamente a este ícono. Así que vamos a ir al código y voy a buscar en la plantilla de mi componente el archivo "tarea-individual. component. html" y acá vemos que se encuentra en la barra de herramientas y también la información de la tarea que se está desplegando. Ahora yo voy a modificar el ícono donde aparece, en este caso en la papelera, y voy a asignarle un evento. En Angular, los eventos se asignan incluyéndolos dentro de paréntesis, así que voy a poner "clic" que es el evento que quiero escuchar y voy a hacer que cuando el usuario haga "clic" active un método llamado "borrar Registro" y vamos a enviar como parámetro la información de esta tarea. Entonces, como estoy utilizando un objeto para desplegar toda la información que se muestra dentro de esta línea, yo voy a enviar el objeto donde se encuentran todos los datos relacionados con esta tarea. Vamos a guardar y vuelvo al código de mi aplicación. Ahora toca generar el método que estamos invocando, de hecho lo voy a copiar simplemente para que no tengamos ningún problema con las mayúsculas, las minúsculas o los nombres. Así que vamos a ir acá, a la aplicación, y voy a crear el método "borrarRegistro" que va a escuchar un parámetro llamado "tareaInfo". En este caso no vamos a dar ninguna respuesta, así que vamos a definir la respuesta tipo "void" y vamos a asignar lo que va a ser el proceso de borrado. ¿Cómo va a ser el proceso de borrado? Bueno, básicamente lo que tenemos que hacer es conectarnos a un servidor. Para hacer eso vamos a necesitar utilizar el módulo HTTP. Ahora, este módulo no lo he declarado, así que vamos a proceder a declararlo, vamos a importar los componentes. Así que comienzo con "import" y voy a incluir los módulos relacionados con el HTTP que acabo de declarar, en este caso va a ser "Http", y quiero que notes que estoy utilizando una "H" mayúscula, porque en este caso estamos llamando un módulo de Angular. También vamos a invocar el módulo "Response" y lo vamos a invocar de "@angular", especificamente "/http". Acá tenemos un error de sintaxis es "from", listo. Ahora vamos a llamar, solamente para que veas que se hace autocompletado, acá, cuando nosotros invocamos Angular y tenemos acá todos los diferentes módulos, en este caso el módulo HTTP. Listo, ya tenemos insertado este módulo, nos falta inicializarlo y esto lo tenemos que hacer dentro del constructor donde vamos a declarar una variable privada y le vamos a asignar, en este caso el valor "http" que es como yo lo estoy invocando dentro de mi aplicación, y le estamos asignando el tipo de dato "http". Listo, ya tenemos una conexión habilitada, por lo menos una conexión externa de nuestra aplicación hacia los datos que se encuentran dentro de una API externa. Ahora vamos a invocar la información pero en este caso, como nosotros lo que vamos a hacer es borrar, vamos a utilizar el método específico de borrar. Como puedes ver acá, Visual Studio está haciéndome autocompletado y me muestra un método que se llama "delete". Vamos a seleccionarlo y en el caso de "delete", lo que vamos a hacer es que nos vamos a conectar pero utilizando el método específico de "delete" para que nuestra aplicación API pueda entender que nosotros lo que queremos hacer es eliminar un registro. Sabiendo eso, entonces nosotros vamos a definir cuál va a ser el valor que va a tener la llamada a la que nos vamos a conectar. Dentro de mi aplicación, yo tengo esta llamada donde estoy utilizando la siguiente sintaxis, estoy conectándome a mi aplicación, llamo específicamente a la ruta "api/lista" y acá donde aparecen estas equis que acabo de insertar tengo que incluir el "id" de registro que quiero eliminar. Esto es un registro único, pero tengo que definirlo para que mi aplicación sepa que tiene que eliminarlo. ¿De dónde saco esta información? Justamente, si nosotros revisamos el resultado que nos da la API y lo tengo acá dentro de mi navegador, vamos a ver que acá, dentro de la sección de Network, yo tengo el resultado que me da mi API y vemos que tengo un campo que se llama "id". Así que yo voy a tomar este campo que se llama "id" y se lo voy a enviar a mi aplicación y le voy a decir que borre "lista" y que agregue este campo "id", este campo "id" es una propiedad que viene dentro del objeto "tareaInfo", así que lo voy a copiar y ahora sí tengo la información necesaria. Finalmente, lo que voy a hacer es que voy a generar una promesa que va a ejecutar un código una vez que tengamos una respuesta desde la aplicación. En este caso voy a generar un parámetro que se va a llamar "respuesta" que va a ser de tipo "response", voy a ejecutar una función, por ahora voy a enviar un mensaje a la consola que dice "registro borrado". Ya tenemos lista nuestra aplicación, vamos a ejecutarla. Vamos acá a la aplicación, voy a tener acá la consola abierta y voy a presionar el botón de borrar y vamos a ver que me aparece la información de registro borrado. Y si actualizo mi aplicación, ahora solo tenemos un registro. Así es como estamos eliminando un ítem dentro de nuestra aplicación y estamos utilizando específicamente las bondades que nos da una API REST para eliminar un registro.

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.