Mocking REST API in AngularTS

Sometimes, it is convenient to start implementing the frontend before having the backend ready. The backend does not expose an API, yet, but you want to proceed with the frontend development. How to mock REST API in AngularTS until the real API is ready?

Implementing frontend before backend

Starting with frontend development, have some advantages over doing the backend first. For example, the sooner anything is visible, the sooner users may see it and tell you what they think. You can validate the whole concept at an early stage.

Another reason is to verify what API you really need. I have often seen designs of interfaces which become obsolete after two weeks of frontend development. It is difficult to predict everything. It is not bad if it is enough to just extend the planned API. But it can be much worse - the whole designed API may have to be thrown away and replaced with something totally different.

If implementing the frontend seems a good option, how can it be done?

For sure, you implement the visual side - HTML and CSS. But that is not the end. It might be useful to have clickable buttons and see some data. Right, data. Data usually comes from the database, goes through the backend and via REST API is sent to the frontend where it is rendered and presented to the users. Of course, the whole sequence is initiated by an HTTP REST call from the frontend to the backend.

Can such a HTTP REST call be mocked in AngularTS?

HTTP REST call in AngularTS

Of course, it can! Before I show you a solution, let's see how such a REST call looks in AngularTS to a real endpoint.

import { Injectable } from '@angular/core';
import {Observable} from "rxjs";
import {HttpClient} from "@angular/common/http";

@Injectable({
   providedIn: 'root'
})

export class BlogsService {
   constructor(private http: HttpClient) { }

   public getUsefulBlogs(): Observable<Blog[]> {
      return this.http.get<Blog[]>("/blogs/useful");
   }
}

export interface Blog {
   name: string,
   url: string
}

Method getUsefulBlogs() returns Observable of Blog[]. It is very different from just returning Blog[]. To get a list of blogs, you have to subscribe on the result of getUsefulBlogs() like this:

this.getUsefulBlogs().subscribe(blogs => console.log(blogs));

Once the backend responds, the data can be processed (printed with console.log in this case). More information about HTTP REST in AngularTS can be found in Angular Guide.

Mocking HTTP REST response in AngularTS

After getting familiar with the real HTTP REST calls in AngularTS, we get to an interface of the mocked method. It must return an Observable of something (Blog[] in our case). How an Observable object can be created? We can use of(...) function from rxjs package. See how:

public getUsefulBlogs(): Observable<Blog[]> {
   return of([
      { name: "DBA presents", url: "https://dba-presents.com" }
   ]);
}

The of(...) method gets an object that will be wrapped up with Observable as an argument. The returned value can be subscribed on with no difference to the regular HTTP response.

I hope that was useful. Try implementing your next web app from the frontend part. Good luck.

Do you know how to break down modules in AngularTS?