Speichern von Daten im Cache in einer Ionic App

Question

Ich verwende eine externe Wordpress Rest API als Inhalt für meine Ionic App.

Dies bietet bis zu 500 Seiten Fütterung von meiner Wordpress-Website. Wenn ein Benutzer keinen Internetzugang hat, wenn er auf meine App zugreift. Gibt es eine Möglichkeit, den gesamten Inhalt im Apps-Cache zu füllen, bevor ich meinen App-Build ausführe, so dass für jede Seite etwas Inhalt angezeigt wird.

Dann vielleicht später, wenn sie Internetzugang zurück erhalten, kann diese Seite aktualisiert werden?

Answer 1

'myCache' Set-up Wenn Ihr Ziel ist clientseitig zu speichern und persistent Daten können Sie nicht die $cacheFactory verwenden, die nur die Daten für die aktuelle Sitzung zwischenspeichert.

Sie können Daten in localStorage speichern.

so etwas wie dieses Fabrikat:

Fabrik

.factory('Content', ['$http', Content]) 

function Content($http) { 

    function getcontent(callback, url) { 
     var articles = []; 
     var article = {}; 
     $http.get(url).success(function(response) { 
      if (response.content[0].length > 0) { 
       for (var i = 0; i < response.content[0].length; i++) { 
        article = { 
         title:response.content[0][i].title, 
         subtitle:response.content[0][i].subtitle 
        } 
        articles.push(article); 
       } 
      } else { 
       //  
      } 
     }).error(function() { 
      //   
     }).then(function() { 
      callback(articles); 
     });; 
    } 
    return { 
     getcontent: getcontent 
    } 
} 

-Controller

.controller('ContentCtrl', ['$scope', '$http', '$timeout', 'Content', '$localStorage', 
    function($scope, $http, $timeout, Content, $localStorage) { 

     $scope.showContent = function() { 

       var url = WordPressUrl; 
       $timeout(function() { 
        Content.getcontent(function(data) { 
         $scope.getcontent = data; 
         var contentList = []; 
         data.forEach(function(localy) { 
          var oneArticle = { 
           title: localy.title, 
           subtitle: localy.subtitle 
          } 
          contentList.push(oneArticle); 
         }); 
         window.localStorage.setItem("ContentLocaly", JSON.stringify(contentList)); 
         // $localStorage.message = localStorage["ContentLocaly"]; 
        }, url); 
       }, 1000); 
     } 

      // $scope.showContent(); 

    } 
]) 

Dann Sie es in anderen Controllern verwenden können.

 $scope.LocalyFeed = function() { 
      $scope.Wordpress = JSON.parse(localStorage["ContentLocaly"]); 
      console.log($scope.Wordpress); 
     // return $scope.Wordpress; 
     }; 

Für Internetverbindung Überprüfung können Sie so etwas wie dies machen.

Fabrik

.factory('checkInternet', function() { 
    return function checkInternet() { 
     var haveInternet= true; 
     if (window.cordova) { 
      if (window.Connection) { 
       if (navigator.connection.type == Connection.NONE) { 
        haveInternet= false; 
       } 
      } 
     } 
     return haveInternet; 
    }; 
}) 

-Controller

.controller('ExampleCtrl', ['$scope', '$http','checkInternet', 
    function($scope, $http, checkInternet) { 

     $scope.showSomething = function() { 
     var haveInternet= checkInternet(); 
     if (haveInternet== true) { 
     // do something 
     } else { 
     // do something else 
     } 

     } 
} 
]) 

Answer 2

erstellen Service ersten

// den Cache

myApp.factory('myCache', function($cacheFactory) { 
     return $cacheFactory('myData'); 
}); 

// in Controller

myApp.controller('myController', ['$scope', 'myCache', 

function ($scope, myCache) { 
    var cache = myCache.get('myData'); 

    if (cache) { // If there’s something in the cache, use it! 
    $scope.variable = cache; 
    } 
    else { // Otherwise, let’s generate a new instance 
    myCache.put(‘myData’, 'This is cached data!'); 
    $scope.variable = myCache.get('myData'); 
    } 
} 

]); 

Answer 3

hinzufügen " cache : true," in Ihrem app.js wie folgt aus:

.state('app.yourPage', { 
    cache : true, 
    url: "/yourPage", 
    views: { 
      'menuContent': { 
      templateUrl: "templates/yourPage.html", 
      controller: 'YourPageCtrl' 
     } 
    } 
})