Mean Stack Angular 6 Crud Application Tutorial

Sunday, January 5, 2020

Mean Stack Angular 6 Crud Application Tutorial

 The term Mean Stack refers to a collection of Javascript based technologies used to develop web applications. So the Mean Stack is basically stands for MongoDb, Express JS, Angular JS and Node JS.
Mean Stack Application
Mean Stack Application

1. Overview of Mean Stack

Mongo DB : - 

   Mongo DB is a schema-less No SQL database system. Mongo DB saves data in binary JSON format which makes it easier to pass the data between client and server.

So If you have not watch my Mongo DB tutorial and blog please visit the below details.

My Youtube Tutorial - 

Angular JS : - 

   Angular JS is JavaScript framework developed by Google. It Provides some awesome features like 2 way binding, Routing, Sharing data between 2 components, Subscriber, Rxjs, Observable e.t.c. In short I can say its a It's a complete solutions for rapid and Awesome frontend development.

Node JS : -
  Node JS is a server side javascript execution environment. It's a platform built on Google Chrome's V8 Javscript runtime. It helps to build highly scalable and concurrent application rapidly.

So If you have not watch my Node JS tutorial and blog please visit the below details.

My Youtube Tutorial - 


 Express JS : -

  Express is lightweight framework used to build web application in Node. It provides a number of robust features for building single and multi page web application. Express is inspired by the popular Ruby framework. Basically we will be using express in Node JS as a package manager.

So If you have not watch my blog and youtube tutorial Node JS with express please visit the below link.

My Youtube Tutorial - 

2. What is CRUD Stands for ?

Crud Stands for Create, Read, Update & Delete.

CRUD Stands for
CRUD Stands For

And we will be going to build an application which used to deal with Create, Read, Update and Delete operation using Mean Stack.

3. Architecture of Mean Stack Application ?

      In the below diagram, this is the architecture of our Mean Stack Application that we are going to build it. In the Front-End part, I am using Angular 6 and whatever user interaction 

Mean Stack Application Achitecture
Mean Stack Application Architecture

got happened like create, read, write and delete, Its is happening from Node JS. So here Node JS act as a mediator, which helps to talk to our database mongo DB and get back the data to the frontend.

More details please visit the video - 

4. Building Node JS Backend Application -

Step - 1 : We need to generate a package.json, For generating a package.json first we have to create a folder. Then we have to follow the below steps - 

1. mkdir meanstack_backend
2. npm init     ---->    Press enter, enter until its asked for a prompt yes/no
3. type yes then enter
4. npm install body-parser cors express mongoose nodemon --save

Step - 2 : Once we have done that,  we need to create index.js file. 


const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const mongoose = require('./db.js');
const personController = require('./controllers/personController.js');

var app = express();
app.use(cors({ origin : 'http://localhost:4200' }));

//Application testing API's

app.get('/app/testing', (req, res) => {
        "message" : "App is working fine",
        "status" : 200

app.listen(3000, () => console.log('Server connected to port : 3000'));

app.use('/person', personController)


const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/firstdb', { useNewUrlParser:true, useUnifiedTopology: true }, (err) => {
    if(!err) {
       console.log('MongoDB connected ....')
    } else {
       console.log('Error in DB connection:' + JSON.stringify(err, undefined, 2) ) ;


module.exports = mongoose


const mongoose = require('mongoose');

var Person = mongoose.model('Person', {
    name: {type : String},
    mail: {type: String},
    class: {type: Number}

module.exports = {Person}


const express = require('express');
var router = express.Router();

var { Person } = require('../model/person.js');
var ObjectId = require('mongoose').Types.ObjectId

//Get user data

router.get('/', (req, res) => {
   Person.find((err. doc) => {
      if(!err) { res.send(doc) }
      else { console.log('Error in retrieving persons' + JSON.stringify(err, undefined, 2)) ; }

//Insert user data'/', (req, res) => {
   var per = new Person({
      name :,
      mail : req.body.mail,
      class: req.body.class
  Person.findOne({'mail':req.body.mail}, (err, docs) => {
      if(!docs) {
 , doc) => {
                 if(!err) { 
                     res.status(200).send({ auth: true, doc, message: '1 documents inserted'});
                 else { console.log('Error in user inserting data' + JSON.stringify(err, undefined, 2)) }
      else {
         console.log("User data already exists:"+req.body.mail);
              message: 'User data already exists'+req.body.mail

//Update user data

router.put('/:id', (req, res) => {
         return res.status(400).send('No Record with given id: $(');
     var per = {
         $set : {
             name :,
             mail: req.body.mail,
             class: req.body.class
     Person.findOneAndUpdate({mail: req.body.mail}, per, {new: true, useFindAndModify: false}, (err, doc) => {
       if(err) {
           console.log("Something wrong when updating data!");
       } else if(doc) {
               auth: true,
               message: "1 document updated"
       } else {
               message: "Resource not found! Please register first"

//Delete the User data

router.delete('/:id', (req, res) => {
        return res.status(400).send('No record with given id: $(');

   Person.findByIdAndRemove(, {new: true, userFindAndModify:false}, (err,docs) => {
       if(!err) { res.send(docs); }
       else { console.log('Error in person data updation' + JSON.stringify(err, undefined, 2)); }

module.exports = router

You can also clone the project - 

More details please watch my below video - 

5. Building Frontend with Angular 6+

In the frontend part I am using Angular 6+. You can upgrade it as well as per your need. And the design I am using Angular Material. 

Clone the projects from below links - 

More details please watch my videos - 

Thank you guyz.

Please don't forgot to subscribe my youtube channel.


Pooja Sharma said...

The information you have provided in the blog is very useful. Do share more updates.
AngularJS Training in Chennai
AngularJS Online Training
AngularJS Training in Coimbatore

Ishita Jack said...

Excellent data with lots of information. I have bookmarked this page for my future reference. Do share more updates.
Full Stack Developer Course in Chennai
Full Stack Developer Online Course
Full Stack Developer course near me

Cpa Marketing said...

Thanks for the marvelous post! ✅ I really enjoyed reading it, you might be a great author. I will certainly bookmark your blog and definitely will come back sometime soon.
I want to encourage you to continue your great writing.
Apachis online webhosting company Internet Company

Deepa Psikologi said...

MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. Because all components of the MEAN stack support programs that are written in JavaScript, MEAN applications can be written in one language for both server-side and client-side execution environments. best course to learn MEAN stack

Rosy S said...

Angularjs Training in Hyderabad
Angularjs Training in Gurgaon
Angularjs Training in Delhi

x8rvs7hvkn said...

With a massive one-cubic-meter build quantity, the quick and reliable ONE brings your designs to life in full scale. Get assist, create support tickets and get speedy assistance in cooperation with BigRep’s local Toilet Plungers partners. Download the settings information, printers or software guides and far more. A high-capacity filament dry cabinet for the protected storage of 3D printing materials. Designed to guard industrial workflows by stopping materials degradation that results in misplaced time and damages, the BigRep SHIELD secures filament in best circumstances for both brief and long-term storage.

u3wkupkv3q said...

When you play Roulette, there are a number of} other ways find a way to|you probably can} wager. Much of the tablespace is covered with a large grid that outlines the wheel numbers. This system is one that is designed in order that when the participant has received over a 3rd 온라인 카지노 of their bets (less than the expected 18/38), they may win. Whereas the martingale will trigger damage within the occasion of a protracted sequence of successive losses, the Labouchère system will trigger wager size to develop quickly even where a losing sequence is broken by wins. This occurs because of|as a end result of} as the participant loses, the typical wager size within the line increases. The pockets of the roulette wheel are numbered from zero to 36.