install Json-Server in angular

Step-By-Step Guide to Install JSON-server in Angular Project.

Step-1 : (Install the JSON Server package)

first you need to do Create a new folder in your angular project.

code snippet

npm install -g json-server

Step-2 : (Watch JSON Server)

you can watch (run) the json-server in following command.

code snippet

json-server --watch db.json

or

code snippet

npx json-server --watch db.json

after that create automatic db.json file in your angular project. Go to db.json file & open it.

Step-3 : (ByDefault Data Format)

you have some bydefault data in db.json file, you can modify it easily.

code snippet

{
  "posts": [
    { "id": 101, "title": "Json Server", "author": "hax" }
  ],
  "comments": [
    { "id": 200, "body": "something write", "postId": 15 }
  ],
  "profile": { "name": "angular" }
  }

Type Y to Add routing file in angular project or type N to Not add routing in angular project.

Step-4 : (ByDefault Navigate Route)

you can watch the json-server open browser and type following command.

code snippet

http://localhost:3000/

Step-5 : (Change Navigate Route Port)

you can change the json-server bydefault Route Port using below command.

code snippet

json-server --watch db.json --port 5000

Step-6 : (Add Custom Object Data-Set)

you can change the json-server bydefault Route Port using below command.

code snippet

"employees": [
  {
    "id": 1,
    "first_name": "Glazed",
    "last_name": "Chocolate",
    "email": "Glazed@gmail.com"
  },
  {
    "id": 2,
    "first_name": "Steve",
    "last_name": "Maple",
    "email": "Maple@gmail.com"
  },
  {
    "id": 3,
    "first_name": "john",
    "last_name": "Smith",
    "email": "ann@gmail.com"
  }
  ]
}

Click to Go Fake Json-Server Api

Step-7 : (REST Api Route)

db.json file Default Routes are shown below.

Singular Routes

code snippet

GET /profile
POST /profile
PUT /profile
PATCH /profile

Plural Routes

code snippet

GET / posts
GET / posts / 1
POST / posts
PUT / posts / 1
PATCH / posts / 1
DELETE / posts / 1

Filter

Use . to access deep properties

code snippet

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

Paginate

In the realm of data retrieval, pagination plays a crucial role in managing large datasets and improving performance. One common approach to implement pagination is by utilizing the "_page" and "_limit" parameters. In this article, we will delve into the concept of pagination, understand the purpose of these parameters, and explore how to rewrite the given sentence with 100% uniqueness while retaining its intended meaning.

code snippet

GET /posts?_page=7
GET /posts?_page=7&_limit=20

Sort

"Include the '_sort' and '_order' parameters, where the default sorting order is set to ascending."

code snippet

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

For multiple fields, use the following format:

code snippet

GET /posts?_sort=user,views&_order=desc,asc

Slice

slice have 3 implemets parameters "_start" or "_end" or "_limit", ensuring that res includes an X-Total-Count header."

code snippet

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

Operators

slice have 2 Incorporate parameters "_gte" or "_lte", retrieve data within a specified range.

code snippet

GET /posts?views_gte=10&views_lte=20

Add _ne to exclude a value

code snippet

GET /posts?id_ne=1

Add _like to filter (RegExp supported)

code snippet

GET /posts?title_like=server

Full-text search

Add q

code snippet

GET /posts?q=internet

Relationships

To include children resources, add _embed

code snippet

GET /posts?_embed=comments
GET /posts/1?_embed=comments

To include parent resource, add _expand

code snippet

GET /comments?_expand=post
GET /comments/1?_expand=post

To work with nested resources, you have the option to leverage the built-in one-level nesting functionality or implement custom routes to handle additional levels for accessing or creating them.

code snippet

GET /posts/1/comments
POST /posts/1/comments

Database

code snippet

GET /db

Homepage

server return bydefault index file or serves the contents of the './public' directory.

code snippet

GET /

Download Code