How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4

In the previous post, we had introduced Angular Service (Angular 4 Service) but we did it with a mock data solution. So in the tutorial, JavaSampleApproach will show you how to use Angular HTTP Client inside Angular Service to fetch data from SpringBoot RestApi.

Related articles:
How to develop with Angular Service (Angular 4 Service)
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite
How to work with Angular Routing – Spring Boot + Angular 4
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server
Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server


I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4
– Node.js

II. Angular Http Client

HTTP Client is a solution to exchange data with a remote server. Angular Http is an injectable class, which has a set of request methods:

– request(): to performs any type of http request.
– get(): performs a request with get http method.
– post(): performs a request with post http method.
– put(): performs a request with put http method.
– delete(): performs a request with delete http method.
– patch(): performs a request with patch http method.
– head(): performs a request with head http method.
– options(): to performs a request with ‘options’ http method.

angular http service architecture

In the tutorial, we will start with http get() method to fetch data from SpringBoot RestAPI.

III. Practice

Step to do:
– Create an Angular Client
– Create a SpringBoot RestApi Service
– Integrate Angular App and SpringBoot Server
– Run & Check results

1. Create an Angular Client
1.1 Create Angular project

In the tutorial, We continue to work on the project that we had done in the previous post. So please check out sourcecode to continue:
How to develop with Angular Service (Angular 4 Service)

1.2 Provide Http service

In the previous post, we had used a mock data for simulation. But now it’s ready to delete mock-customers.ts to come with a new solution -> fetch data from SpringBoot Service by HTTP client.
For using Http module, need register it on /angular4client/src/app/app.module.ts file:

-> HTTP client is ready to use.

1.3 Modify DataService with HttpClient

– Firstly, need inject Http:

Then implement getCustomers() function:

See the signature of http get() function:

-> get() returns an Observable object. We can change it to Promise to make an async service by simply using: .toPromise() function.

response object is a string with json form, so we should transform it to JSON object by using response.json().

.catch() is used to handle errors when processing, and we should always implement it to handle exceptions.

DataService’s full sourcecode:

2. Create a SpringBoot RestApi Service

– Using SpringToolSuite, create a SpringBoot project. Then add web dependency:

– Create a Customer model:

– Create a simple RestController with 2 RequestMappings:

3. Integrate Angular App and SpringBoot Server

Angular4-Client and SpringBoot server work independently on ports 8080 and 4200.
Goal of below integration: the client at 4200 will proxy any /api requests to the server.

Step to do:
– Create a file proxy.conf.json under project angular4client folder with content:

– Edit package.json file for “start” script:

>>> More details at: How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

4. Run & Check results

Build and Run the SpringBoot project with commandlines: mvn clean install and mvn spring-boot:run
Run the Angular App with command: npm start
Make a request: http://localhost:4200/, results:

– Response’s data:

angular http client - response's data

– Customer List:

angular http client - customer list

– Customer Details:

angular http client - customer details

IV. Sourcecode

AngularHttpClient
SpringBootAngularHttpGet


Related Posts


3 thoughts on “How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4”

    1. To Deploy SpringBoot server with Angular4 client
      Firstly, You build angularclient with command ng build -prod
      We have 2 approaches to deployment SpringBoot server with angular4 client:
      –> Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
      –> Using Maven plugin maven-resources-plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.

      See details at: http://javasampleapproach.com/spring-framework/spring-boot/integrate-angular4-springboot-web-app-springtoolsuite

Got Something To Say:

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

*