Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Oct 20th 2017
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.
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.
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.
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
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.
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.
After clicking the Get Data button, you will see output like this:
We have now successfully connected our Angular app to the JSON REST API.