Angular 2. Web API imitation

Very often while developing a frontend side of a web application, a necessity of server side imitation occurs: create a stub to be able to implement the functionality of making requests and data receiving, while the server side hasn’t been implemented yet.

There are many tools for this, but for Angular, angular-in-memory-web-api module provides this opportunity.

Angular services are gathered in this module to imitate communication with a remote server, which will work in the application memory and process ajax requests.

It allows you not only to implement the functionality of requests sending and data receiving, but also allows you to work with an analogue of the database in the application memory, that is to perform operations on adding, editing and deleting data.

The most convenient way to install angular-in-memory-web-api module is to use npm package manager, if it hasn’t been installed, yet you can do this by downloading and installing NodeJS.

Then in the root directory of your application in the console, run the following command:

npm install angular-in-memory-web-api

It’s recommended to connect resources in the main root module of your application.

Import angular-in-memory-web-api module in your application:

import {InMemoryWebApiModule} from 'angular-in-memory-web-api'

Also we import our InMemoryDataService service beforehand, which we’ll create in the next chapter:

import {InMemoryDataService} from './in-memory-data.service'

Now we connect the service into the application. In imports array of the main module, add the following code:

imports: [InMemoryWebApiModule.forRoot(InMemoryDataService)]

Into forRoot() configuration function we transfer InMemoryDataService service, which will manage the database in the application memory.

So, the module and the service are connected in the application, and now we can turn to the service implementation.

Create in-memory-data.service.ts file in your application and put the following code in it:

The screenshot shows that we are importing InMemoryDbService interface and implement it in InMemoryDataService class.

Next we implement its createDb method, it’ll create a collection of hash objects, which will be analogous to our database in the application memory.

In this case we created users property, which value is an array of users objects that have id and name properties.

To start using created database, you can use @angular/http service, which implements ajax requests.

As it was mentioned, database created with the help of InMemoryDbService service, supports all the main types of requests: get, post, put, delete.

Collection users, created in in-memory-data.service.ts file, will be available at the address “/api/users”. It is worth noting, that the name of the collection matches the query string, that is, if we add in createDb function one more collection items, it will be available at the address “/api/items”.

As an example, we implement a service which will carry out a get request for data of our users:

The functiongetUsers() will send ajax request at the address “/api/users”, which will return the data of our user’s collection. In this case the function get() of http service is used, but for other types of requests there are also suitable functions post(), put() and delete().

Also, the service supports search on the object fields in memory. For it that’s enough to pass parameters in the query string, for example “/app/users/?name=lis”, to find an object with the value of the name property equal to lis.

An additional set of parameters can be passed as the second argument forRoot() function, which we described in the chapter “Connection”.

InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 500 })

Delay property sets the value of the delay to process all requests. 

I will give several supportive parameters:

Angular web API functionality will be useful in the early stages of application development and in the conditions when an application server side development lags behind client side development.

Thanks to everyone and good luck!