When developing Angular applications, sometimes you don’t have the REST APIs ready to be used for testing purpose. To solve this problem, Json server comes to the rescue. In this article, you will learn how to Setup & use fake Rest API with Angular 4. In the tutorial we will also learn –
JSON Server is an npm
package that allows you to create an API with a database. It is created for front-end developers who need a quick back-end for prototyping and mocking. Using JSON Server you can get a full fake REST API for your Angular application without much effort.
Let’s get started by firing up our Angular IDE and creating a new Angular project named Jsonandangular4
Now you will see the New Angular Project wizard where you can select the Node.js, NPM and Angular CLI versions. In the New Angular Project wizard, enter JsonandAngulr4
as the project name and select Angular CLI version 1.1.0, Node.js version 7.10.0 and NPM version 4.6.1.
Finally, click Finish to complete the creation of a new Angular 4 project. In the Terminal+ view, you can see several commands being executed by Angular CLI. After the installation of all the modules, we are now ready to continue with our 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
After successfully installing Json server, 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"
Script section of Package.json
file will look like this –
{ "name": "jsonand-angular4", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "json-server": "json-server --watch db.json --port 3004", "e2e": "ng e2e" },
There is a server view in Angular IDE, as shown in the below image. 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 up http://localhost:4200
in your browser to see the running app.
Run the following command (in Terminal+) to start the JSON server:
$ npm run json-server
"json-server": "json-server --watch db.json --port 3004",
in the package.json file. Our db.json
file should look like this –
{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }
We have our Fake Rest API ready. Let us 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.
Tip – Db.json File stores The data which we fetch using the rest API.
Now import HttpModule in our application module (src/app/app.module.ts) and add the HttpModule to the imports array in the @NgModule() decorator. Code In the app.module.ts
will look like this –
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HttpModule } from '@angular/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Now we will create a dunebook
class under the app/src
folder, which will represent the object structure.
Add the following code to src/app/dunebook.ts –
export class Dunebook { id: number; title: string; author: string; }
now we will update our template file (app.component.html).
<button (click)="getDunebooksData()">Get Data</button> <pre>{{DunebookList | json}}</pre>
And finally, update the App.Component.ts
with the following code –
import { Component } from '@angular/core'; import { Dunebook } from './Dunebook'; import { Http } from '@angular/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { dunebookList: Dunebook[]; constructor(private http: Http) { } getDunebookData() { this.http.get('http://localhost:3004/posts') .subscribe(res => this.dunebookList = res.json() as Dunebook[]); } }
Let’s understand the code snippet above
First, we imported the HTTP client, available as 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 Angular Http service is Observable, so we need to subscribe to it in order to receive the response. Now if we click on the button, we will receive post information in JSON format from the API.
Open http://localhost:4200
in your browser & you will see a screen like below.
After clicking on Get Data button you will see output like this –
We have now successfully connected our Angular app to Json Rest API.
Most of the Angular 2+ Tutorials of dunebook.com were created using Angular IDE. The Angular IDE by Webclipse is built specifically for Angular 2+. It is simple for beginners; powerful for experts. It is Available as a stand-alone IDE, as part of their Eclipse plugin suite, Webclipse, or part of their robust, Full Stack IDE, MyEclipse 2017
This IDE supports advanced editing of TypeScript 2.0 which improves your development effectively. Some cool features of Angular IDE are Listed Below.
Are you thinking of a career in web design but not sure where to start? The…
In this article, We will be looking at some of the best open-source Flutter eCommerce…
In this article, We will be looking at some of the top Jekyll themes. Jekyll…
Citing is the act of acknowledging and giving credit to the original creator of the…
Data can be complicated and hard to manage. However, it doesn't need to be. There…
Industry experts agree on one thing - fleet management innovation is vital for optimizing business…