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

Question

我是 Angular 新手，我正在尝试创建一个应用程序，该应用程序每 5 分钟从动态生成的 JSON 文件中提取数据，并使用新数据更新 View 。 JSON 文件包含网站的所有数据，即 slider 和事件列表的数据。我读到全局数据可以存储在 $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

我认为您正在寻找这样的东西:

参见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();
});