Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + 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 Node.js 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

  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • Nodejs – v8.11.3

Overview

Goal

We create 2 projects:

– Angular Client Project:

angular-6-http-client-node.js-rest-apis-post-get-put-delete +angular-project-structure

– Node.js RestAPIs project:

angular-6-http-client-node.js-rest-apis-post-get-put-delete + nodejs-restapi-project-structure

UserCase

– Retrieve all customers from Node.js RestAPIs:

angular-6-http-client-node.js-rest-apis-post-get-put-delete + retrieve-all-datas

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

angular-6-http-client-get-post-put-delete-reques-to-nodejs-restapi-upadate-joe-to-robert-angular-http-client-update

-> result:

angular-6-http-client-get-post-put-delete-request-to-nodejs-restapi-press-update-button

– Delete ‘Peter’ customer:

angular-6-http-client-get-post-put-delete-request-nodejs-restapi-angular-http-client-delete

– Add a new customer:

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

-> result:

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

– Check final customer’s list:

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

Node.js RestAPIs

Node.js exposes 5 RestAPIs as below:

  • router.post(‘/api/customers’, customers.create);
  • router.get(‘/api/customers’, customers.findAll);
  • router.get(‘/api/customers/:id’, customers.findOne);
  • router.put(‘/api/customers’, customers.update);
  • router.delete(‘/api/customers/:id’, customers.delete);

– 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 Node.js RestAPIs:

Practice

Node.js RestAPIs
Setup Node.js/Express project

Create application directory:

Use the npm init to create ‘package.json’ file:

-> Check content of ‘package.json’ file:

We need express, body-parse and cors modules.
– Express is one of the most popular web frameworks for NodeJs which is built on top of Node.js http module, and adds support for routing, middleware, view system etc.
– Body-parser: parses/extract the body of an incoming HTTP request.
– Cors: a mechanism that uses HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

-> Installing them as commandline npm install express body-parser cors--save :

angular-6-http-client-node.js-rest-apis-post-get-put-delete + install-expres-body-parse-cors-package

-> see ‘package.json’ file:

Implement Node.js/Express RestAPIs

– In root folder ‘nodejs-restapi’, create a ‘server.js’ file:

Implement Express Application ->

In root folder ‘nodejs-restapi’, create a router folder ‘/app/routes’. Then create a file ‘/app/routes/customer.routes.js’ for routing requests ‘GET/POST/DELETE/UPDATE’:

In root folder ‘nodejs-restapi’, create a controller folder ‘/app/controllers’. Then create a file ‘/app/controllers/customer.controller.js’ that contains methods for executing above URL requests:

Angular 6 Client

– 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-nodejs-restapi-retrieve-all-customer-angular-http-client-get-request-1

– 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-nodejs-restapi-customer-details

-> results:

angular-6-http-client-get-post-put-delete-request-nodejs-restapi-press-update-button-1

angular-6-http-client-get-post-put-delete-request-nodejs-restapi-angular-http-client-delete-1

– 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-nodejs-restapi-angular-http-client-post-a-customer-1

-> result:

angular-6-http-client-get-post-put-delete-request-nodejs-restapi-angular-http-post-a-customer-1

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

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

SourceCode

Angular-6-Http-Client
Node.js-RestAPIs

By grokonez | July 1, 2018.



Related Posts


2 thoughts on “Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4”

Got Something To Say:

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

*