Servicios REST con Spring MVC y AngularJS

11
34261

Servicios REST con Spring MVC y AngularJS

0. Índice de contenidos.


1. Introducción.

En este tutorial vamos a montar un pequeño proyecto donde vamos a dar de alta un par de servicios REST con Spring MVC y los vamos a consumir desde una aplicación en AngularJS. Los servicios (o recursos) REST se consideran entidades que representan conceptos de negocio. Actualmente se está trabajando mucho para construir en las organizaciones APIs REST que expongan su negocio de forma sencilla para ser consumidos por diferentes aplicaciones. Veremos cómo implementar los recursos REST con Spring MVC y su consumo a través de una aplicación hecha en AngularJS.

Si quieres descargar el código fuente del tutorial pincha aquí.

2. Entorno.

El tutorial se ha realizado con el siguiente entorno:

  • MacBook Pro 15′ (2.4 GHz Intel Core i5, 8GB DDR3 SDRAM).
  • Oracle Java SDK 1.7.0_60
  • Spring Boot 1.1.10.RELEASE
  • Spring MVC 4.0.8.RELEASE
  • AngularJS 1.2.21

3. Configuración del proyecto

Lo primero será crear el proyecto por lo que usaremos Maven para ello. En el pom.xml metemos lo siguiente:

Utilizaremos el spring-boot-starter-parent para utilizar las dependencias comunes de un proyecto Spring. También añadimos la dependencia spring-boot-starter-thymeleaf para utilizar el motor de plantillas Thymeleaf ya que en nuestro caso las vistas se construirán en HTML5 y AngularJS.

4. Servicios REST con Spring MVC

Para la prueba de concepto crearemos un API REST con un endpoint que devuelva un listado de películas con la información en formato JSON del título, año del estreno y el nombre del director. También haremos otro endpoint para añadir una película al catálogo desde la página web. El formato y las URLs serían las siguientes:

HTTP GET /films

Respuesta:

HTTP POST /films

Petición:

El código que cubre el API REST lo añadimos en la clase FilmsController, para ello la anotamos con @RestController. Esta anotación de Spring MVC proporcionará superpoderes REST a la clase. Los métodos anotados con @RequestMapping y el verbo HTTP correspondiente (GET, POST) se encargarán de representar los endpoints de nuestra API de películas. Es sólo un ejemplo por lo que las películas las meto en una lista que me creo en la propia clase.

Automáticamente y sin necesidad de configurar nada Spring MVC se encargará de serializar y deserializar de JSON a Java y viceversa.

La anotación @RequestBody se utiliza para indicar que el objeto film vendrá en el cuerpo de la petición. La anotación @Valid se utiliza para lanzar las validaciones del estándar JSR 303 Bean Validation.

La clase Film es un POJO normal y corriente:

Con esto tenemos nuestro API Rest preparado. Nos faltarán un par de clases: una para configurar el arranque de la aplicación a través de Spring Boot y la otra para redireccionar a la página de inicio index.html

Para no tener que configurar pesados ficheros XML queda mucho más limpia la configuración de esta manera.

Cuando entremos a la URL http://localhost:8080/ nos redirigirá a nuestro index.html.

5. Consumir los servicios REST con AngularJS

Una vez montado todo el API REST sólo nos queda hacer la página donde visualizar el catálogo de las películas. Para ello nos construimos una página index.html.

El código HTML es sencillo. Las directivas de Angular se utilizan para que éste pueda manejar el contenido del HTML y que pueda hacer su magia. Se recoge de la variable ‘films’ que almacena el catálogo con la respuesta del servidor, y se recorre para sacar cada una de los datos de cada película y pintarlo en la página. Debajo aparece el formulario con los campos para añadir una nueva película al catálogo.

En el fichero services.js se añade el código que se encargará de hacer las llamadas al API REST y manejar la respuesta en formato JSON. Mediante el servicio $http.get realizamos la comunicación con el servidor. Le indicamos el endpoint al que debe llamar haciendo una llamada tipo GET de HTTP. Cuando el servidor responde con el resultado de la llamada GET /films se ejecutará la promesa que invoca a la función que se le pasa por parámetro al success en caso de que la respuesta venga con código 200. Dentro del success se almacena el contenido de la respuesta en la variable films. En caso de error se llamará al método error que únicamente muestra un mensaje de error.

Arrancamos el servidor con el comando mvn spring-boot:run y entramos en http://localhost:8080.

6. Conclusiones.

Hemos podido ver lo sencillo que se vuelve el desarrollo web cuando utilizas determinada tecnología que está especialmente pensada para facilitar el desarrollo a los programadores. Tanto AngularJS como Spring MVC son sencillos de utilizar y casi no tienen configuración por lo que con pocas líneas tienes la funcionalidad lista.

Tanto para pequeñas pruebas de concepto como grandes proyectos con cientos de recursos REST esta combinación es perfectamente posible.

Si quieres descargar el código fuente del tutorial pincha aquí

Espero que te haya sido de ayuda.

Un saludo.

Juan

11 Comentarios

  1. hola oye me gustaría saber como validas del lado del servidor
    como muestras el error en pantalla gracias ojala y pudieras ayudarme

  2. Groso! Muy bue aporte. Lo voy a usar tal cual para arrancar con angular y servicios REST.
    Solo que voy a deployar en un Tomcat es lugar de Spring-boot :D.
    Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here