Add Data To The Server Using The Web API In Angular Using Node.js And VS Code

In this project, I'll walk you through how to store our data on the server and display it in the terminal.

 

First, you have to create a web API and an application. They must communicate with each other.

 

For storing data into the server, you have to follow the below steps,

 

Step 1 - First you have to create a WEB-API

 

First, you have to create a folder then open it in VS Code. Open the terminal and run the command npm init.

 

Fill in all the details and after complete this notification, you have to create a file where you have to create API and a query. To post the data you need to press the click button.

 

Click here to read how to create a web API.

 

Step 2

 

After creating a web API successfully, you have to create a web application/frontend for your web API.

 

Step 3

 

First, you have to create a folder in your system. Open this folder into the VS Code and run the command “ ng new demo” in the terminal. After creating the application successfully. You can open this application in VS Code.

 

Step 4

 

Now you have to create a service using the command “ ng g service user service.”

 

After creating service successfully, you can see that your service is registered in the module.ts file. That means you don’t need to register your service. Now go to the service.ts file and add your API URL’s and then create a query into the service.

 

Step 5

 

Now go to the .html file. In HTML file you have to take a div tag <div></div> and then take a form using the form tag<form></form>.

 

Then you have to create a function or a click event in the form tag. After creating a function on the form tag, you have to create text fields and label for entering the information like name, email, address, id, mobile, etc.

 

Step 6

 

Now you have to go to the .ts file and create an object of your service in the constructor. After creating a service object, import the service file with a proper path.

 

Now create a function that you created in the form tag. And then create a query for post-operation. Now check all dependencies and run this project.

 

Now you have to run your web API in another tab and check the output.

 

Example

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const Port = 5000;
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.get('/', function(req, res) {
    res.send('hello server 5000 is working ');
})
app.post('/enroll', function(req, res) {
    console.log(req.body);
    res.status(200).send({
        'messege': 'data recived'
    })
})
app.listen(Port, function() {
    console.log('server running on localhost: ' + Port)
});

Then register this API web address in the service.

 

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { usermodel } from './usermodel';
import { Observable } from 'rxjs';
@Injectable({
    providedIn: 'root'
})
export class MyserviceService {
    url = 'http://localhost:5000/enroll'
    constructor(private httpclient: HttpClient) {}
    enroll(user: usermodel) {
        return this.httpclient.post < any > (this.url, user)
    }
}

Submit.html

<div class="header"><a id="linkcolor" [routerLink]="['/additem']">Add Item</a>
    <a id="linkcolor"  [routerLink]="['/search']">Search Item</a>
    <a id="linkcolor"  [routerLink]="['/todo']">todo</a>

  </div>

<br> <br>
  <div class="container">
    <h1>form submit data in angular</h1>
    <form #userForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label>Name</label>
        <input type="text"  class="form-control"
        name="username" [(ngModel)]="objuser.name">
      </div><br>
      <div class="form-group">
        <label>Email</label>
        <input
        type="text"
        name="email"
        placeholder="Enter ToDo Text Here For Test....."
        class="todo-input"[(ngModel)]="objuser.email">
      </div><br>
      <div class="form-group">
        <label>Mobile</label>
        <input type="text"  class="form-control"
        name="usermobile" [(ngModel)]="objuser.mobile">
      </div> <br>
      <div class="form-group">
        <label>Address</label>
        <input type="text"  class="form-control"
        name="useraddress" [(ngModel)]="objuser.address">
      </div> <br>
    <button class="btn" type="submit" class="submit">Submit</button>
</form>

Submit.ts

import { Component, OnInit } from '@angular/core';
import { usermodel } from '../usermodel';
import {  MyserviceService} from '../myservice.service';
@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
    objuser: usermodel = new usermodel();
    constructor(private MyserviceService: MyserviceService) {}
    ngOnInit(): void {}
    onSubmit() {
        this.MyserviceService.enroll(this.objuser).subscribe(data => console.log('success', data), error => console.log('error', error))
    }
}

.css

.header{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    background-color: cyan;
    color: white;

    }
    .a{
        color: white;
        text-decoration: none;
        font-size: 20px;
        font-family: sans-serif;
        font-weight: 700;
    }
    a:link{
        text-decoration: none;
        color: white;
    }

    .formset{

text-align: center;

    }
    .input{
        background-color: gray;
    }

Module.ts

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 { TodoComponent } from './Todo/todo.component';
import { RegisterComponent } from './register/register.component';
import { SearchComponent } from './search/search.component';
import { RouterModule, Routes} from '@angular/router';
import{ HttpClientModule} from '@angular/common/http'
const routes: Routes = [

  {path:'', component:TodoComponent},
  { path:'additem', component:RegisterComponent},
  {path:'search', component:SearchComponent},
  { path: '**', component:TodoComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    TodoComponent,
    RegisterComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule, RouterModule.forRoot(routes),HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

mains.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
     <title>Todo</title>
     <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
   <body>
     <app-root></app-root>
   </body>
</html>

Now you have to run this web API using the command " node post.js".

 

Open the browser, type " localhost:5000" and press the enter button.

 

After running the web API you have to compile this application using the command " ng serve". After compiling successfully you have to open the browser and hit "localhost:4200".

 

After running the project your browser shows the output like,

 

OUTPUT

 

 

 

Now we have to fill in the details two times and press the submit button. Now we have to go to the terminal and check that our data is showing or not. 

 

The terminal output will be shown like,

 

 

Now you can see that our data will be shown in the terminal. that means our application and API is working properly. 

 

Follow me Chaman Gautam to learn more about angular. follow  C# Corner to learn about more technology.