In this Article explains how to create registration using Node js and Mongodb and Angular .Node js as backend front end angular.
First you have to Create the Project
1 | npm init |
First Step Create the page which is server.js which use to connect the port and databases.
index.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 | const express = require('express'); const app = express(); const mongoose = require('mongoose'); mongoose.set('strictQuery', true); var routes = require('./routes/routes'); const cors = require('cors'); app.use(cors( { origin: "http://localhost:4200" } )); mongoose.connect("mongodb://127.0.0.1:27017/dbschool",{useNewUrlParser: true, useUnifiedTopology: true }, function checkDB(error) { if(error) { console.log(error) } else { console.log("DB Connectedddd!!!!!!!!!!!") } }); app.listen(8086,function port(error) { if(error) { console.log(error) } else { console.log("Port Connectedddd!!!!!!!!!!! 8086") } }); app.use(express.json()); app.use(routes); |
employeeController.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 | var employeeModel = require('./employeeModel'); var createUserControllerFn = async (req, res) => { try { const body = req.body const employeeModelData = new employeeModel() employeeModelData.name = body.name employeeModelData.address = body.address employeeModelData.phone = body.phone await employeeModelData.save() res.status(200).send({ "status": true, "message": "Employee created successfully" }); } catch(error) { res.status(400).send(error); } } module.exports = { createUserControllerFn }; |
employeeModel.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var mongoose = require('mongoose'); var Schema = mongoose.Schema; var employeeSchema = new Schema({ name: { type: String, required: true }, address: { type: String, required: true }, phone: { type: String, required: true } }); module.exports = mongoose.model('employee', employeeSchema); |
routes.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var mongoose = require('mongoose'); var Schema = mongoose.Schema; var employeeSchema = new Schema({ name: { type: String, required: true }, address: { type: String, required: true }, phone: { type: String, required: true } }); module.exports = mongoose.model('employee', employeeSchema); |
1 | npm install -g @angular/cli |
1 | ng serve |
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
then you have create the following components by typing the command
1 | ng g c register |
file and paste inside the
register.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 | <div class="container mt-4" > <div class="card"> <h1>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" [(ngModel)]="address" [ngModelOptions]="{standalone: true}" class="form-control" id="address" placeholder="Enter address"> </div> <div class="form-group"> <label>Phone</label> <input type="text" [(ngModel)]="phone" [ngModelOptions]="{standalone: true}" class="form-control" id="phone" placeholder="Enter Mobile"> </div> <button type="submit" class="btn btn-primary mt-4" (click)="register()" >Submit</button> </form> </div> <div> |
inside the imports section add the FormsModule and HttpClientModule
if the path is not get automatically copy and paste it
import { HttpClientModule } from ‘@angular/common/http’;
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 | 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 { RegisterComponent } from './register/register.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, RegisterComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
register.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 | import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.scss'] }) export class RegisterComponent { name: string =""; address: string =""; phone: Number =0; constructor(private http: HttpClient ) { } register() { let bodyData = { "name" : this.name, "address" : this.address, "phone" : this.phone }; this.http.post("http://localhost:8086/user/create",bodyData,{responseType: 'text'}).subscribe((resultData: any)=> { console.log(resultData); alert("Registered Successfully"); this.name = ''; this.address = ''; this.phone = 0; }); } } |
