Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4

Angular provides the HttpClient in @angular/common/http for front-end applications communicate with backend services. In the tutorial, we show how to build an Angular application that uses the HttpClient to make get/post/put/delete requests with Observable apis to SpringBoot RestAPIs.

Related posts:
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Technologies

  • Java 1.8
  • Maven 3.3.9
  • Spring Tool Suite – Version 3.9.4.RELEASE
  • Spring Boot: 2.0.3.RELEASE
  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0

Overview

Goals

We create 2 projects:

– Angular Client Project:

angular-6-http-client-get-post-put-delete-request + angular-6-project-structure

– SpringBoot Server Project:

angular-6-http-client-get-post-put-delete-request + spring-boot-rest-apis

Overview

springboot-rest-apis +angular-6-http-client +angular-http-service-architecture

UserCase

– Retrieve all customers from SpringBoot server:

angular-6-http-client-get-post-put-delete-request + retrieve-all-customer-angular-http-client-get-request

– Update a customer -> Change the firstname of first customer: ‘Joe’ to ‘Robert’.

angular-6-http-client-get-post-put-delete-request + upadate-joe-to-robert-angular-http-client-update

-> result:

angular-6-http-client-get-post-put-delete-request + press-update-button

– Delete ‘Peter’ customer:

angular-6-http-client-get-post-put-delete-request + angular-http-client-delete

– Add a new customer:

angular-6-http-client-get-post-put-delete-request + angular-http-client-post-a-customer

-> result:

angular-6-http-client-get-post-put-delete-request + angular-http-post-a-customer

– Check final customer’s list:

angular-6-http-client-get-post-put-delete-request + final-check

SpringBoot RestAPIs

SpringBoot Services exposes 5 RestAPIs as below:

  • @GetMapping(value="/api/customers") public List getAll()
  • @GetMapping(value="/api/customers/{id}") public Customer getCustomer(@PathVariable Long id)
  • @PostMapping(value="/api/customers") public Customer postCustomer(@RequestBody Customer customer)
  • @DeleteMapping(value="/api/customers/{id}") public void deleteCustomer(@PathVariable Long id)
  • @PutMapping(value="/api/customers") public void putCustomer(@RequestBody Customer customer)

– Configure cross-origin for Angular-Client which running at port: 4200.

Angular 6 HttpClient

Use Angular HttpClient APIs to do Get/Post/Put/Delete requests to SpringBoot servers:

Practice

SpringBoot RestAPIs

We create SpringBoot project with below dependency:

Data Model

– Create Customer data model:

Rest APIs

Implement Rest APIs for GET/POST/PUT/DELETE customers:

Angular 6 Client
Setup Angular Project

– Create Angular project:

– Generate:

  • Customer Class
  • Customer Service
  • Customer Components
  • App Routing Module

-> Details:

– Install Bootstrap 4:

-> Configure installed Bootstrap & JQuery in angular.json file:

Data Model

Implement Customer model customer.ts :

Configure AppModule

In the developed application, we use:

  • Angular Forms -> for building form
  • HttpClient -> for http Get/Post/Put/Delete requests
  • AppRouting -> for app routing

-> Modify AppModule app.module.ts:

HttpClient DataService

Implement CustomerService customer.service.ts with HttpClient for Get/Post/Put/Delete:

Angular Router

Implement App-Routing module app-routing.module.ts:

Router Outlet & Router Links

-> Questions:

  • How to show Componenets with Angular Routers? -> Solution: using Router Outlet
  • How to handle the routing that comes from user’s actions? (like clicks on anchor tag) -> Solution: using Router Link

-> We can achieve above functions by using Angular’s router-outlet and routerLink.

Modify the template file app.component.html of AppComponenet component as below:

Customer Component

Customer Component ->

angular-6-http-client-get-post-put-delete-request + retrieve-all-customer-angular-http-client-get-request

– Implement CustomerComponent class customer.component.ts:

– Implement the template customer.component.html :

Customer Detail Component

Customer Detail ->

angular-6-http-client-get-post-put-delete-request + customer-details

-> results:

angular-6-http-client-get-post-put-delete-request + press-update-button

angular-6-http-client-get-post-put-delete-request + angular-http-client-delete

– Implement CustomerDetails class customer-details.component.ts:

– Implement CustomerDetailsComponent template customer-details.component.html :

We can change the value of ng-valid & ng-invalid for more visual feedback,
-> Create ./assets/forms.css file:

Add ./assets/forms.css file to index.html :

Add-Customer Component

AddCustomer Component ->

angular-6-http-client-get-post-put-delete-request + angular-http-client-post-a-customer

-> result:

angular-6-http-client-get-post-put-delete-request + angular-http-post-a-customer

– Implement AddCustomerComponent class add-customer.component.ts:

– Implement the template add-customer.component.html:

SourceCode

Angular-6-Http-Client
SpringBootRestAPIs

By JavaSampleApproach | June 28, 2018.

Related Posts


Got Something To Say:

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

*