Category Archives: angular

Using LocalStorage for client side caching

I have a need to get a list of all production devices and place them on a map. This data takes about 12 – 16 seconds to load. This means that if a user wants to view the map on page load they are out of luck for a few seconds. So what I do is allow the wait to happen once and then cache the data in local storage. This data is updated every 5 minutes. This allows the user to have at least the last fetch of data locally and will display a map right away.

Here is my angular service for doing this:

//Angular service that gets a list of devices
dashboardApp.service('deviceService', function() {
    //Set self to this so we dont lose scope
    var self = this;
    self.devices = new Array();
    //Go and get the latest device list - Takes a long time!!!!
    this.promise = $.getJSON('devicelist');
    //Since the last call takes a long time, I toss it in local storage and grab the cached version from there until the new list comes in.
    if (localStorage.getItem("devicelist")) {
        //I store json as text and need to parse it to make it a JS object
        self.devices = JSON.parse(localStorage.getItem("devicelist"));
    }
    //When the promise (ajax call) is comeplte then write the data to local storage for next time and set the var to the new list
    $.when(this.promise).then(function(data) {
        self.devices = data;
        localStorage.setItem("devicelist", JSON.stringify(data));
    });
    //Repeat every 5 minutes.
    setInterval(function() {
        $.getJSON('devicelist', function(data) {
            self.devices = data;
            localStorage.setItem("devicelist", JSON.stringify(data));
        });
    }, 300000)
});
Advertisements
Tagged , , ,

Angular try to avoid $scope.$apply() inprog error

Sometimes Angular does not pick up deep variable changes and needs a kick to do so. We have $scope.$apply() available to use but sometimes it is running already and you get an error when using it. Here is what I found from here and it works.

My Modified Version:

if(!$scope.$$phase) {
 $scope.$apply();
 }
Tagged ,

Polling VS Websockets – 1 Thing to consider

In a meeting today, A Co-Worker mentioned that Basecamp uses polling vs websockets because of stability. I mentioned that I might be converting one of my websockets to polling because it goes down sometimes.

Here is what I learned:

If your server fails for whatever reason the websocket will die and you will have to restart the connection. Now, this isn’t that bad as long as your program never crashes but if there is an intermittent db connection problem or some other unhandled error, the socket will fail and you will need a client side watcher to get it going again.

Polling works in this situation because what is down now may be up in 30 seconds and it will just keep polling even if the last one failed.

Here is a polling example:

 

self.poll = function() {
setTimeout(function() {
$.ajax({
url: "MY_URL",
success: function(data) {
self.alerts = data;
},
dataType: "json",
complete: function (){ self.poll(); }
});
}, 15000);
}

BTW: Using an angular service vs writing this code in multiple controllers made the conversion take less than 5 minutes.

Tagged , , ,