Ionic Appでキャッシュにデータを保存する

Question

私はIonicアプリのコンテンツとして外部Wordpress Rest APIを使用しています。

これは、私のWordpressサイトから最大500ページのフィードを提供します。ユーザーが自分のアプリにアクセスしているときにインターネットにアクセスできない場合。アプリケーションビルドを行う前に、すべてのページに表示するコンテンツがあるように、アプリケーションキャッシュにすべてのコンテンツを埋め込む方法はありますか？

インターネットアクセスを取得した後、そのページを更新することができますか？

Answer 1

あなたの目標は、クライアント側と永続を格納する場合には、コントローラでデータの場合、現在のセッションのデータをキャッシュするだけの$cacheFactoryは使用できません。

localStorageにデータを保存できます。

工場

.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(); 

    } 
]) 

は、その後、あなたが他のコントローラでそれを使用することができます

.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 
    } 
} 

コントローラー：

はこのような何かをしてください。インターネット接続をチェックするための

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

あなたはこのような何かを行うことができます。

工場

.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('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

最初のサービスを作成します

//キャッシュを設定する 'MyCacheという'

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

//

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

このようなあなたのapp.jsで" cache : true,"を追加します。

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