Backendless development with AngularJs

Have you ever been in a situation where you start doing some front-end work but stuck because the webapi you need to finish this story is not ready yet. Lets see how you can continue front-end development without backend api. Suppose you start building front-end of an application where you need to display currently available books list. So you need an webapi that will return list of books and you then display them in html page using angularjs. The idea here is use $httpBackend to mock your $http / $resource request and return mock data. When the webapi is ready you just remove $httpBackend and all your code will work as it is. You sit with the developer who working on the api and decided the endpoint will be “/api/v1/books” and return type will be collection books. Lets start developing this.

Lets create a mock service and define how to respond when a request made for get books.


(function(ng){
    "use strict";

    var bwServicesMock = ng.module('bwServicesMock',['ngMockE2E']);

    bwServicesMock.run(['$httpBackend', function($httpMock){
        var books = [
            {
                id: 1,
                name: 'Clean Code'
            },
            {
                id: 2,
                name: 'Pragmatic Programmer'
            }
        ];

        $httpMock.whenGET('/api/v1/books').respond(books);
    }]);

})(angular);

So here I am declaring module for mockservices and defined my sample books data. I am also telling whenever any request done for “/api/v1/books” then return the sample data. This is the key module and if you add this module in your original services module then this will be in action and whenever the webapi ready just remove “mockServices” module from your services module. To use “ngMockE2E” module you need to add reference of “angular-mocks.js” file in your application.

Now lets define the main application and services module.


(function(wn,ng){
    "use strict"

    wn.bookWorm = ng.module('bookWorm',['bwServices']);
    wn.bwServices = ng.module('bwServices',['bwServicesMock']);

})(window,angular);

Our bwServices module now dependent to “bwServicesMock” module that we defined before. That ensure all $http call will intercept and our mock data will return instead of calling the real api.

Here is the code for BooksService that actually an angular factory which responsibility is to communicate to webapi and return books list.


(function(bws){
    "use strict";

    var booksService = function($http){
        return{
            getAll : function(){
                return $http.get('/api/v1/books');
            }
        };
    };

    bws.factory('booksService',['$http', booksService]);

})(bwServices);

Now finish the controller code.


(function (app) {
    "use strict";

    var booksListCtl = function (booksService) {
        var vm = this;

        var loadBooks = function () {
            vm.loadingBooks = true;

            booksService.getAll()
                .then(function (response) {
                    vm.books = response.data;
                    vm.loadingBooks = false;
                });
        };

        var init = function () {
            loadBooks();
        };

        init();
    };

    app.controller('booksListCtl', ['booksService', booksListCtl]);

})(bookWorm);

Here is the index.html file that displays list of books.


<!DOCTYPE html>
<html data-ng-app="bookWorm">
<head>
    <title></title>
</head>
<body>

<div data-ng-controller="booksListCtl as vm">
    <h1>Books list</h1>
    <div data-ng-show="vm.loadingBooks">Loading...</div>
    <div data-ng-show="vm.books">
        <ul>
            <li data-ng-repeat="book in vm.books" data-ng-bind="book.name"></li>
        </ul>
    </div>
</div>

</body>
    <script src="./assets/scripts/vendors/jquery.js"></script>
    <script src="./assets/scripts/vendors/angular.js"></script>
    <script src="./assets/scripts/vendors/angular-mocks.js"></script>
    <script src="./assets/scripts/app/app.js"></script>
    <script src="./assets/scripts/app/shared/services-module.js"></script>
    <script src="./assets/scripts/app/shared/mock-services-module.js"></script>
    <script src="./assets/scripts/app/books-list/services/books-service.js"></script>
    <script src="./assets/scripts/app/books-list/controllers/books-list-ctl.js"></script>
</html>

Thats it and when I browse the index page I can see the books that I define in my “bwServicesMock” module.

sample-books-list

I finished my task without the backend webapi and everything works fine. When the webapi is ready all I need to do is modify services module as below or you can use some sort of config if you like to enable/disable this:


(function(wn,ng){
    "use strict"

    wn.bookWorm = ng.module('bookWorm',['bwServices']);

    // old line: wn.bwServices = ng.module('bwServices',['bwServicesMock']);
    wn.bwServices = ng.module('bwServices',[]);

})(window,angular);

Now our application should work fine and loading books from the webapi.

That’s all for today. Happy coding 🙂

Advertisements

2 thoughts on “Backendless development with AngularJs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s