Toxina Virtual: Spring Tutorial parte II - Consumindo o Web Service Rest com Angularjs

Anteriormente vimos dois tópicos que visam a integração do Spring com Web Service Rest (no back-end) e com Angularjs (no front-end). Considerando que já sabemos como criar um Web Service com Spring e que faça um databind em XML/JSON para retornar um objeto para a camada view, conforme os links abaixo, Vamos então para o consumo do serviço.

http://toxinavirtual.blogspot.com.br/2016/07/databind-com-jackson-e-com-google-json.html

http://toxinavirtual.blogspot.com.br/2016/07/spring-tutorial-parte-i-injecao-de_25.html

Segundo o manual do Spring, temos um exemplo em que uma URL fornece um JSON. O serviço roda na URL abaixo:

http://rest-service.guides.spring.io/greeting

E devolve o seguinte JSON:

{"id":1,"content":"Hello, World!"}

Para criar o projeto no Eclipse, vamos novamente em File>>New>>Other>>Dynamic Web Service e vamos criar um projeto com o nome WSAngularjsRest com a opção de criar web.xml selecionada.

Clicando com o botão direito do mouse sobre o projeto Configure>>Convert to Maven Project e deverá aparecer o arquivo pom.xml.

Vamos adicionar no arquivo as dependências embaixo da tag </build>.

<properties>
<spring.version>4.2.1.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>javax.xml</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.1</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-server</artifactId>
<version>1.17.1</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-servlet</artifactId>
<version>1.17.1</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-json</artifactId>
<version>1.17.1</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
</dependencies>

Vamos criar o arquivo index.html dentro da pasta WebContent.

<!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
</html>

Repare que o arquivo importa uma biblioteca do Angularjs e importa também um arquivo hello.js que deverá conter o código com o objeto que será impresso na div ng-controller.

Dentro da mesma pasta vamos criar o arquivo hello.js.

function Hello($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.greeting = data;
});
}

Repare que existe uma solicitação GET para o Web Service Rest do manual do Spring. Embaixo o objeto é recebido em uma variável que será impresso no index.html.

Vamos agora configurar o arquivo web.xml com o arquivo de chamada.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>WSAngularjsRest</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<!-- . <welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>. -->
<servlet>
<servlet-name>jersey-serlvet</servlet-name>
<servlet-class>
com.sun.jersey.spi.container.servlet.ServletContainer
</servlet-class>
<init-param>
<param-name>com.sun.jersey.config.property.packages</param-name>
<param-value>ngdemo.rest</param-value>
</init-param>
<init-param>
<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>jersey-serlvet</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
</web-app>

Basta rodar o arquivo agora no Tomcat clicando no projeto com o direito Run as>>Tomcat8>>OK.

A página deverá exibir algo como:

Repare que a página retornou os dados do JSON em formato de um objeto numa única variável. Este objeto poderia ser qualquer objeto e poderia ser invocado por diferentes URL. Por exemplo ser fosse um carro ou dados de uma pessoa:

http://rest-service.guides.spring.io/carro

http://rest-service.guides.spring.io/pessoa

Referencias:

https://spring.io/guides/gs/consuming-rest-angularjs/

https://spring.io/guides/gs/spring-boot/

Toxina Virtual

terça-feira, 26 de julho de 2016

Spring Tutorial parte II - Consumindo o Web Service Rest com Angularjs

Nenhum comentário:

Postar um comentário