This tutorial explains the integration between Spring Data REST, GemFire and AngularJS frameworks. We are going to develop a REST service which returns the JSON response and that will be accessed by the AngularJS web page.

1. Tools Required

We’ve developed this tutorial by using the following tools:

• JDK 1.6.
• Tomcat 7.
• Maven 3.
• GemFire 7.0.1.
• AngularJS

2. Project Structure

Here is the project structure used for this tutorial.

3. Business Domain

Message is the persistence object used for storing the data in GemFire’s in-memory storage. We are using only this entity for this tutorial. If you look at the below code, the entity imports the org.springframework.data.gemfire.mapping.Region which is equivalent to the table in the relational database. This Region class used as the segment in in-memory and allocate the storage for the data.

Message.java

[code lang=”java”]
package net.javabeat.springdata.data;

import org.springframework.data.annotation.Id;
import org.springframework.data.annotation.PersistenceConstructor;
import org.springframework.data.gemfire.mapping.Region;

@Region("messages")
public class Message {
@Id
private String messageId;
private String message;

public Message() {
}

@PersistenceConstructor
public Message(String id, String message) {
this.messageId = id;
this.message = message;
}

public String getMessageId() {
return messageId;
}

public void setMessageId(String messageId) {
this.messageId = messageId;
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}
}
[/code]

4. Spring Data Repository

It’s the repositories that enable the CRUD operations against the business domain. In our previous tutorial I have explained the Spring Data and how the repositories used for the CRUD operations.

MessageReposirory.java

[code lang=”java”]
package net.javabeat.springdata.repo;

import net.javabeat.springdata.data.Message;

import org.springframework.data.repository.CrudRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;

@RepositoryRestResource(collectionResourceRel="messages",path="messages")
public interface MessageRepository extends CrudRepository<Message,Integer> {}
[/code]

5. Spring Bean

It’s a normal spring bean that used for filling a dummy data inside the GemFire platform.

GemFireBean.java

[code lang=”java”]
package net.javabeat.springdata.bean;

import net.javabeat.springdata.data.Message;
import net.javabeat.springdata.repo.MessageRepository;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class GemFireBean {

MessageRepository messageRepository;

public GemFireBean(){

}

public MessageRepository getMessageRepository() {
return messageRepository;
}

@Autowired
public void setMessageRepository(MessageRepository messageRepository) {
// Message repository has been set
this.messageRepository = messageRepository;

// Add some messages into GemFire for being seen
Message message = new Message();
message.setMessageId("1");
message.setMessage("Hello JavaBeat !");

messageRepository.save(message);

// Add
message = new Message();
message.setMessageId("2");
message.setMessage("Hello GemFire REST");
messageRepository.save(message);
System.out.println("Messages are filled");
}
}
[/code]

6. Spring Context Configurations

It’s the Spring XML configuration file, in which the spring beans, repositories and GemFire cache are defined.

SpringContext.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:gfe-data="http://www.springframework.org/schema/data/gemfire"
xmlns:gfe="http://www.springframework.org/schema/gemfire"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/data/gemfire http://www.springframework.org/schema/data/gemfire/spring-data-gemfire.xsd http://www.springframework.org/schema/gemfire http://www.springframework.org/schema/gemfire/spring-gemfire.xsd">
<!– Search for spring components –>
<context:component-scan base-package="net.javabeat"></context:component-scan>
<!– Declare GemFire Cache –>
<gfe:cache/>
<!– Local region for being used by the Message –>
<gfe:local-region id="messages" value-constraint="net.javabeat.springdata.data.Message"/>
<!– Search for GemFire repositories –>
<gfe-data:repositories base-package="net.javabeat.springdata.repo"/>
</beans>
[/code]

7. Maven Build

It’s the pom file that containing the needed libraries.

pom.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>net.javabeat.springdata</groupId>
<artifactId>SpringData-GemFire-REST</artifactId>
<version>1.0</version>
<packaging>war</packaging>

<name>Spring Data</name>

<dependencies>
<!– Spring Data GemFire Library –>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-gemfire</artifactId>
<version>1.3.4.RELEASE</version>
</dependency>
<!– GemFire Platform –>
<dependency>
<groupId>com.gemstone.gemfire</groupId>
<artifactId>gemfire</artifactId>
<version>7.0.1</version>
</dependency>
<!– Spring Data REST MVC –>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-rest-webmvc</artifactId>
<version>2.0.2.RELEASE</version>
</dependency>
<!– Google List API –>
<dependency>
<groupId>com.google.collections</groupId>
<artifactId>google-collections</artifactId>
<version>1.0</version>
</dependency>
<!– Required Libraries –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
<version>1.0.2.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>1.1.0.Final</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.0.1.Final</version>
</dependency>

