Question

我使用外部Wordpress Rest API作为我的Ionic应用程序的内容。

这可以从我的Wordpress网站提供最多500页。如果用户在访问我的应用时无法访问互联网。有没有办法在我进行App构建之前填充Apps缓存中的所有内容，这样就会有一些内容可供每个页面查看。

那么也许以后当他们上网时可以更新该页面？

Answer 1

首先创建服务

//设置缓存'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 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   
        }

        }
 }
])

在Ionic App中将数据存储在缓存中

2 个答案: