programador

iván albizu

Main Blog

Blog

Angular consumiendo de WordPress Rest Api – Crud

Angular consumiendo de WordPress Rest Api

Siguiendo con la entrada anterior en la que configuraba la Rest Api con WordPress y Autenticación JWT con AngularJS, voy a continuar ampliando el proyecto. (Al final de la entrada he publicado un vídeo y el repositorio en Git Hub).

Visitando la documentación del Plugin Wp Rest Api  podemos ver todo lo que se puede hacer, en concreto vamos a realizar:

  • Listaremos varias entradas: GET /wp/v2/posts
  • Obtendremos una entrada concreta: GET /wp/v2/posts/id
  • Actualizaremos una entrada: POST /wp/v2/posts/id
  • Crearemos una entrada: POST /wp/v2/posts
  • Eliminaremos una entrada: DELETE /wp/v2/posts/id

Los dos servicios, PostsServices y PostServices necesitan inyectarle varias dependencias, $http, $rootScope y URL_API:

En la vista (posts.html) que contiene todas las entradas podremos:

  • Ver todas las entradas.
  • Eliminar una entrada.
  • Crear nueva entrada.

En la vista (post.html) que contiene una entrada concreta podremos:

  • Obtener la entrada seleccionada.
  • Editar la entrada.

Obtener todas las entradas

Cuando la ruta sea ‘/posts’ cargaremos la vista ‘views/posts.html’ y el controlador ‘PostsCtrl’. Las llamadas desde la vista hacia el controlador las haremos mediante ‘vm’ sin necesidad de usar el ‘$scope’.

El controlador ‘PostsCtrl’ tiene varios métodos, uno de ellos, llamado getAll(), que llama al método getAllData() del servicio ‘PostsServices’. La respuesta recibida se le pasa a ‘vm.posts’ para que en la vista pueda ser usada. (No hay tratamiento de errores, pero se deberían tener en cuenta).

El servicio ‘PostsServices’ tiene varios métodos, uno de ellos el getAllData() realiza una petición GET a la Url de la API de WordPress y devuelve el resultado que luego será capturado desde el controlador.

Para pintar las entradas, cuando se llama a la vista ‘views/posts.html’ entra en funcionamiento el controlador PostCtrl. Dicho controlador ejecuta directamente el método getAll(). Esto nos permite obtener todas las entradas ya que está asociado a vm: vm.posts = dataResponse, (convención de nomenclatura muy usada que significa View Model, de esta manera no se abusa del $scope).

La vista pinta todas las entradas tras recorrerlas con ‘ng-repeat’. Ya que no usamos el $scope, tenemos que especificar sobre que elementos iteramos: ng-repeat=”post in vm.posts”. El plugin WordPress Rest Api devuelve el título, el contenido y el extracto de una entrada con etiquetas Html es por eso por lo que se usa la directiva ng-bind-html.

Obtener una entrada

Cuando la ruta sea ‘/post/:id’ cargaremos la vista ‘views/post.html’ y el controlador ‘PostCtrl’. Las llamadas desde la vista hacia el controlador las haremos mediante ‘vm’ sin necesidad de usar el ‘$scope’.

El controlador ‘PostCtrl’ tiene dos métodos, uno de ellos, llamado getPost(id), que llama al método getPostData(id) del servicio ‘PostServices’. La respuesta recibida se le pasa a ‘vm.post’ para que en la vista pueda ser usada.

Para obtener el post que usuario ha seleccionado se le envía en el vínculo la ‘id’ de la entrada.

Con el método getPostData(id) del servicio ‘PostServices’ se devuelve la entrada seleccionada por su id.

Para pintar una entrada llamamos a cada uno de los atributos que queramos pintar (de entre los que nos manda el plugin WordPress Rest Api) mediante ‘vm.post’.

Editar una entrada

La edición de una entrada voy a realizarlo a través de un modal de Bootstrap.

Para abrir el modal se usa el método openModal() que se encuentra en el controlador PostCtrl(). En dicho método se especifica el controlador y la template que se usará.

Y que es llamado en la vista post.html mediante un botón.

Se ha creado un nuevo controlador ‘ModalPostCtrl’ para realizar acciones con la entrada que se quiere editar.

  • Obtener la entrada por su ID con getPost(id).
  • Guardar la edición de la entrada con el método editPost(post, id). Para eso le pasamos al método editPostData(data, id) del servicio ‘PostServices’ los nuevos datos del post y su ID.
  • Cancelar y cerrar la ventana modal.

El código completo del controlador de la ventana modal será:

La edición de una entrada la representamos mediante una vista modal. En este caso se llamarán a los datos de una entrada mediante ‘vmm’ para evitar posibles conflictos.

Se identifica mediante la ID el nombre de la template html. Para actualizar la entrada se usa un formulario que tiene la directiva ng-submit con los nuevos datos y la ID de la entrada a actualizar ‘ng-submit=”vmm.editPost(vmm.post, vmm.post.id)”‘.

Crear una nueva entrada

Cómo he comentado anteriormente, la creación de una nueva entrada la realizaremos desde la vista ‘/posts’ con el controlador ‘PostsCtrl’. En este controlador tenemos el método createPost(post), que recibe los datos dela nueva entrada que el usuario a rellenado en la vista, y se le añade el atributo ‘status’ como ‘publish’ para que no aparezca como borrador, que es su comportamiento por defecto. Los datos son enviado al método createData(data) del servicio ‘PostsServices’. Se incorpora el método getAll() para actualizar todas las entradas y el método resetFields() para limpiar el formulario en la vista.

El servicio createPostData(data) recibe la entrada y la envía a la Rest Api de WordPress mediante POST. Devolviendo la respuesta del servidor.

Los campos para la creación de la nueva entrada está dentro de la tabla donde se pintan todas las entradas. Será enviado al controlador al activar el evento createPost(vm): ng-click=”vm.createPost(vm)”

Eliminar una entrada

Para eliminar una entrada la realizaremos desde la vista ‘/posts’ con el controlador ‘PostsCtrl’.

El método deletePost(id) necesita la ID de la entrada a eliminar. Igual que hasta ahora, usamos para ello un servicio deletePostData(id) que se encarga de enviar la petición al servidor. Una vez procesado, se vuelve a solicitar todas las entradas con getAll() para actualizar la lista.

El servicio deletePostData(id) se encarga de enviar la petición DELETE a la Rest Api de WordPress con la ID de la entrada a eliminar.

En la vista de todas las entradas aparece justo al lado de cada entrada un botón para eliminar la entrada.

Hasta aquí está el crud completo con AngularJS usando WordPress como Api Rest.

https://github.com/ivanalbizu/angular_wordpress_rest_api

En siguientes entradas publicaré como obtener las revisiones de una entrada.

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.