Call multiple functions in ng-click

Angular back end less development

Your peer is not yet ready with his back end services and you can not wait until he finishes services to start writing font end 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 to 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.

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

Step 1: Download angular-mocks file from angular web site and add a reference in your html file.

---

---

<script src="bower_components/angular/angular.js">

</script><script src="bower_components/angular-mocks/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.

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

Step 3: I will add 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 whenGET 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);

$httpBackend.whenPOST('api/products/add').respond(function(method,url,data){

   var product=angular.fromJson(data);
    products.push(product);
    return [200,products]; //200: status code
});

Wow! we successfully mocked our web service with relatively less efforts. Now the next step is to consume it.

Step 5:  Inject fakApi as a dependency in your actual module.

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. That simple it is to add and remove fake web service.