In this article, we’ll learn to create basic CRUD application using Angular 5, Nodejs, Express and MongoDB NoSQL database.

Introduction

We will create a demo project using Angular CLI for front-end, Node.js and Express for middle-end, and MongoDB for the back-end. In this article, we start from the beginning.

Requirement

If you already installed Angular CLI, globally check the version with this command ng -v

Download links

Let’s start and create demo application.

Step 1

Create a new folder with any name, let's say, AngularCRUD. After the folder is created, then press ctrl+shift Right click for opening the command window here.

Step 2

After the folder opens in the command prompt, run this command for Angular CLI to install in our folder.

npm install -g @angular/cli

Step 3

If installed successfully, then run this command for creating a new application. Let's again set the project name as AngularCRUD.

ng new projectname

Step 4

When the ng new command is created and installed successfully, change your directory

cd AngularCRUD.

Step 5

Now, we open our project in Visual Studio code with code command like this.



Now, we can see VSCode opened automatically.



Step 6

Now run your application by using this command -
ng serve - o
Here, -o stands for opening application in default browser.


Step 7

Now, let us install Express and Mongoose body parser using this command.
  • npm install express --save
  • npm install mongoose -- save
  • npm install body-parser --save

Step 8

After installing the above three packages, create a new file, server.js.

  1. var express = require('express');
  2. var path = require("path");
  3. var bodyParser = require('body-parser');
  4. var mongo = require("mongoose");
  6. var db = mongo.connect("mongodb://localhost:27017/AngularCRUD", function(err, response){
  7. if(err){ console.log( err); }
  8. else{ console.log('Connected to ' + db, ' + ', response); }
  9. });
  12. var app = express()
  13. app.use(bodyParser());
  14. app.use(bodyParser.json({limit:'5mb'}));
  15. app.use(bodyParser.urlencoded({extended:true}));
  18. app.use(function (req, res, next) {
  19. res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  20. res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  21. res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  22. res.setHeader('Access-Control-Allow-Credentials', true);
  23. next();
  24. });
  26. var Schema = mongo.Schema;
  28. var UsersSchema = new Schema({
  29. name: { type: String },
  30. address: { type: String },
  31. },{ versionKey: false });
  34. var model = mongo.model('users', UsersSchema, 'users');
  36. app.post("/api/SaveUser",function(req,res){
  37. var mod = new model(req.body);
  38. if(req.body.mode =="Save")
  39. {
  40. mod.save(function(err,data){
  41. if(err){
  42. res.send(err);
  43. }
  44. else{
  45. res.send({data:"Record has been Inserted..!!"});
  46. }
  47. });
  48. }
  49. else
  50. {
  51. model.findByIdAndUpdate(req.body.id, { name: req.body.name, address: req.body.address},
  52. function(err,data) {
  53. if (err) {
  54. res.send(err);
  55. }
  56. else{
  57. res.send({data:"Record has been Updated..!!"});
  58. }
  59. });
  62. }
  63. })
  65. app.post("/api/deleteUser",function(req,res){
  66. model.remove({ _id: req.body.id }, function(err) {
  67. if(err){
  68. res.send(err);
  69. }
  70. else{
  71. res.send({data:"Record has been Deleted..!!"});
  72. }
  73. });
  74. })
  78. app.get("/api/getUser",function(req,res){
  79. model.find({},function(err,data){
  80. if(err){
  81. res.send(err);
  82. }
  83. else{
  84. res.send(data);
  85. }
  86. });
  87. })
  90. app.listen(8080, function () {
  92. console.log('Example app listening on port 8080!')
  93. })

Step 9

Let us open the project folder in other command prompt and run the node server.js on port 8080.

Setp 10

Create a new Angular Service for common AJAX API calling. Use thie commond

ng g s common –spec=false


Step 11

Write the following code in common.service.ts for API.
  1. import { Injectable } from '@angular/core';
  2. import {Http,Response, Headers, RequestOptions } from '@angular/http';
  4. import { Observable } from 'rxjs/Observable';
  5. import 'rxjs/add/operator/map';
  6. import 'rxjs/add/operator/do';
  8. @Injectable()
  9. export class CommonService {
  11. constructor(private http: Http) { }
  13. saveUser(user){
  14. return this.http.post('http://localhost:8080/api/SaveUser/', user)
  15. .map((response: Response) =>response.json())
  16. }
  18. GetUser(){
  19. return this.http.get('http://localhost:8080/api/getUser/')
  20. .map((response: Response) => response.json())
  21. }
  22. deleteUser(id){
  23. return this.http.post('http://localhost:8080/api/deleteUser/',{'id': id})
  24. .map((response: Response) =>response.json())
  25. }
  27. }
