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


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

  1. build the angular project into a folder that you app.get into your node.js server, so that when you run the node server, the built angular app is opened, then just upload that to anywhere heroku etc

Got Something To Say:

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

*