Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Online fake REST API

Suggested Videos
Part 60 - Angular delete form | Text | Slides
Part 61 - Angular accordion example | Text | Slides
Part 62 - Angular content projection | Text | Slides

In this video we will discuss creating a fake online REST API

What is REST API
REST stands for Representational State Transfer. REST is an architectural pattern for creating an API that uses HTTP as its underlying communication method. 


The REST architectural pattern specifies a set of constraints that a system should adhere to. Some of these constraints are Client Server constraint, Stateless constraint, Cacheable constraint, Uniform Interface constraint etc. We discussed these constraints in Part 1 of ASP.NET Web API tutorial. Let's quickly recap the Uniform Interface constraint.


Uniform Interface - The uniform interface constraint defines the interface between the client and the server. To understand the uniform interface constraint, we need to understand what a resource is and the HTTP verbs - GET, PUT, POST & DELETE. 

In the context of a REST API, a resource typically represents a data entity like Product, Employee, Customer etc. The HTTP verb (GET, PUT, POST, DELETE) that is sent with each request tells the API what to do with the resource. Each resource is identified by a specific URI (Uniform Resource Identifier) or URL (Uniform Resource Locator). The following table shows some typical requests that you see in an API.

Resource Verb Outcome
/Employees GET Gets list of employees
/Employees/1 GET Gets employee with Id = 1
/Employees POST Creates a new employee
/Employees/1 PUT Updates employee with Id = 1
/Employees/1 DELETE Deletes employee with Id = 1

Depending on the server side technology you use, there are many frameworks that we can use to build a REST API. For example, if your server side technology is Microsoft Dot Net, you can use WCF or ASP.NET Web API to create a REST API. 

Since this is an Angular course, and to stay focused on it, let's create a fake REST API using JSON Server. In our upcoming videos, we will perform all the CRUD operations using this fake REST API.

The following is the JSON Server Github page 
https://github.com/typicode/json-server

Execute the following command to install JSON server
npm install -g json-server

Execute the following command to start the server
json-server --watch db.json

This automatically creates db.json file in the root project folder. Copy and paste the following JSON data in db.json file.

{
  "employees": [
    {
      "id": 1,
      "name": "Mark",
      "gender": "Male",
      "contactPreference": "Email",
      "email": "mark@pragimtech.com",
      "dateOfBirth": "1988/10/25",
      "department": "3",
      "isActive": true,
      "photoPath": "assets/images/mark.png"
    },
    {
      "id": 2,
      "name": "Mary",
      "gender": "Female",
      "contactPreference": "Phone",
      "phoneNumber": 2345978640,
      "dateOfBirth": "1979/11/20",
      "department": "2",
      "isActive": true,
      "photoPath": "assets/images/mary.png"
    },
    {
      "id": 3,
      "name": "John",
      "gender": "Male",
      "contactPreference": "Phone",
      "phoneNumber": 5432978640,
      "dateOfBirth": "1976/3/25",
      "department": "3",
      "isActive": false,
      "photoPath": "assets/images/john.png
    }
  ]
}

At this point, fire up the browser and navigate to http://localhost:3000/employees/ to see the list of all employees. You can test this REST API using a tool like fiddler.

In our upcoming videos we will discuss performing CRUD operation using this fake REST API.

angular crud tutorial

1 comment:

  1. correction to last line :

    "photoPath": "assets/images/john.png"

    ReplyDelete

It would be great if you can help share these free resources