angularjs - Ionic アプリのキャッシュにデータを保存する

Question

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

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

その後、後でインターネットにアクセスできるようになったら、そのページを更新できますか?

Answer 1

最初にサービスを作成する

// キャッシュ 'myCache' を設定します</p>

 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 2

クライアント側の永続的なデータを保存することが目標の場合、現在のセッションのデータをキャッシュするだけの$cacheFactoryは使用できません。

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

次のようにします。

工場

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

    }
])

その後、他のコントローラーで使用できます。

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

        }
 }
])