Question

我是Angular的新手，我尝试创建一个应用程序，每隔5分钟从动态生成的JSON文件中提取数据，并使用新数据更新视图。 JSON文件包含网站的所有数据，即滑块和事件列表的数据。我已经读过全局数据可以存储在$ rootScope中，或者使用.service或.factory来检索和提供。我尝试了不同的方法但没有成功，我迷失了方向。定期从api中为整个应用程序提取数据，存储并使用它的最佳方法是什么？

目前我有这段代码：

app.factory("Poller", function Poller($http, $timeout){
    var data = {'slider' : [], 'activities' : []};
    var getData = function(){
        $http.get('http://example.com/json.php')
            .then(function(r){
                data = r.data;
            });
        $timeout(getData, 1000*60*5);
    }
    getData();

    return{
        data: data
    }
});

app.controller('ListController', function(Poller){
    this.activities = Poller.data.activities;
});

Answer 1

所以这里的问题看起来你已经在getData()工厂内定义了函数Poller，该工厂发出了ajax请求，但没有将它绑定到工厂返回对象内的键。

尝试添加此内容，

return{
    data: data,
    getData: getData
}

然后在返回的块之前删除您拥有的getData()。

现在我觉得要根据应用程序的设置，如果要实现长轮询效果，则应将getData()附加到始终存在的某个顶级控制器中的变量，以便您可以调用{ {1}}定期使用getData()。

说到$timeout，您应该在$timeout之外提取$timeout，以便函数本身只生成ajax请求。更加模块化，单一责任的设计，如果您需要，可以使您的应用程序的其他区域更有用。

如果您想在每五分钟完成一次ajax请求后更新信息，那么您应该查看getData()和$broadcast，您基本上可以告诉整个Angular应用程序一些rootScope变量或服务已经改变，他们会相应更新。在调用$rootScope函数的控制器中，您需要在ajax请求之后设置某种回调。

Answer 2

我认为你正在寻找这样的东西：

参见 plnkr

app.factory("Poller", function Poller($http, $interval){
    var data = {
        'newData': {
            'one' : '',
            'key' : ''
        },
        'fetchCount': 0
    };

    var getData = function() {
        data.fetchCount += 1;
        $http.get('http://echo.jsontest.com/key/value/one/two')
            .then(function(response){
                data.newData = response.data;
            });
    };

    var loopGetData = function() {
        $interval(getData, 5000);
    };

    loopGetData();

    return{
        data: data,
    };
});

app.controller('ListController', function($scope, Poller){
    $scope.activities = {'one' : '', 'key' : ''};

    $scope.Initialize = function () {
        $scope.$watch(function () { return Poller.data.newData; },
        function(newValue, oldValue) {
            if (newValue !== oldValue) {
                $scope.activities = newValue;
            }
        });
    };

    $scope.Initialize();
});

app.controller('CountController', function($scope, Poller){
    $scope.fetchCount = 0;

    $scope.Initialize = function () {
        $scope.$watch(function () { return Poller.data.fetchCount; },
        function(newValue, oldValue) {
            if (newValue !== oldValue) {
                $scope.fetchCount = newValue;
            }
        });
    };

    $scope.Initialize();
});

在Angular中存储和使用定期更新数据的最佳方法

2 个答案: