Angular application with REST backend solution

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

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.

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.

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 Software Consultant at Knoldus Software LLP with 6 months of experience. He has done MCA from 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, and scala. Also has a deep interest in frontend development like Html, CSS, Angular, Javascript. He is currently working in frontend technologies like Angular, Html, CSS, Bootstrap and Typescript. He is focused, hardworking, team-oriented member and always exploring new Technologies, His hobbies is to play cricket, volleyball, and do coding.

Knoldus Pune Careers - Hiring Freshers

Get a head start on your career at Knoldus. Join us!