In the previous article we discussed the One Time Workers, and the basics of WorkManager. In this tutorial we'll see how to create PeriodicWorkerRequest. We'll use the same project which is used in the previous part of this tutorial.
Wednesday, March 13, 2019
Android WorkManager in practice Part I: One Time Workers
WorkManager is an API to schedule deferrable, asyncronous jobs. This is one of the JetPack's best component and it's released only one week ago. Now I want to introduce it in a nutshell. To be honest, I've been waiting for a library like this FOR YEARS.
Sunday, February 10, 2019
Checking your Android application code with Lint
In Android application development it's a standard to check and improve the code and it's quality of your app. You can easily do it with the Android Studio's built-in function, Lint.
Monday, February 4, 2019
The "inconsistent layout" issue generated by Android Studio :D
I think this is funny, because the upcoming Lint issue is generated by the Android Studio, so now the question is, why the Android Studio generates a wrong code?
Sunday, December 9, 2018
"error: cannot find symbol class DataBindingComponent" happens when wrong return type added to Room insert method
I want to share with you an instructive story, when I use Room Persistence Library and Data Binding...
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! :)
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...
