Tutorial: servicio Spring REST y cliente AngularJS (parte 1: versión básica)

Casi todos los tutoriales que he visto en internet te hacen crear el servicio y el cliente juntos en una aplicación. Pero dime cuando lo has visto en la vida real? En una empresa normal las aplicaciones y la infraestructura de back-end están claramente separados de los de front-end. Osea q las 2 cosas casi nunca van juntas. Los clientes front-end normalmente desarrollan programadores JavaScript juntos con diseñadores Web que a veces no están ni en el mismo edificio con los de back-end.
Por eso vamos a crear el servicio y el cliente por separado:

Servicio:

Paso 1:

Abre Eclipse y crea New->Dynamic Web Project o mejor con maven (New->Maven Project). Selecciona el arquetipo maven-archetype-webapp:

Lo llamamos app-test-greeting-service y va tener una estructura siguiente:

Paso 2:

Dentro src crea un paquete hello y tres classes Java:

La clase Application será una cosa mas tonta del mundo:

package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

Luego creamos nuestra clase de entidad para los mensajes que tendrán una id y un contenido:

package hello;

public class Greeting {

    private final long id;
    private final String content;

    public Greeting(long id, String content) {
        this.id = id;
        this.content = content;
    }

    public long getId() {
        return id;
    }

    public String getContent() {
        return content;
    }
}

Bueno, y nuestro controlador REST de toda la vida:

package hello;

import java.util.concurrent.atomic.AtomicLong;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class GreetingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();


    @RequestMapping("/greeting")
    public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {
        return new Greeting(counter.incrementAndGet(), String.format(template, name));
    }
}

- Ponle @RestController y no solamente @Controller, sino no va funcionar
- el counter va aumentar cada vez que clicas en "actualizar" de tu navegador web.
- el mensaje "Greeting" de la vuelta sera en formato JSON con el nombre que tu pasas como el parámetro (@RequestParam) El pom de tu proyecto será pequeño:

    4.0.0

    org.springframework
    app-rest-greeting
    0.1.0

    
        org.springframework.boot
        spring-boot-starter-parent
        1.3.0.RELEASE
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
    

    
        1.8
    


    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

Lanzalo clicando derecho en tu proyecto y seleccionando "Run As->Java Application" y vas a ver lo siguiente:

Cliente:

Paso 1:

- En el Eclipse haz copiar y pegar de tu proyecto anterior y cambiale el nombre a app-test-greeting-client.
- Puedes eliminar todo el código Java del proyecto anterior de src/main

Paso 2:

- Crea una carpeta public para meter tu pagina web con el código Angular/HTML dentro:

- Creamos nuestra pagina web index.html que nos va mostrar el mensaje:

 
  
  
      
 
 
  

   Your name:  
   The ID is {{greeting.id}}
   The content is {{greeting.content}}
  

Si aun no sabes que es AngularJS, te explico rapidito que es lo que esta escrito:
- La pagina web de arriba es para Angular una aplicación (ng-app)
- Los bloques de la pagina que envían o reciben algo son controladores (ng-controller)
- Dale al controlador un nombre que asi lo puedes referenciar en el código Angular (ng-controller="Hello")
- Los campos para meter cosas son modeles(ng-model) y saben actualizarse (update()) cuando le das "click" (ng-click="update()") o presionas "enter" (ng-click="enter()")
- Los campos para recibir cosas se maraca con {{}} - Crea un file hello.js y pega este codigo:

function Hello($scope, $http) {
    $http.get('greeting', {data: {name: name}}).
        success(function(data) {
            $scope.greeting = data;
        });

    $scope.update = function() {
        $http.get('greeting', {params: {name: $scope.name}}).
         success(function(data) {
             $scope.greeting = data;
         });
    }
}

- La función $http.get viene ejecutado cada vez que visitamos nuestra pagina index.html
- Esta función va a la dirección (http://localhost:8080/greeting?name=Juan) y así enviando al servidor el parámetro name
- La vuelta el servidor (el mensaje Greeting en la forma JSON) metemos en una variable greeting ($scope.greeting = data)
- La pagina web HTML de arriba recibe esta variable y extracta 2 parámetros: id y content

The ID is {{greeting.id}} 
The content is {{greeting.content}} 

Lanzaremos el cliente y iremos a http://localhost:8080/index.html:

Clicamos varias veces en el botón y veremos como aumenta nuestro id. En la segunda parte haremos una aplicación mas complicada que va obtenir información desde la base datos.