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

consume-spring-hateoas-angularjs-structure

HATEOAS REST Service:
+ 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

AngularJS:
+ 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 application.properties
– 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 application.properties 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:
http://localhost:8080/
consume-spring-hateoas-angularjs-request

– Fill customerID & press Get Customer button.
Customer information with Links and Order Information will appear:
consume-spring-hateoas-angularjs-response

III. Source Code

SpringBootAngularHATEOAS


Related Posts


Got Something To Say:

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

*