Angular Backend Less Development

Introduction

This tip talks about developing AngularJS application without backend services ready. In other words, faking our web services using $httpBackend service of angularJS.

Background

Your peer is not yet ready with his backend services and you cannot wait until he finishes services to start writing the frontend piece using angular.

Angular has a solution for this situation. Angular allows you to create fake web services using $httpBackend in built service, so that you need not wait for your peer to complete writing backend web services. Not just that $httpBackend is extensively used in writing automated tests. It's very simple to mock a web service using $httpBackend.

Mocking Our Web API

I want to mock a product service which returns a list of products.

Step 1

Download angular-mocks file from angular web site and add a reference in your html file. Alternatively, you can download using bower.

bower install angular-mocks

<script src="scripts/angular-mocks.js"></script>

Step 2

I will create a module because I want to isolate this fake web service from my actual app. Notice that I have added "ngMockE2E" module as a dependency. $httpBackend service resides in this module. I am creating fake services in a complete different module because I want to isolate these mock services so that they can be easily replaced with actual web services in later point.

var api = angular.module('fakApi', ['ngMockE2E']);

Step 3

I will add a list of dummy products to be returned.

var products = [
 {
        productId: 1,
        brand: "Nokia",
        name: "1100",
        price: 40,
        inStock: true,
    },
    {
        productId: 2,
        brand: "Nokia",
        name: "2100",
        price: 50,
        inStock: true,
    },
    {
        productId: 3,
        brand: "Samsung",
        name: "Galaxy S",
        price: 100,
        inStock: true,
    },
    {
        productId: 4,
        brand: "Samsung",
        name: "Galaxy S6",
        price: 300,
        inStock: false,
    }];

Step 4

I will start mocking my methods inside module.run function.

api.run(function ($httpBackend) {
   $httpBackend.whenGET('api/products').respond(products);
});

$httpBackend is injected into run function of the module. I am mocking for HTTP GET verb using when GET function which takes url as parameter and returns list of products.

To sum up everything, our fake web service will look something like:

var api=angular.module('fakeApi',['ngMockE2E']);
 
api.run(function ($httpBackend) {
    var products = [
         {
            productId: 1,
            brand: "Nokia",
            name: "1100",
            price: 40,
            inStock: true,
        },
        {
            productId: 2,
            brand: "Nokia",
            name: "2100",
            price: 50,
            inStock: true,
        },
        {
            productId: 3,
            brand: "Samsung",
            name: "Galaxy S",
            price: 100,
            inStock: true,
        },
        {
            productId: 4,
            brand: "Samsung",
            name: "Galaxy S6",
            price: 300,
            inStock: false,
        },
        {
            productId: 5,
            brand: "Sony",
            name: "XPeria Z",
            price: 400,
            inStock: false,
        },
        {
            productId: 6,
            brand: "LG",
            name: "Optimus",
            price: 250,
            inStock: true,
        }];

$httpBackend.whenGET('api/products').respond(products);

//mocking http post call.

$httpBackend.whenPOST('api/products/add').respond(function(method,url,data){
    var product=angular.fromJson(data);     
    products.push(product);     
    return [200,products]; 
});

Step 5

Make a call to fake web service as shown below:

var app=angular.module('app',['fakeApi']);

app.controller('myController',function($scope,$http){

    $http.get('api/products') 
        .success(function(data){
            $scope.products=data;
   });
});

When you are ready with your actual services, go ahead and remove "fakeApi" from the dependency array of the module. As soon as you remove your app will be calling actual web service. It is that simple to add and remove fake web service.

Points of Interest

$httpBackend service allows you to mock your services easily and it allows parallel development of frontend and backend services as long as the contract is the same.