How to manage data offline and online in ionic - angularjs

Question

I am working on blogging app . i want to save article list on SqlLite as well. I need to fetch all blogs in once. ( having more than 2000) blogs .
following is my controller code.
var promise= userService.getArticles();
promise.then(function(data) {
$scope.articles = data;
}, function(error) {
console.log('Failed for some reason:' + error);
});
and factory code is
angular.module('starter.controllers')
.factory('userService', function($http,$q) {
var articleList = [];
return {
getArticles : function() {
var deferred = $q.defer();
$http({
url: "https://www.website.com/getallinfo?access_token=94529e5d",
data: { starLimit: 0, endLimit: 150,created_date: 0 },
method: 'POST',
withCredentials: true,
}).success(function (data, status, headers, config) {
deferred.resolve(data);
}).error(function (err) {
deferred.reject(error); //
})
return deferred.promise;
},
}
which is returing result.
I need to save that data in sqllite as well. Also i want to show data as offline.
I am not sure how to proceed this. Kindly help.
Thanks

Answer 1

Most offline applications use the local storage as a cache and updating that if there's a connection available.
An easy way to do this is to:
Grab the articles from the local storage and assign it to a $scope variable (this can be undefined)
Request the articles as normal from the server
On a successful callback overwrite the local storage and reassign the scope variable.
Exampe code:
// The article service
myApp.factory('articles', function($q, $timeout, $window, loremIpsum) {
// Initialize by grabbing the articles from the local cache (if any)
var items = angular.fromJson($window.localStorage.getItem('myArticles'));
// Construct our service
var service = {
items: items,
refresh: function() {
// Sync with the server
var defer = $q.defer();
// For this demo I'm using a timeout (this also allows for some artificial lag).
// Replace this with your $http calls.
$timeout(function() {
// Here I'm generating some total random items that we're resolving
// Also not needed in your app
var c = 100, result = [];
while (c--) {
result.push({
title: loremIpsum.getRandomLine(2),
description: loremIpsum.getRandomLine(15)
});
}
service.items = result;
defer.resolve(result);
// Store the returned result from the server in the local storage
$window.localStorage.setItem('myArticles', angular.toJson(result));
}, 500);
return defer.promise;
}
};
return service;
});
Plunker example can be found here.