Step 12

Now, write the View code in app.module.ts file.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  4. import { HttpModule } from '@angular/http';
  5. import { FormsModule } from '@angular/forms';
  7. import { AppComponent } from './app.component';
  9. import {CommonService} from './common.service';
  12. @NgModule({
  13. declarations: [
  14. AppComponent
  15. ],
  16. imports: [
  17. BrowserModule,HttpModule,FormsModule,
  18. ],
  19. providers: [CommonService],
  20. bootstrap: [AppComponent]
  21. })
  22. export class AppModule { }
Step 13

Code for app.component.html.
  1. <form #userForm="ngForm" (ngSubmit)="onSave(userForm.value)" novalidate>
  2. <p>Is "myForm" valid? {{userForm.valid}}</p>
  3. <table border='1'>
  4. <tr>
  5. <td>name</td>
  6. <td>
  7. <input name="id" type="hidden" [(ngModel)]="id" />
  8. <input name="name" type="text" required [(ngModel)]="name" />
  10. </td>
  11. </tr>
  13. <tr>
  14. <td>address</td>
  15. <td> <input name="address" required type="text" [(ngModel)]="address" /></td>
  16. </tr>
  17. <tr>
  18. <td colspan="2">
  19. <input type="submit" value="{{valbutton}}" />
  20. </td>
  21. </tr>
  22. </table>
  23. </form>
  25. <table border='1'>
  27. <tr>
  28. <td>Id</td>
  29. <td>Name</td>
  30. <td>Address</td>
  31. <td>Edit</td>
  32. <td>Delete</td>
  33. </tr>
  34. <tr *ngFor="let kk of Repdata;let ind = index">
  36. <td>{{ind + 1}}</td>
  37. <td>{{kk.name}}</td>
  38. <td>{{kk.address}}</td>
  39. <td><a (click)="edit(kk)" style="color:blueviolet">Edit</a></td>
  40. <td><a (click)="delete(kk._id)" style="color:blueviolet">Delete</a> </td>
  41. </tr>
  42. </table>
Step 14

Write this code in app.component.ts and remove the existing code from this file.
  2. import { Component, OnInit } from '@angular/core';
  3. import {FormGroup,FormControl,Validators,FormsModule, } from '@angular/forms';
  4. import {CommonService} from './common.service';
  6. import {Http,Response, Headers, RequestOptions } from '@angular/http';
  8. @Component({
  9. selector: 'app-root',
  10. templateUrl: './app.component.html',
  11. styleUrls: ['./app.component.css']
  12. })
  13. export class AppComponent {
  16. constructor(private newService :CommonService,) { }
  17. Repdata;
  18. valbutton ="Save";
  21. ngOnInit() {
  22. this.newService.GetUser().subscribe(data => this.Repdata = data)
  23. }
  25. onSave = function(user,isValid: boolean) {
  26. user.mode= this.valbutton;
  27. this.newService.saveUser(user)
  28. .subscribe(data => { alert(data.data);
  30. this.ngOnInit();
  31. }
  32. , error => this.errorMessage = error )
  34. }
  35. edit = function(kk) {
  36. this.id = kk._id;
  37. this.name= kk.name;
  38. this.address= kk.address;
  39. this.valbutton ="Update";
  40. }
  42. delete = function(id) {
  43. this.newService.deleteUser(id)
  44. .subscribe(data => { alert(data.data) ; this.ngOnInit();}, error => this.errorMessage = error )
  45. }
  47. }
We are almost done for performing select, insert, update, delete operation. Now, let us run two servers. The first one is Angular application with command ng server-o and the second one is to open node.js server.
We seen the output on borwser port 4200.

Summary

In this article, we learned how to create CRUD application with Angular 5 and node. I hope you enjoyed this article. If you have any query related to this code, please comment in the comments section.