How To Create A Web API In Angular Using Node.js In VS Code

What is Web API

 

WEB API stands for (Application Programming Interface). A Web API is a connectivity between the database and a frontend of software or the application. A web API is performed as a mediator between client and server. API is a set of protocols, definitions, and tools used for building applications and software. Any request and response between client and server are possible with the WEB API. API is an interface that allowed the user and programmer to catch data and access the information from the database. API is used to perform many operations like the post, update, delete, find, find all, delete all, update all find one, find all, etc. A WEB API provides the easy syntax for the complex code.

 

A WEB API is some kind of interface and function by which we can use some features, functions, and data of an application.

 

Web service also supports HTTP protocols, and Web API also works as a web service. A Web API allows us to access data like reading and write data. Mostly WEB API is used to send requests to the server and receive responses from the server. A WEB API extends the functionality of the application.

 

We can create Web API using different technology like java, node.js, c#, and .NET 

 

How to create a Web API in Angular using Node.js and VS Code 

 

Step 1

 

First, you need to create a folder in which you would like to create your API.

 

Step 2

 

Then open this folder in VS code and open the terminal.

 

Step 3

 

Then run the command "npm init" in the terminal.

 

Step 4

 

After a few seconds, you will see few notifications.

 

You have two options for these notifications, in the first option, you have to fill in the details. In the second option, you can skip those details using the Enter key.

 

Step 6

 

After completing this process, you see that a .js file will be created in this folder. Now you need to import all the requested libraries in that folder which you created earlier, now the file contains all the details which is required to create an API.

 

Step 7

 

Now you have to create a file with the extension.js like index.js.

 

Step 8

 

After creating a file you have to install few packages, these packages are,

• mongoose
• body-parser
• cors
• express

Now open the index.js file and write code,

 

index.js

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 enroll': 'data recived'
    })
})
app.listen(Port, function() {
    console.log('server running on localhost: ' + Port)
});

package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1"
  }
}

Now run this project using command node index.js,

node index.js

After compilation, you can see that your device displays the message you wrote to the console.

 

OUTPUT

 

 

 

Now you can see that your output is shown in the terminal that your server 5000 is started and working properly.

 

Now you have to open the browser and type "localhost:4200". After a few seconds, you will see that your message will show on the browser. If your message shows on the browser then your API is working properly.

 

OUTPUT

 

 

If you want to stop the server then you have to press the ctrl+c to cancel the process or stop the server.

ctrl +c

After completing this process, your terminal will be shown like this,

 

OUTPUT

 

 

 

Now you can see that your server is stopped. If you want to run again your server then you have to run the command again "node index.js".

 

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