Consume Spring HATEOAS Rest API using AngularJS example | Spring Boot

In this tutorial, JavaSampleApproach shows you a Spring Boot example that consumes Spring HATEOAS Rest API using AngularJS.

Related Post:
How to start Spring HATEOAS RestAPI with Spring Boot
Consume Spring HATEOAS Rest API using JQuery Ajax example | Spring Boot
How to integrate Http Angularjs with Spring MVC | Spring Boot

I. Overview

1. Goal

We’ll build a Spring Boot Application in that:
HATEOAS REST Service provides interface for interacting with Customer Database.
– Client calls API by using AngularJS, retrieves and displays:
+ Customer Data (Id, Name) with HATEOAS Links by CustomerId.
+ Order Data for Customer above.

2. Technology

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE

3. Project Structure


+ Customer class extends Spring HATEOAS ResourceSupport.
+ CustomerRepository provides repository methods and custom finder methods for CustomerController to interact with Customer database.
+ CustomerController is a REST Controller which has request mapping methods for RESTful requests such as:
/{id}, /{id}/orders, /getcustomer/{id}
+ Response class defines structure for returned data of HTTP GET.

For more details about creating HATEOAS REST Service, please visit:
How to start Spring HATEOAS RestAPI with Spring Boot

+ home.jsp contains elements for GET request and display results.
+ controller() and $http.get() GET methods in get.js Javascript file.
+ WebController maps url to home.jsp page.

An example that uses AngularJS HTTP POST/GET:
How to integrate Http Angularjs with Spring MVC | Spring Boot

– Configuration for JSP page and static resources in
– Dependencies for Spring HATEOAS, WEB MVC, Tomcat in pom.xml

To know how to make application work with JSP page and static resources, please visit:
How to start with JSP page and static resource in Spring Boot

II. Practice

1. Create Spring Boot project

– Using Spring Tool Suite/Eclipse to create Project (WAR packaging), ServletInitializer and SpringBootApplication class will be created automatically.
– Add Dependencies to pom.xml file:

2. Create Data Model Classes

3. Create Message Model Class

4. Create Repository Class

5. Create Controller Classes

6. Configuration for JSP Page and Static Resources

Add these lines to file:

7. Add JSP Page and Javascript File

Under src/main/webapp/WEB-INF/jsps folder, add:

For HTTP GET, we use this method:

Under src/main/webapp/js folder, add:

8. Run & Check Result

– Config maven build:
clean install
– Run project with mode Spring Boot App.
– Open Browser, enter URL:

– Fill customerID & press Get Customer button.
Customer information with Links and Order Information will appear:

III. Source Code


By JavaSampleApproach | June 16, 2017.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *