Introducción a Angular JS

Actualizar y borrar registros con ngResource Más videos

Descripción del tema

Ya vimos como listar y crear registros usando un API RESTful, vimos que Angular cuenta con un servicio llamado ngResource que nos permite manejar los requests al API de una manera extremadamente sencilla. En este tema veremos como editar y borrar los registros que ya tenemos en la base de datos, veremos mas a detalle como usar el servicio ngResource para realizar estas operaciones.

Editar un registro existente

Para poder editar un registro vamos a hacer una petición al API que hemos estado usando, necesitamos realizar esta petición usando el método PUT y enviando el ID del registro a editar en la URL. Para poder realizar esto necesitamos configurar el recurso de la siguiente manera.

.factory('Bookmark',function($resource){
    return $resource('http://bookmarks-angular.herokuapp.com/api/bookmarks/:id',{
        id:'@id'                 //Step 1
    },{
        update : {method:'PUT'}  //Step 2
    });
})
  1. En el paso uno configuramos el parámetro id, la @ significa que se usará el id de cada instancia de donde sea ejecutado el método $delete o $update, ya veremos más adelante esto funcionando.
  2. En el paso dos configuramos un nuevo método al servicio Bookmark, le llamaremos update y hará una petición usando el método HTTP PUT, si quisiéramos crear más métodos aquí lo haríamos, podemos cambiar inclusive la URL.

Con los cambios anteriores ya estamos listos para actualizar o borrar registros, lo que sigue es cambiar el código del controlador para realizar la llamada al API. Vamos a modificar el método save que ya tenemos definido.

$scope.save = function(bookmark){
    if($scope.bookmarkForm.$valid){
        if(!bookmark.id){

            //...

        }else{
            bookmark.$update(); //<--------
        }
        $('#bookmarkModal').modal('hide');
   }
}

Aquí simplemente ejecutamos el método $update que creamos en el servicio, algo importante a notar es que estamos usando el signo de dólar $, esto es porque lo estamos llamando desde la instancia, eso lo mencionamos en el tutorial anterior.

El método $update automáticamente realiza la petición al API y nuestros cambios serán guardados en la base de datos.

Si probamos nuestros cambios en el navegador, veremos que al abrir la ventana de edición, el combo de categorías no está seleccionando la categoría correcta, de hecho no selecciona nada.

Actualizar informacin

Actualizar registros con ngResource

Esto sucede porque ya no estamos usando strings como categorías, ahora estamos usando objetos, necesitamos modificar el template solucionar este problema.

<select ng-model="bookmark.category" ng-options="obj.name for obj in categories track by obj.id" id="category" class="form-control">
</select>

En el select agregamos la expresión track by obj.id a la directiva ng-options, esto nos permitirá que utilice la propiedad id para seleccionar las opciones del combobox.

En este caso usamos el ID, pero podríamos utilizar cualquier otra propiedad del nuestros modelos. Con este pequeño cambio ya podremos actualizar correctamente los bookmarks.

Eliminar registros

Eliminar los registros es tan sencillo como actualizarlos, simplemente usaremos el método $remove de la instancia del bookmark que se quiere borrar.

$scope.remove = function(bookmark){ //Step 1
    bookmark.$remove(function(){    //Step 2
        for(var i=0,len=$scope.bookmarks.length;i<len;i++){
            if($scope.bookmarks[i].id === bookmark.id){ //Step 3
                $scope.bookmarks.splice(i,1);
                break;
            }
        }
    });
}
  1. En el paso uno recibimos la instancia del bookmark a eliminar.
  2. En el paso dos ejecutamos el método $remove que hará la petición al servidor y borrará el bookmark de la base de datos. 
  3. El paso tres se ejecuta al responder el servidor satisfactoriamente, necesitamos buscar el bookmark en el arreglo que tenemos y lo eliminaremos de la lista para no mostrarlo más en el view.

Requerimos hacer un último cambio en el template, necesitamos enviar el bookmark a borrar, actualmente estamos enviando sólo el ID. Sobre la línea 58 del html cambiamos el siguiente código.

<i ng-click="remove(bookmark.id)" class="glyphicon glyphicon-trash"></i>

Por esto:

<i ng-click="remove(bookmark)" class="glyphicon glyphicon-trash"></i>

Solamente estamos enviando la instancia completa del bookmark, con esto estamos listos para probar nuestros cambios.

Conclusiones

