Lunch manager with angularJS & nodeJS
Some days ago I created a simple script just to try out some new techniques with angularJS in combination with nodeJS. The idea was to create a lunch manager where people can sign up for a specific day, that they are in for lunch at a specific time. There should be no complex signup since I was not expecting any spam or similar behavior.
I had the idea of realising this script with a minimal footprint so that it is easy to deploy and easy to run on any Linux based server. This leads to the idea of creating a one pager with most of the Javascript files hosted on a CDN and only the absolute minimum should be hosted on my server.
##Setting up the front-end
As a front-end I chose the responsive bootstrap framework from Twitter. The dynamic part should be realized with angular. The whole website is only one controller, called FoodCtrl
.
<body ng-controller="FoodCtrl as f">
angular.module('foodApp', [])
.controller('FoodCtrl', ['$http', function($http) {
var food = this;
food.alreadyIn = false;
food.pendingRequest = false;
food.name = '';
food.namesList = [];
food.signup = function(time) {
food.pendingRequest = true;
$http.post('/lunch/signup', {name: food.name, time: time})
.then(function (response) {
console.log(response);
notie.alert(1, 'Success, you\'re in for today, ' + food.name + '!', 1.5);
food.alreadyIn = true;
food.pendingRequest = false;
}, function (response) {
notie.alert(3, 'Error ' + response.status, 5);
food.pendingRequest = false;
});
};
fetch_updates($http, food, 0, false);
refetch_updates($http, food, 0);
}])
.directive('person', function() {
return {
template: '{ {n.name}}@{ {n.time}}'
};
});
ng-cloak
on any HTML tag which should be hidden at first because it contains i.e. if-expressions which are evaluated later.
Adding only ng-cloak
alone is only half of the solution because angular adds CSS tags to all elements with this directive. But since angular is loaded just before the closing body
tag, hiding of the elements is executed often too late in time. Especially, the slower the computer, the more important it is to hide these elements just from the beginning. As a workaround I chose the following approach. Just add a style in the head part which hides ng-cloak
and this style is removed later automatically by angular:
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
function fetch_updates($http, food, errorCounter, recursive) {
console.log('fetching names...');
$http.get('/lunch/people.json')
.then(function(response) {
if(food.namesList.length < response.data.length && recursive) {
notie.alert(4, 'Someone else signed up!', 1.5);
}
food.namesList = response.data;
if (recursive) {
refetch_updates($http, food, 0);
}
},
function(response) {
notie.alert(3, 'Error while fetching other people', 2);
refetch_updates($http, food, errorCounter + 1)
});
};
function refetch_updates($http, food, errorCounter) {
if (errorCounter < 5) {
var timeout = (errorCounter + 1) * 2000;
console.log(timeout);
setTimeout(function () {
fetch_updates($http, food, errorCounter, true);
}, timeout);
}
else {
notie.confirm('Error loading data. Do you want to retry?', 'Yes', 'No', function () {
refetch_updates($http, food, 0);
});
}
}
refetch_updates
checks the errorCounter
. If it is below 5, it calls fetch_updates
after a timeout of the error count times two seconds. The method fetch_updates
calls refetch_updates
again. If the request fails more than five times, the user is asked, if he wants to continue fetching updates or not. If yes, the errorCounter
is reset to zero and the recursive call begins again. The advantage of this method is, that I didn’t have to implement any other server than the existing nodeJS express server.
##Conclusion
From the idea to the working script it took me about two hours, if I substract the setup time of nodeJS and Apache, which only serves as a proxy this time. If you want to download the whole project, you can check out my git repository.