How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

Показать описание

How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

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

II. Overview
For POST, PUT, DELETE data, We use Angular HTTP Client methods:

– post(url: string, body: any, options?: RequestOptionsArgs): Observable
– put(url: string, body: any, options?: RequestOptionsArgs): Observable
– delete(url: string, options?: RequestOptionsArgs): Observable

On SpringBoot Server side, we had 3 RequestMappings: @PostMapping, @PutMapping, @DeleteMapping

III. Practice
In the tutorial, we will re-use the sourcecode that we had done with the previous post. So you should check out it for more details:
– How to work with Angular Routing – Spring Boot + Angular 4

Step to do:

With Angular Client:
– Implement new CreateCustomerComponent
– Re-Implement CustomerDetailComponent
– Re-Implement App Routing Module
– Re-Implement AppComponent
– Add new functions for DataService: CREATE – UPDATE – DELETE

With SpringBoot Service:
– Implement new Rest APIs: POST – UPDATE – DELETE

Deployment:
– Integrate Angular App and SpringBoot Server
– Run & Check results.