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

Editar un registro

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 PUT de http para enviar datos a una API, modificar un registro de la base de datos y, una vez que tengamos una respuesta, podemos actualizar los resultados que se despliegan en la aplicación.
11:24

Transcripción

En esta lección vamos a aprender cómo modificar un registro que ya existe dentro de nuestra base de datos, utilizando nuestra API REST y una integración con Angular 2. Acá yo estoy trabajando una aplicación Angular 2 y estoy trabajando específicamente dentro de un componente llamado "tarea-individual". Este es el componente que administra cada uno de los ítems que se encuentran dentro de mi aplicación, en los cuales se representa una entrada que se encuentra en la base de datos. Ahora yo lo que voy a hacer es que voy a activar un elemento que se va a mostrar cuando entremos en el modo de edición. Por ahora, cuando yo hago clic en el modo de edición, oculto la información que se encuentra dentro del componente. Yo voy a desplegar ahora un "div" y este "div" va a tener una función opuesta al bloque que se está ocultando. En este caso estamos ocultando la información siempre y cuando "mostrarDatos" sea "falso". En este otro bloque vamos a mostrar la información siempre y cuando'mostrarDatos'sea "cierto", así que vamos a mostrarlos de manera opuesta. En el momento en que este bloque se muestre, este bloque se va a ocultar y viceversa. Sabiendo eso, también vamos a insertar una casilla de texto, en este caso va a ser un "input" de tipo "text". Y voy a asignarle acá un ícono utilizando los "glyphicons" de Bootstrap, que son los mismos íconos que estoy utilizando en los otros elementos de la barra de herramientas, pero en este caso estoy utilizando uno que represente la opción de guardar. Vamos a guardar acá y vamos a ver el resultado en nuestra aplicación. Vemos que se va a ocultar un bloque, pero en el momento en que el bloque se oculte va a aparecer el otro con el ícono que representa un "diskette" para guardar. Tenemos entonces ahora una opción de escribir dentro de nuestra aplicación. Vamos a cambiarlo ligeramente, porque el texto no se muestra dentro de el CSS, así que vamos a buscar acá y vamos a definir que "input"... Y puedo ponerlo directamente así porque recordemos que las plantillas de Angular están completamente aisladas, están encapsuladas del resto de los elementos de la aplicación, así que solamente va a afectar los "inputs" que estén dentro de este componente. Y le vamos a poner que sea de color gris para que podamos visualizar mejor el texto que está dentro de la casilla de texto. Vamos a ver. Y así podemos ver un poco mejor el texto, lo vamos a cambiar a negro para que sea más fácil de ver. Listo. Ahora ya tenemos nuestra entrada de texto. El siguiente paso es que vamos a asignar a esta entrada de texto un valor utilizando un "ngModel". Para eso vamos a incluir paréntesis cuadrados, paréntesis redondos y vamos a definir la directiva "ng Model". La directiva "ngModel" nos va a permitir a nosotros crear un valor que se conecta por dos vías, así que vamos a recibir y a enviar información. En este caso vamos a ponerle "tareaModel", punto, y le vamos a poner el nombre que tiene en este momento nuestro elemento. Ahora voy a copiar esta información y vamos a ir a la sección de código donde voy a definir primero "tareaModel" y lo vamos a crear como un objeto. O mejor aún, vamos a crearlo como de tipo "any" para poder incluir cualquier tipo de valor. Y una vez que pasamos al método "ngOnInit" vamos a inicializar nuestra variable, en este caso "this. tarea Model". Vamos a definirlo que sea un objeto vacío, listo. Ya tenemos acceso al modelo y podemos enviar y recibir información, así que en el momento en que nosotros entramos en el modo de edición, yo voy a activar un valor cuando entramos en edición, vamos a enviar el valor que se encuentra dentro de este objeto, que se llama "tareaInfo. texto". Así que voy a mandar el nombre del texto en el que estamos trabajando. Una vez que tenga el nombre del ítem en el que vamos a trabajar, vamos a pasar a activar edición. Cuando activemos edición, yo voy a tomar el valor de "this. tarea Model punto" y revisamos el nombre que hemos asignado, que en este caso el modelo como lo estamos utilizando es "tareaModel. nombre". Así que vengo acá y digo que "tareaModel. nombre" es igual al valor "nombre" y lo voy a definir como un valor que me está entrando acá desde "activarEdicion", que es de tipo "string". Listo. Ya estamos recibiendo un valor y se lo estamos asignando al modelo. Así que vamos a revisar y vamos a ver que tengo una tarea llamada acá "Lorem Ipsus 2". Hago clic y voy a tener un valor llamado "Lorem Ipsus 2". Ahora ya puedo comenzar a modificar este valor. El siguiente paso es, cuando presionamos Guardar, yo voy a enviar información que se encuentra dentro de este modelo y lo voy a dirigir hacia nuestra API REST. Así que vamos a crear un nuevo método acá que se va a llamar "editar Tarea" y vamos a editar esta tarea. Voy a asignar, dentro de este método, una llamada a nuestro servidor. En este caso, nosotros vamos a utilizar el método "put", así que vamos a asignar "this . http". En este caso, HTTP ya está inicializado dentro de la aplicación. Vamos a utilizar otro método. En ese caso tenemos varios métodos, como puedes ver, y voy a utilizar el método llamado "put". Este método me va a permitir a mí en este caso, y por la forma en que funciona mi API, actualizar información. Voy a definir la ruta en que va a estar mi método "put", así que voy a copiar acá la ruta de mi aplicación y lo voy a poner acá. La forma en que está funcionando en este momento mi API es que yo voy a tomar el valor que se encuentra dentro de este registro y voy a incluir acá también el valor de la identificación para poder enviar un dato y que pueda ser modificado. Así que para eso voy a incluir acá también un valor y voy a incluir acá, al igual que lo hice dentro de "tareaInfo", voy a incluir el valor que llega desde la tarea. Ahora este parámetro que se encuentra acá es el parámetro "id", que me está mostrando a mí el número de identificación. Yo voy también a rescatar la información que se encuentra dentro de "tareaInfo". Para rescatar esta información tenemos que ir dentro de la plantilla y en el momento en que presionamos el botón Guardar, vamos a inyectar este valor. Así que vamos a invocar el método "editarTarea" dentro de la plantilla y vamos a decir que al hacer clic sobre este elemento invoquemos el método "editarTarea" y le inyectemos el valor que se encuentra dentro de "tareaInfo". Volvemos otra vez a nuestra aplicación. Ahora yo necesito también enviarle valores, valores que van a ser parámetros. En este caso yo necesito crear una variable que se va a llamar "parámetros" y le voy a asignar un valor que va a estar en formato JSON y va a ser "texto" –en este caso podemos ponerlo sin comillas– y el valor que va a tener "texto" va a ser el valor del modelo. En este caso el modelo que voy a necesitar es "tarea Model. nombre", así que le voy a asignar el valor que se encuentra dentro de la casilla de "texto". Y una vez que tengo definidos los parámetros, separo por coma el valor y vamos a hacer la llamaba "put" a esta dirección con estos parámetros. Y finalmente voy a copiar la información que se encuentra acá en Borrar, para distribuir los eventos de mi aplicación, que básicamente es: en el momento en que tengamos una respuesta vamos a emitir un evento que nos va a permitir a nosotros actualizar la aplicación. Y estamos listos, vamos a revisar nuestro código. Tengo acá mi aplicación. Vamos a editar el nombre, ponemos cualquier texto, guardo y estamos viendo que nos está actualizando la información. Vamos a revisar qué es lo que está ocurriendo. Voy a inspeccionar el código, voy a revisar acá dentro de la red y vamos a ver que cuando yo modifico un texto, se está conectando a mi aplicación, está enviando la información correctamente y estamos obteniendo una respuesta. Pero quiero que notes que en este momento me está devolviendo los valores que tiene mi aplicación pero le está agregando un nuevo campo. En este caso estamos asignando que tenga un valor terminado como "true". Vamos a revisar el código del servidor y vemos que dentro de mi servidor yo estoy utilizando que el comando "put" modifique la aplicación con el valor "terminado" igual a "true". Si nosotros queremos modificar esto o agregar nuevos parámetros, por ejemplo yo puedo agregar otro parámetro que en este caso sea "texto" y le asignamos un valor, en este caso podemos utilizar los valores tales como los llamamos desde "post", en este caso vamos a llamar "petición texto". Vamos a venir a nuestra aplicación y le asignamos un valor dinámico que nos va a llegar desde la petición que está haciendo el usuario. En este momento hemos agregado este valor "texto". Podemos conservar este valor para agregar más de uno o eliminarlo y así modificar el valor de nuestra aplicación. En ambos casos es perfectamente válido. Voy a guardar la información. Ahora sí, tenemos lista la aplicación. Vamos a modificar el valor que se encuentra dentro de este "texto", voy a refrescar. Vamos a modificar este valor, ponemos "xxx", guardamos y ya tenemos el resultado. Y si queremos podemos realizar también otras tareas que se realicen desde el lado del servidor para poder desplegar y actualizar información utilizando nuestra 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.