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 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!