Interrogation du serveur avec AngularJS

Question

J'essaie d'apprendre AngularJS. Ma première tentative pour obtenir de nouvelles données toutes les secondes a fonctionné :

'use strict';

function dataCtrl($scope, $http, $timeout) {
    $scope.data = [];

    (function tick() {
        $http.get('api/changingData').success(function (data) {
            $scope.data = data;
            $timeout(tick, 1000);
        });
    })();
};

Lorsque je simule un serveur lent en faisant dormir le thread pendant 5 secondes, il attend la réponse avant de mettre à jour l'interface utilisateur et de définir un autre délai d'attente. Le problème se pose lorsque je réécris ce qui précède pour utiliser les modules Angular et DI pour la création de modules :

'use strict';

angular.module('datacat', ['dataServices']);

angular.module('dataServices', ['ngResource']).
    factory('Data', function ($resource) {
        return $resource('api/changingData', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    });

function dataCtrl($scope, $timeout, Data) {
    $scope.data = [];

    (function tick() {
        $scope.data = Data.query();
        $timeout(tick, 1000);
    })();
};

Cela ne fonctionne que si la réponse du serveur est rapide. S'il y a un délai, il envoie une demande par seconde sans attendre de réponse et semble vider l'interface utilisateur. Je pense que je dois utiliser une fonction de rappel. J'ai essayé :

var x = Data.get({}, function () { });

mais j'ai obtenu une erreur : "Error : destination.push is not a function" Ceci était basé sur la documentation pour $resource mais je n'ai pas vraiment compris les exemples qui s'y trouvent.

Comment faire pour que la deuxième approche fonctionne ?

Answer 1

Vous devriez appeler le tick dans la fonction de rappel pour query .

function dataCtrl($scope, $timeout, Data) {
    $scope.data = [];

    (function tick() {
        $scope.data = Data.query(function(){
            $timeout(tick, 1000);
        });
    })();
};

Answer 2

Les versions plus récentes d'angular ont introduit Intervalle qui fonctionne encore mieux que $timeout pour l'interrogation du serveur.

var refreshData = function() {
    // Assign to scope within callback to avoid data flickering on screen
    Data.query({ someField: $scope.fieldValue }, function(dataElements){
        $scope.data = dataElements;
    });
};

var promise = $interval(refreshData, 1000);

// Cancel interval on page changes
$scope.$on('$destroy', function(){
    if (angular.isDefined(promise)) {
        $interval.cancel(promise);
        promise = undefined;
    }
});