Developer tutorials: 2018

AngularJS based frontend applications consume their data mostly from a backend system. But in some cases a working backend is not available for a frontend developer. Fortunately the Angular JS dev team provides a package for this situations: the ngMock. This package is generally used for test purposes, but it's easily to use for mocking as well. The corresponding documentation can be found here: https://docs.angularjs.org/api/ngMock This guide not covers how to install it, you can find it in the documentation of ngMock.

Ok, now I assume you installed ngMocks, and you want to start work with it. First, let's create a basic application, which'll consumes and displays recipes from a currently not existing backend. Create an empty, AngularJS compatible HTML file, name it "index.html".

<!doctype html>
<html lang="en" ng-controller="RecipeController as vm">
      <head>
       <meta charset="UTF-8" />
        <title>My recipes</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-mocks.js"></script>
        <script>
            var Config = {
                mockEnabled : false
            };
        </script>
        <script src="js/app.js"></script>
        <base href="{{vm.contextPath}}">
      </head>
      <body>
       My recipes:
           <ul>
               <li ng-repeat="item in vm.recipeList">{{item.id}}. {{item.name}}</li>
           </ul>
      </body>
</html>

You can notice there is a highlighted part. This variable'll manage our mocks to be turned on or off. Now we turned off. Create an app.js in a folder called "js".

var app = angular.module("app", [])

.constant("BACKEND_URL", "http://localhost:8080/")
.constant("CONTEXT_PATH", "/")
.service("BackEndService", function($http, $q, BACKEND_URL) {
        var vm = this;

         vm.getAll = function() {
            return $http.post(BACKEND_URL + "get_all");
        };

})

.controller('RecipeController', function(BackEndService, CONTEXT_PATH) {

   var vm = this;
   vm.recipeList = [];
   vm.contextPath = CONTEXT_PATH;

BackEndService.getAll().then(function(response) {
      vm.recipeList = response.data;
}, function(response) {
      console.error("error", response);
});

});

var runMock = function($httpBackend, BACKEND_URL) {
    var allData = [{id:1, "name":"Onion soup"}, {id:2, "name":"Hungarian goulash soup"}];

    $httpBackend.whenGET(/home.html$/).passThrough();
    $httpBackend.whenPOST(BACKEND_URL + 'get_all').respond(function(method, url, data) {
        return [200, allData];
    });

};

app.run(function($httpBackend, BACKEND_URL) {
    console.debug("Application run", "mock = " + Config.mockEnabled);
    if(Config.mockEnabled === true) {
    }
});

angular.element(document).ready(function() {
    if(Config.mockEnabled === true) {
        angular.module('app').requires.push('ngMockE2E');
    }
    angular.bootstrap(document, ['app']);
});
Ok, try this code, how it works!

As you can see in the developer console, there's no response from the backend, which is correct, because we don't have a backend for our frontend. Now, we'll extend our code with some mocks. Open the app.js again, and write the following lines after the "app":

var runMock = function($httpBackend, BACKEND_URL) {

         var allData = [{id:1, "name":"Onion soup"}];
        // Templates
        $httpBackend.whenGET(/home.html$/).passThrough();

      $httpBackend.whenPOST(BACKEND_URL + 'getAll').respond(function(method, url, data) {
            return [200, allData];
        });

};

Modify the Config.mockEnabled variable in the index.html:

<!doctype html>
<html lang="en" ng-controller="RecipeController as vm">
      <head>
        <meta charset="UTF-8" />
        <title>My recipes</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-mocks.js"></script>
        <script>
            var Config = {
                mockEnabled : true
            };
        </script>
        <script src="js/app.js"></script>
        <base href="{{vm.contextPath}}">
      </head>
      <body>
        My recipes:
            <ul>
                <li ng-repeat="item in vm.recipeList">{{item.id}}. {{item.name}}</li>
            </ul>
      </body>
</html>

Try to open again the webapp in your browser:

This error happened, because there's no incoming http post request.

Finally, extend the app.run with the recently added function:
app.run(function($httpBackend) {
    console.debug("Application run", "mock = " + Config.mockEnabled);
    if(Config.mockEnabled === true) {
        runMock($httpBackend, BACKEND_URL);
    }
});

Now let's try again. You'll see the list in the screen.Thats all! :)

Developer tutorials

Sunday, December 9, 2018

"error: cannot find symbol class DataBindingComponent" happens when wrong return type added to Room insert method

Monday, November 19, 2018

Spring Boot Slack integration

Friday, April 20, 2018

HTTP based backend mock for Angular JS

Tuesday, January 2, 2018

Angular JS + Progressive Web App Service Worker

Configure and use VSCode for Java web development

Pages

Search This Blog