Mongoose CRUD MongoDB – Angular 6 HttpClient Get/Post/Put/Delete – Node.js/Express RestAPIs

Mongoose is a MongoDB object modeling tool that provides a schema-based solution to model data. In the tutorial, we will show how to build get/post/put/delete requests from Angular 6 Client to MongoDB with NodeJs/Express RestAPIs using Mongoose ODM.

Related posts:
Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4
Crud RestAPIs with NodeJS/Express, MongoDB using Mongoose

Technologies

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

Overview

Goal

We create 2 projects:

– Angular Client Project:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + angular-project-structure

– Node.js RestAPIs project:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + nodejs-project-structure

UserCase

Start Node.js server -> Logs:

-> MongoDB’s documents:

– Angular client retrieve all customers from Node.js RestAPIs:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + retrieves-all-customers

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

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + update-customers

-> result:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + update-results

– Delete ‘Peter’ customer:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + delete-customers

– Add a new customer:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + add-customers

-> result:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + add-customers-results

– Check final customer’s list:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + final-check-results

-> MongoDB’s documents:

Node.js/Express 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

Express Mongoose RestAPIs
Setting up NodeJs/Express project

Following the guide to create a NodeJS/Express project.

Install Express, Mongoose, Body-Parser, and Cors:

– Body-Parser -> Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
– 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.
– Cors is 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.
– Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL …

-> package.json file:

Mongoose Schema

– Create file ‘./app/models/customer.model.js’ ->

Configure MongoDB’s URL

In the root folder, create a file ‘app/config/mongodb.config.js’ as below content ->

Implement CRUD APIs

Routes ->

In the root folder, create a file ‘app/routes/customer.routes.js’ as below content ->

Controllers

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 ->

Server.js

‘server.js’ ->

Angular 6 Client
Data 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-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + retrieves-all-customers

– Implement CustomerComponent class customer.component.ts :

– Implement the template customer.component.html :

Customer Detail Component

Customer Detail ->

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + update-customers

-> results:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + update-results

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + delete-customers

– 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-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + add-customers

-> result:

angular-6-nodejs-rest-apis-crud-post-get-put-delete-mongodb-using-mongoose + add-customers-results

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

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

SourceCode

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

By JavaSampleApproach | July 9, 2018.

Related Posts


1 thought on “Mongoose CRUD MongoDB – Angular 6 HttpClient Get/Post/Put/Delete – Node.js/Express RestAPIs”

  1. EssayOneDay provides students with professionally written essays, vsetcio.32essay.com/my-handbook/business-planmaker-professional-12-reviews.html investigate papers, with respect to papers, reviews, theses, dissertations and more. Straight away you run auspices of EssayOneDay also in behalf of your ms writing needs, you won’t desideratum to adjudicate any other advantage rantee first-class breeze scolding vsetcio.32essay.com/my-handbook/resume-for-entry-level-it-position.html and 100% plagiarism free papers.

Got Something To Say:

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

*