Como se ha podido observar el servicio ngResource es extremadamente útil para realizar operaciones de tipo REST, internamente este servicio esta usando al $http para hacer las peticiones Ajax, pero nosotros solamente llamamos los métodos que necesitamos y Angular se encarga del resto.

Mi recomendación es usar el servicio $http para cosas sencillas, si queremos realizar algún catálogo de productos, usuarios o cualquier otra cosa, deberíamos usar el ngResource que nos facilitará mucho la vida.

Me ayudarás mucho si compartes este tutorial en tus redes sociales, eso me anima a seguir publicando más videos sobre tecnologías interesantes.

Si tienes dudas puedes usar el foro, recuerda que puedes descargar el código fuente, el video y ver la demostración de lo que hemos hecho. 

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

11Comentarios

  • Avatar-10 Jorge Armand Olivero 31/10/2014

    Muy bien, ¿Que recomiendas para hacer le saber de forma visual al usuario de que borro , elimino, guardo o actualizo un registro? Lo pregunto por que pesar de que cada operacion se ve reflejada en la aplicación , me parece que seria mucho mejor indicar le con alguna mensaje o ventana emergente, pero sin necesidad de usar Jquery, mejor seria utilizando unas directivas, si conoces algunas me prodrias compartira o si es mejor crear nuestros propios elementos para mostrar los mensajes

    • Avatar-9 Crysfel Villa 31/10/2014

      Así es, es muy importante notificarle al usuario lo que ha sucedido. Hasta el momento no hemos visto el uso de directivas por eso es que no esta hecha esa parte todavía ;) Personalmente recomendaría utilizar https://github.com/JanStevens/angular-growl-2, de hecho en el capítulo de directivas usaremos este módulo. Saludos

      • Avatar-7 Ricky Muñoz 06/01/2015

        imagino que añadir el siguiente efecto de notificación no es muy complicado, ¿no? http://tympanus.net/Development/NotificationStyles/growl-genie.html Tendría que crear un módulo a parte y añadirlo como dependencia de mi aplicación en Angular?

        • Avatar-1 Crysfel Villa 07/01/2015

          Hola Ricky. Así es, tendrías que crear un módulo y dentro de ese módulo definir las directivas necesarias, luego simplemente usarlas. Por ejemplo aquí te dejo un módulo que hace esto mismo: http://janstevens.github.io/angular-growl-2/ Saludos

        • Avatar-9 Ricky Muñoz 03/12/2014

          Magnífico! Muchas gracias por compartir tus conocimientos, muy claro. Mas bien, no tienes el repositorio del curso en Github? lo he buscado y no he dado con el. Saludos.

          • Avatar-4 Crysfel Villa 03/12/2014

            Hola Ricky, lo acabo de subir a mi cuenta, tenía esto pendiente desde hace tiempo, gracias por recordarmelo :) https://github.com/crysfel/IntroduccionAngularJS Saludos

          • Avatar-12 Ruth Velazquez 12/10/2015

            Hola que tal, una pregunta: ¿Como puedo actualizar solo una tabla de mi base de datos, es decir, no toda la base si no solo una tabla con este método UPDATE? o existe otra manera? gracias por tu atención

            • Avatar-9 ivan murillo 15/10/2015

              Hola, buenas, que tal. Tengo el problema que cuando me va a mostrar el segundo ng-repeat con los bookmarks de la api, en el código html me los esta comentando, tanto en mi código con en el de muestra del curso, aparecen así: &lt;!-- ngRepeat: bookmark in bookmarks | filter: {category: currentCategory.name} --> Muchas gracias, un saludo.

              • Avatar-11 Carlos 23/02/2016

                Hola, si necesito solamente actualizar ciertos campos de mi tabla en la base de datos, ¿se puede hacer con ngResource o tendría que usar otro método de actualización?

                • Avatar-12 Crysfel Villa 23/02/2016

                  ngResource es para hacer peticiones REST a tu servidor. Te recomiendo hacer una petición PUT con los campos que quieres cambiar, en tu servidor recoges los parámetros y actualizas los campos de tu base de datos. Suerte!

                • Avatar-12 Alex 10/05/2017

                  Amigo he creado un API REST y quiero hacer la peticiones

                  Instructor del curso

                  Crysfel3

                  Autor: Crysfel Villa

                  Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

                  Descarga video Descarga Código Fuente Ver Demostración

                  Regístrate a este curso

                  Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                  Tendrás acceso a descargar los videos, códigos y material adicional.

                  Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                  Llevarás un registro de tu avance.