Angular application with REST backend solution

Reading Time: 3 minutes

angular-logo

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.

Screenshot from 2019-03-14 00-26-08

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

Screenshot from 2019-03-14 01-03-16

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.

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.

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);
});
}
}

view raw
mock.component.ts
hosted with ❤ by GitHub

That’s all I hope you will able to create mock backend after reading this blog and won’t wait for the backend to create anymore.

Thanks For Reading!!!


Knoldus-blog-footer-image

 

Written by 

Nitin Arora is a Software Consultant at Knoldus Software LLP. He has done MCA from the Banarsidas Chandiwala Institute of Information technology, Delhi(GGSIPU). He has a graduation degree in BCA from Jamia Hamdard. He has a sound knowledge of various programming languages like C, C++, Java. Also has a deep interest in frontend development like Html, CSS, Angular, Javascript, ionic, react with redux, bootstrap. He is currently working in frontend technologies like React, Html, SCSS, Bootstrap, and Typescript. He is a focused, hardworking, team-oriented member and always exploring new Technologies, His hobbies are to play cricket, volleyball, and do coding.