I want to share with you an instructive story, when I use Room Persistence Library and Data Binding...
Sunday, December 9, 2018
Monday, November 19, 2018
Spring Boot Slack integration
In this tutorial we'll discuss the integration of Slack into a Spring Boot 2 based web application.
Friday, April 20, 2018
HTTP based backend mock for Angular JS
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":
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! :)
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();
// Templates
$httpBackend.whenGET(/home.html$/).passThrough();
$httpBackend.whenPOST(BACKEND_URL + 'getAll').respond(function(method, url, data) {
return [200, allData];
});
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! :)
Tuesday, January 2, 2018
Angular JS + Progressive Web App Service Worker
Nowadays AngularJS come less popular due the release of Angular 2+. But it's still a good choice for those developers, who don't want to work with TypeScript and NodeJS. In this tutorial I want to show you how to create an app, which is fully PWA friendly.
Thursday, December 7, 2017
Modify dynamically the mobile browser's navigation bar color with jQuery
In this very sort tutorial we'll learn how to change the mobile browser's navigation bar color with jQuery.
Wednesday, December 6, 2017
Minimize CSS & JS resources with cssjs-minifier
In this article I'll introduce to you one of my newest app called cssjs-minifier. I developed it for myself first, but then I make it open source through GitHub for helping other web developers.
Mini-http-server for local Angular JS & other framework web development
In this article I'll introduce to you one of my newest app called mini-http-server. I developed it for myself first, but then I make it open source through GitHub for helping other Angular JS ( or other JS framework) developers.
Subscribe to:
Posts (Atom)
Configure and use VSCode for Java web development
Embarking on Java web development often starts with choosing the right tools that streamline the coding process while enhancing productivity...
-
Angular is a robust, front-end framework widely used for building dynamic web applications. Developed and maintained by Google, Angular prov...
-
NetBeans is one of the most popular development IDE for Java developers. But it can be used for many other technologies: C/C++, PHP and web...
-
Embarking on Java web development often starts with choosing the right tools that streamline the coding process while enhancing productivity...