</dependencies>

<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.2</version>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

<repositories>
<repository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>http://repo.spring.io/libs-snapshot</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
<repository>
<id>gemstone</id>
<url>http://dist.gemstone.com.s3.amazonaws.com/maven/release/</url>
</repository>
</repositories>

<pluginRepositories>
<pluginRepository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>http://repo.spring.io/libs-snapshot</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</project>
[/code]

8. Web Deployment Descriptor

It’s the web descriptor that used for application configuration against the JavaEE container. One important thing you need to care about it is the servlet of the Spring MVC REST that handle the requests that asked for GemFire repositories.

web.xml

[code lang=”xml”]
<?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" xmlns:web="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_2_5.xsd"
id="WebApp_ID" metadata-complete="true" version="2.5">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-config/SpringContext.xml</param-value>
</context-param>
<servlet>
<servlet-name>rest</servlet-name>
<servlet-class>org.springframework.data.rest.webmvc.RepositoryRestDispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>rest</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
[/code]

RepositoryRestDispatcherServlet is a spring mvc resource that works in conjunction with the Spring Data REST for exposing the REST resources. In the above section you have seen how to expose REST resources using the Spring Boot, in that you’ve used @import to import the RepositoryRestMvcConfiguration. If you’re going to use the Spring old fashion configuration XML file for exposing the Spring Data REST, you should use the RepositoryRestDispatcherServlet with its mapping as you’ve noted above for exporting the resources.

9. Expose GemFire Repositories Directly

This section explains how to access the REST services using the Google Dev HTTP. Just follow the below steps:

• From chrome browser open the Dev HTTP Client.
• Type your host followed by the port number followed with the web context for the deployed application which should results in the URL http://localhost:8080/SpringData-GemFire-REST-1.0.
• For consuming the message resources, you have to add the RepositoryRestDispactherServlet mapping URL which mentioned in the web.xml and it’s /rest/ which results in URL value like http://localhost:8080/SpringData-GemFire-REST-AngularJS-1.0./rest/
• Add the The path segment under which this resource is to be exported. that value was provided using the path property at the header of the MessageRepository in order to be exposing the messages resource like below.

As you’ve noted the messages resources prefixed with the rest word that mapped to the RepositoryRestDispatcherServlet.

10. Accessing GemFire REST Using AngularJS

AngularJS is a JavaScript Framework for building the web application most suited to mobile devices and responsi. It is fully extensible and works well with other libraries. For including the AngularJS library into your page, a JavaScript library url https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js should be added inside a script tag. This is Content Deliver Network (CDN) approach for using the AngularJS without downloading the libraries. This can be most suitable only for the development application, for the production you have to download the libraries.

In the below example, the AngualrJS library is imported into the header of the page for being used in the REST resources consumption.

index.html

[code lang=”xml”]
<html ng-app>
<head>
<title>JavaBeat Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="messages.js"></script>
</head>
<body>
<div style="width:50%">
<h2>JavaBeat Tutorial</h2>
<h2>GemFire + REST + AngularJS</h2>
<div ng-controller="fetch">
<h2>full json response:</h2>
<p>{{messages}}</p>
<h2>Messages:</h2>
<ul ng-repeat="message in messages">
<p>Message:</p>
<p>{{message.message}}</p>
<a href='{{message["_links"]["self"]["href"]}}’>Go To Page Addressed Message : {{message._links.self.href}}</a>
</ul>
</div>
</div>
</body>
</html>
[/code]

messages.js

[code lang=”java”]
function fetch($scope, $http) {
$http.get(‘http://localhost:8080//SpringData-GemFire-REST-1.0/rest/messages’).
success(function(data) {
$scope.messages = data["_embedded"]["messages"];
});
}
[/code]

11. Spring Data REST – GemFire – AngularJS Demo

11.Summary

GemFire is a platform for the in-memory persistent store, it’s mainly used for caching. This tutorial generated a war file has been deployed against Tomcat 7 and the GemFire repositories are accessed and their data is retrieved through an HTTP REST using the AngularJS.

AngularJS is a famous JavaScript framework that has the capability of reading, parsing and converting the parsed JSON response into object-based form. Parsed objects gets navigated using the dot operator as the example get involved. AngularJS can be integrated with the Spring Data REST. In this tutorial, you’ve developed a Spring Data REST application that get connected with the GemFire platform and the AngularJS is used in the presentation for displaying the messages that fetched.

Download Source Code

[wpdm_file id=106]