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:
Lanzalo clicando derecho en tu proyecto y seleccionando "Run As->Java Application" y vas a ver lo siguiente: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
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:
Hello AngularJS 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 {{
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.
