CODEWITHSUNDEEP
angularjsionic-framework
arun kamboj
arun kamboj

Reputation: 1315

How to manage data offline and online in ionic

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

Upvotes: 0

Views: 401

Answers (1)

null
null

Reputation: 7926

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:

  1. Grab the articles from the local storage and assign it to a $scope variable (this can be undefined)
  2. Request the articles as normal from the server
  3. 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.

Upvotes: 2

Related Questions