Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

Often, when developing Angular applications, you do not have the backing REST APIs ready for testing. To avoid having to digress into developing web services, or being blocked, waiting for your back end team to provide them, you can use JSON server to provide a “fake” API. This article will show you how to use Angular IDE and JSON Server to set up your API with minimal effort.

What is JSON Server?

JSON Server is an npm package that allows you to create an API, backed by a simple database. It is created for front end developers who need a quick backend for prototypes and mock-ups.

Creating an Angular Project

In the new Angular project wizard, enter JsonandAngular4 as the project name.

fake-angular-api-ss-1

Click Finish to complete the creation of a new Angular 4 project. In the Terminal+ view, you can see commands being executed by Angular CLI. After the installation of all the modules is complete, we are now ready to continue with development.

Installing JSON Server with Existing Angular project

Angular IDE has a terminal view from which we can execute commands. So from the menu, select Window, then Show View and then click Terminal+. In the opened terminal, type the following command.

npm install -g json-server

fake-angular-api-ss-2

This results in JSON Server being installed globally. Now, add the following command to the scripts section in the package.json file, to run the JSON server:

"json-server": "json-server --watch db.json --port 3004"

The script section of the package.json file will look like this:

Starting the Angular App & JSON Server

Starting the Angular App

There is a server view in Angular IDE, as shown in the image below. To open it – Window > Show View > Server. Right click on your project (here Jsonandangular4). Angular IDE serves the application on localhost port 4200 by default, so open http://localhost:4200 in your browser to see the running app – there isn’t much to see right now, of course.

fake-angular-api-ss-3

Starting the JSON Server and creating the db.json file

In the Terminal+ view (ensure you have the correct project selected) run the following command:

npm run json-server

fake-angular-api-ss-4

This executes the command against the json-server property we added to our package.json earlier, and starts the JSON server at port 3004. If you open http://localhost:3004 in your browser, you can see that our JSON server is now running successfully. The JSON server automatically creates a db.json file in your current directory. Recall we specified that filename as one of the arguments in the json-server property.

If you open db.json it will look like this – this is the default database created by JSON Server. Of course, you could manually create and/or edit this file too.

Connecting the Angular 4 App with the REST API

Now that we have our Fake REST API ready, let’s write some code to communicate with the API. We need the @angular/http package to work with the HTTP client. Angular IDE would have already downloaded the npm package when we created the project.

Now import HttpModule into our application module (src/app/app.module.ts) and add HttpModule to the imports array in the @NgModule() decorator.

The code in app.module.ts will look like this:

Now we will create a Dunebook class under the app/src folder, which will represent the object structure.

fake-angular-api-ss-5

fake-angular-api-ss-6

Add the following code to src/app/dunebook.ts:

Now we will update our template file, app.component.html:

And finally, update the app.component.ts with the following code:

Let’s understand the code snippet above. First, we imported the HTTP client, available as the Http service in the @angular/http package, and injected it via dependency injection into a constructor. Then we are calling our API using the GET method. As the Angular Http service is an Observable, we need to subscribe to it in order to receive the response. Now if we click the button, we will receive post information in JSON format from the API.

Open http://localhost:4200 in your browser and you will see a screen like below.

fake-angular-api-ss-7

After clicking the Get Data button, you will see output like this:

fake-angular-api-ss-8

We have now successfully connected our Angular app to the JSON REST API.

This is a rather basic example, which used only a simple query. However, JSON Server does support more complicated APIs as well, including the ability to search the database, obtain ranged or sorted results, manage relationships, and more. You can even use JSON Server as a static file server, or write a small amount of JavaScript to generate the data programmatically – the ability to create alternate routes to your data is also handy – see the JSON Server page for a detailed list of its abilities. For everything beyond the REST API, remember to use Angular IDE or MyEclipse to make your life easier.

Related Posts

Angular 5 Features Front-end developers, rejoice - after a short delay, the Angular 5 release is scheduled for October 23rd!Update (November 1st): It's finally here! After ten release candidates, Angular version 5.0.0, "pentagonal-donut", has been released.Update (October 31st): Well, we're still waiting for Angular version 5, and we're now at 5.0.0 RC 9 - but, I'm s...
Using Swagger to Connect a Backend to an Angular F... IntroductionLet’s say you have an advanced backend system, for which you wish to develop a modern Angular frontend, or, perhaps it’s not your backend, but something public like Facebook, and you want to develop a site using some of its exposed APIs. Of course, you want to do this with minimal effort ... how do you pull this off? Enter Swagger!This ...
TypeScript 2.4 — Even More Reasons to Love i... Perhaps you are already enjoying all the amazing features TypeScript (TS) adds to JavaScript: you might already be in love with its interfaces, abstract classes, and algebraic data types, among many others. TS 2.4 brings more good news. This version of TS comes loaded with improvements, ranging from dynamic import expressions to weak type detection...
Building Applications with Angular Material Angular Material is a set of high-quality UI components developed by the Angular team, based on the Google Material design specification. These components help us to build applications with an attractive, yet familiar UI, giving users a consistent experience across devices.In this Angular tutorial, you will learn how to set up material design in yo...

Posted on Oct 20th 2017