This tutorial will teach you how to make Crud Application using Node JS with Angular JS Frontend application and Mongo DB Database using Api access Crudapplication.
First Step What you have to do is you to divide the Front-End and Back-End.
Front-End – Angular JS
BackEnd – Node JS
Create the folder myprojects. inside the folder Frond end project you maintaining with the separate folder.
Backend project you maintaining with the separate folder.
Install Node JS
Create a new Project type the command on the command prompt.
Type the Command on Console.
1 | npm init |
and create your project. After project has been created you see the package.json file.
Then open the project in to the VS Code Editor by typing the following command
1 | code . |
after open up the project in to the vscode editor
Install the Express Server as back end server
1 | npm i express |
Install the mongoDB as database
1 | npm i express |
we have created the datbase on mongoDB Compass which name est.
attached the db connection below.
server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var express = require('express'); var server = express(); var routes = require('./routes/routes'); var mongoose = require('mongoose'); const cors = require('cors'); mongoose.connect("mongodb://localhost:27017/est",{useNewUrlParser: true, useUnifiedTopology: true },function checkDB(error) { if(error) { console.log("errorr") } else { console.log("DB Connectedddd!!!!!!!!!!!") } }); server.use(cors()); server.use(express.json()); server.use(routes); server.listen(8000,function check(error) { if(error) { console.log("errorr") } else { console.log("startedddddd") } }); |
1 | node server.js |
DB Connectedddd
startedddddd
after that make the new folder route and inside the folder create the page route.js. route.js page which use to manage the all the restapis related to crud operations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var express = require('express'); const router = express.Router(); var userController = require('../src/user/userController'); router.route('/user/getAll').get(userController.getDataConntrollerfn); router.route('/user/create').post(userController.createUserControllerFn); router.route('/user/update/:id').patch(userController.updateUserController); router.route('/user/delete/:id').delete(userController.deleteUserController); module.exports = router; |
After that create the MVC Page.First Create the Controller Page
userController.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var userService = require('./userService'); var getDataConntrollerfn = async (req, res) => { var empolyee = await userService.getDataFromDBService(); res.send({ "status": true, "data": empolyee }); } var createUserControllerFn = async (req, res) => { var status = await userService.createUserDBService(req.body); if (status) { res.send({ "status": true, "message": "User created successfully" }); } else { res.send({ "status": false, "message": "Error creating user" }); } } var updateUserController = async (req, res) => { console.log(req.params.id); console.log(req.body); var result = await userService.updateUserDBService(req.params.id,req.body); if (result) { res.send({ "status": true, "message": "User Updateeeedddddd"} ); } else { res.send({ "status": false, "message": "User Updateeeedddddd Faileddddddd" }); } } var deleteUserController = async (req, res) => { console.log(req.params.id); var result = await userService.removeUserDBService(req.params.id); if (result) { res.send({ "status": true, "message": "User Deleteddd"} ); } else { res.send({ "status": false, "message": "User Deleteddd Faileddddddd" }); } } module.exports = { getDataConntrollerfn, createUserControllerFn,updateUserController,deleteUserController }; |
userService.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | var userModel = require('./userModel'); module.exports.getDataFromDBService = () => { return new Promise(function checkURL(resolve, reject) { userModel.find({}, function returnData(error, result) { if (error) { reject(false); } else { resolve(result); } }); }); } module.exports.createUserDBService = (userDetails) => { return new Promise(function myFn(resolve, reject) { var userModelData = new userModel(); userModelData.name = userDetails.name; userModelData.address = userDetails.address; userModelData.phone = userDetails.phone; userModelData.save(function resultHandle(error, result) { if (error) { reject(false); } else { resolve(true); } }); }); } module.exports.updateUserDBService = (id,userDetails) => { console.log(userDetails); return new Promise(function myFn(resolve, reject) { userModel.findByIdAndUpdate(id,userDetails, function returnData(error, result) { if(error) { reject(false); } else { resolve(result); } }); }); } module.exports.removeUserDBService = (id) => { return new Promise(function myFn(resolve, reject) { userModel.findByIdAndDelete(id, function returnData(error, result) { if(error) { reject(false); } else { resolve(result); } }); }); } |
userModel.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var mongoose = require('mongoose'); var Schema = mongoose.Schema; var userSchema = new Schema({ name: { type: String, required: true }, address: { type: String, required: true }, phone: { type: String, required: true } }); module.exports = mongoose.model('employees', userSchema); |
Angular
Angular is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.
Installing Angular CLI
1 | npm install -g @angular/cli |
After that create the new Project of Angular running by the following command
1 | ng new frond-end |
Select the SCSS Style for the Advanced CSS and Press Enter Key.
After complete the installation then run the project using following command.
1 | ng serve |
it will generate the url link to run the angular application.paste the url in to the browser
Now you see the Angular Welcome Page.
After that open the Angular project into VS code editor.
now you can see the following file structure
Creating a new Component Student Crud
1 | ng g c studentcrud |
After that install the Bootstrap by typing the following command
1 | npm i bootstrap |
After installed you have to set the path in to style.scss file
1 | @import "~bootstrap/dist/css/bootstrap.css"; |
app.module.ts
FormModule
HttpClientModule
add these module into the app.module.ts file then only we will manage the forms and Http requests
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { StudentcrudComponent } from './studentcrud/studentcrud.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, StudentcrudComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
After that open up the studentcrud.component.html
studentcrud.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <div class="container mt-4" > <div class="card"> <h1>Student Registation</h1> <form> <div class="form-group"> <label>Name</label> <input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label>Address</label> <input type="text" class="form-control" [(ngModel)]="address" [ngModelOptions]="{standalone: true}" id="address" placeholder="Enter Address"> </div> <div class="form-group"> <label>Phone</label> <input type="text" class="form-control" [(ngModel)]="phone" [ngModelOptions]="{standalone: true}" id="phone" placeholder="Enter Phone"> </div> <button type="submit" (click)="save()" class="btn btn-primary">Submit</button> </form> </div> </div> <div class="container mt-4" > <h1>Student Table</h1> <table class="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Address</th> <th scope="col">Phone</th> <th scope="col">Option</th> </tr> </thead> <tbody> <tr *ngFor="let StudentItem of StudentArray"> <td>{{StudentItem.name | uppercase}}</td> <td>{{StudentItem.address }}</td> <td>{{StudentItem.phone }}</td> <td> <button type="button" class="btn btn-success" (click)="setUpdate(StudentItem)">Edit</button> <button type="button" class="btn btn-danger" (click)="setDelete(StudentItem)">Delete</button> </td> </tr> </tbody> </table> </div> |
studentcrud.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-studentcrud', templateUrl: './studentcrud.component.html', styleUrls: ['./studentcrud.component.scss'] }) export class StudentcrudComponent { StudentArray : any[] = []; currentStudentID = ""; name: string =""; address: string =""; phone: string =""; constructor(private http: HttpClient ) { this.getAllStudent(); } getAllStudent() { this.http.get("http://localhost:8000/user/getAll") .subscribe((resultData: any)=> { console.log(resultData); this.StudentArray = resultData.data; }); } setUpdate(data: any) { this.name = data.name; this.address = data.address; this.phone = data.phone; this.currentStudentID = data._id; } UpdateRecords() { let bodyData = { "name" : this.name, "address" : this.address, "phone" : this.phone, }; this.http.patch("http://localhost:8000/user/update"+ "/"+this.currentStudentID,bodyData).subscribe((resultData: any)=> { console.log(resultData); alert("Student Updateddd") this.getAllStudent(); }); } setDelete(data: any) { this.http.delete("http://localhost:8000/user/delete"+ "/"+ data._id).subscribe((resultData: any)=> { console.log(resultData); alert("Student Deletedddd") this.getAllStudent(); }); } save() { if(this.currentStudentID == '') { this.register(); } else { this.UpdateRecords(); } } register() { let bodyData = { "name" : this.name, "address" : this.address, "phone" : this.phone, }; this.http.post("http://localhost:8000/user/create",bodyData).subscribe((resultData: any)=> { console.log(resultData); alert("Student Registered Successfully") //this.getAllEmployee(); this.name = ''; this.address = ''; this.phone = ''; this.getAllStudent(); }); } } |
i have attached the video link below. which will do this tutorials step by step.
