Angular application with REST backend solution

Reading Time: 3 minutes

We always need interaction between backend and frontend for creating a successful application, but it takes time to integrate backend with the frontend, while they both are working parallelly. So for those who need a fast development without waiting for the backend to create Rest backend with Mock data is a solution for this situation.

We use JSON Server to make this possible and help frontend to interact with mock data for quick functioning.

Only a few steps are needed for the initial setups:

1: Installation of json Server: Initially we need to install json server that we can install using a node package manager(npm) with -g to install it globally and add sudo followed by the command given below if they ask for the permission.

npm install -g json-server

2: Create json file with mock data: After successful installation of json server our next step is to create a json file which contains the mock data.

https://gist.github.com/nitinknolder/6e6e4b6c0711340212fca3206244b8ac

https://gist.github.com/nitinknolder/61b110a5f95dbfae16eda0a1ffb46848#file-mock-data

3: Run json-server now: Now all you need to do is run your json-server in the terminal and launching your json file.

json-server mockbackend.json

The above command will run your json-server with the json file which includes mocked data. Also if it will show the error like this shown below, like in my case it will not be able to bond to the port 3000 as one of the services is already running on my system using this port.

Cannot bind to the port 3000. Please specify another port number either through –port argument or through the json-server.json configuration file.

In this case, all you need to do is run the json server using some another port which is not using any service for instance if I enter this command given below, then the results is like shown in the image.

json-server mockbackend.json –port =3005

You can open this link at the given url which you can see in your terminal and test the different path. like in my case i can use localhost:3005/data it will return my mock data given in point 2 above.

Now its time to use backend mock data in your angular applications. All you need to do is to set the generated URL variable to the localhost URL and then you can fetch data in your application.

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	import { Injectable } from '@angular/core';
	import {HttpClient} from "@angular/common/http";
	import {Observable} from "rxjs";

	@Injectable()
	export class UserProfileService {
	url = 'http://localhost:3005';
	constructor(private http: HttpClient) { }

	getMockData(): Observable<any> {
	return this.http.get(this.url + '/data');
	}

view raw

mock.service.ts

hosted with ❤ by GitHub

In the next step, all you need to do is call the getMockData() in your component file and you be able to display the fetched data on UI likewise I have done in my case.

Show hidden characters

	export class UserProfileComponent implements OnInit {
	profileDataOfUser: IFixtureUserProfile;
	insertObjectInArray = [];
	constructor(private user: UserProfileService) { }

	ngOnInit() {
	this.getProfileData();
	}

	getProfileData(): void {
	this.user.getMockData().subscribe(data => {
	this.profileDataOfUser = data;
	this.insertObjectInArray.push(data);
	});
	}
	}