Mean Stack Angular 6 Crud Application Tutorial

Mean Stack Angular 6 Crud Application Tutorial

   January 05, 2020       Codez Tech

---

 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

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 Blog - https://www.codeztech.com/2019/12/mongodb-complete-guide-about-mongodb.html

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 Blog - https://www.codeztech.com/2019/12/nodejs-complete-guide-to-build-restful.html

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 Blog - https://www.codeztech.com/2019/12/nodejs-complete-guide-to-build-restful.html

My Youtube Tutorial - 

2. What is CRUD Stands for ?

Crud Stands for Create, Read, Update & Delete.

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

index.js

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(bodyParser.json());

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

//Application testing API's

app.get('/app/testing', (req, res) => {

     res.send({

        "message" : "App is working fine",

        "status" : 200

     })

})

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

app.use('/person', personController)

db.js

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

model/person.js

const mongoose = require('mongoose');

var Person = mongoose.model('Person', {

    name: {type : String},

    mail: {type: String},

    class: {type: Number}

})

module.exports = {Person}

controllers/personController.js

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

router.post('/', (req, res) => {

   var per = new Person({

      name : req.body.name,

      mail : req.body.mail,

      class: req.body.class

  })

  Person.findOne({'mail':req.body.mail}, (err, docs) => {

      if(!docs) {

           per.save((err, 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);

         res.status(400).send({

              message: 'User data already exists'+req.body.mail

         })

      }

  })

})

//Update user data

router.put('/:id', (req, res) => {

     if(!ObjectId.isValid(req.params.id))

         return res.status(400).send('No Record with given id: $(req.params.id)');

     

     var per = {

         $set : {

             name : req.body.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) {

           res.status(200).send({

               auth: true,

               message: "1 document updated"

           })

       } else {

             res.status(404).send({

               message: "Resource not found! Please register first"

           })

       }

       console.log(doc);

     })

})

//Delete the User data

router.delete('/:id', (req, res) => {

    if(!ObjectId.isValid(req.params.id))

        return res.status(400).send('No record with given id: $(req.params.id)');

   Person.findByIdAndRemove(req.params.id, {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 - 

git clone https://atique12@bitbucket.org/atique12/mongocrud_application_back_end.git 

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 - 

git clone https://atique12@bitbucket.org/atique12/mongocrud_application_frnt_end.git

More details please watch my videos - 

Thank you guyz.

Please don't forgot to subscribe my youtube channel.

https://www.youtube.com/channel/UCb7Rfd7882_2_MGfYWZkW_A?sub_confirmation=1