एंगुलरजेएस के साथ सर्वर मतदान

Question 1

मैं AngularJS सीखने की कोशिश कर रहा हूं। हर दूसरे काम के लिए नया डेटा प्राप्त करने का मेरा पहला प्रयास:

'use strict';

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

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

जब मैं 5 सेकंड के लिए थ्रेड को सोते हुए धीमे सर्वर का अनुकरण करता हूं तो यह यूआई को अपडेट करने से पहले प्रतिक्रिया का इंतजार करता है और दूसरा टाइमआउट सेट करता है। समस्या यह है कि जब मैं मॉड्यूल निर्माण के लिए कोणीय मॉड्यूल और DI का उपयोग करने के लिए ऊपर लिखा था:

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

यह केवल तभी काम करता है जब सर्वर रिस्पांस तेज हो। अगर इसमें कोई देरी होती है, तो यह 1 प्रतिक्रिया के लिए इंतजार किए बिना 1 अनुरोध का अनुरोध करता है और यूआई को स्पष्ट करता है। मुझे लगता है कि मुझे कॉलबैक फ़ंक्शन का उपयोग करने की आवश्यकता है। मैंने कोशिश की:

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

लेकिन एक त्रुटि मिली: "त्रुटि: डेस्ट.पश एक फ़ंक्शन नहीं है" यह $ संसाधन के लिए डॉक्स पर आधारित था लेकिन मैं वास्तव में वहां के उदाहरणों को नहीं समझ पाया।

मैं दूसरे दृष्टिकोण को कैसे काम करूं?

Question 2

आपको tickकॉलबैक में फ़ंक्शन को कॉल करना चाहिए query।

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

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

Question 3

कोणीय के अधिक हाल के संस्करणों ने $ अंतराल पेश किया है जो सर्वर मतदान के लिए $ समय से भी बेहतर काम करता है ।

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;
    }
});

Question 4

यहाँ पुनरावर्ती मतदान का उपयोग कर मेरा संस्करण है। इसका मतलब है कि यह अगली टाइमआउट शुरू करने से पहले सर्वर की प्रतिक्रिया का इंतजार करेगा। इसके अलावा, जब कोई त्रुटि होती है तो वह मतदान जारी रखेगा लेकिन एक अधिक आराम से मनोर में और त्रुटि की अवधि के अनुसार।

डेमो यहाँ है

यहाँ इसके बारे में और लिखा गया है

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope, $http, $timeout) {

    var loadTime = 1000, //Load the data every second
        errorCount = 0, //Counter for the server errors
        loadPromise; //Pointer to the promise created by the Angular $timout service

    var getData = function() {
        $http.get('http://httpbin.org/delay/1?now=' + Date.now())

        .then(function(res) {
             $scope.data = res.data.args;

              errorCount = 0;
              nextLoad();
        })

        .catch(function(res) {
             $scope.data = 'Server error';
             nextLoad(++errorCount * 2 * loadTime);
        });
    };

     var cancelNextLoad = function() {
         $timeout.cancel(loadPromise);
     };

    var nextLoad = function(mill) {
        mill = mill || loadTime;

        //Always make sure the last timeout is cleared before starting a new one
        cancelNextLoad();
        $timeout(getData, mill);
    };


    //Start polling the data from the server
    getData();


        //Always clear the timeout when the view is destroyed, otherwise it will   keep polling
        $scope.$on('$destroy', function() {
            cancelNextLoad();
        });

        $scope.data = 'Loading...';
   });

Question 5

हम $ अंतराल सेवा का उपयोग करके आसानी से मतदान कर सकते हैं। यहाँ $ अंतराल के बारे में विस्तार से दस्तावेज दिया गया है
https://docs.angularjs.org/api/ng/service/$interval $ interval का उपयोग करने में
समस्या यह है कि यदि आप $ http सर्विस कॉलिंग या सर्वर इंटरैक्शन कर रहे हैं और यदि $ अंतराल से अधिक समय देरी हो रही है तब आपके एक अनुरोध पूरा होने से पहले, यह एक और अनुरोध शुरू करता है।
समाधान:
1. पोलिंग को सर्वर से सिंगल बिट या लाइटवेट जोंस जैसी सरल स्थिति प्राप्त होनी चाहिए ताकि आपके निर्धारित अंतराल समय से अधिक समय न लगे। आपको इस समस्या से बचने के लिए अंतराल के समय को उचित रूप से परिभाषित करना चाहिए।
2. किसी भी तरह से यह अभी भी किसी कारण से हो रहा है, आपको किसी अन्य अनुरोध को भेजने से पहले एक वैश्विक ध्वज की जांच करनी चाहिए जो पिछले अनुरोध समाप्त हो गया है या नहीं। यह उस समय अंतराल को याद करेगा, लेकिन यह समय से पहले अनुरोध नहीं भेजेगा।
इसके अलावा अगर आप थ्रेशोल्ड वैल्यू सेट करना चाहते हैं तो कुछ वैल्यू के बाद किसी भी तरह से पोलिंग सेट की जानी चाहिए तो आप इसे निम्न तरीके से कर सकते हैं।
यहाँ काम कर रहा उदाहरण है। यहां विस्तार से बताया

angular.module('myApp.view2', ['ngRoute'])
.controller('View2Ctrl', ['$scope', '$timeout', '$interval', '$http', function ($scope, $timeout, $interval, $http) {
    $scope.title = "Test Title";

    $scope.data = [];

    var hasvaluereturnd = true; // Flag to check 
    var thresholdvalue = 20; // interval threshold value

    function poll(interval, callback) {
        return $interval(function () {
            if (hasvaluereturnd) {  //check flag before start new call
                callback(hasvaluereturnd);
            }
            thresholdvalue = thresholdvalue - 1;  //Decrease threshold value 
            if (thresholdvalue == 0) {
                $scope.stopPoll(); // Stop $interval if it reaches to threshold
            }
        }, interval)
    }

    var pollpromise = poll(1000, function () {
        hasvaluereturnd = false;
        //$timeout(function () {  // You can test scenario where server takes more time then interval
        $http.get('http://httpbin.org/get?timeoutKey=timeoutValue').then(
            function (data) {
                hasvaluereturnd = true;  // set Flag to true to start new call
                $scope.data = data;

            },
            function (e) {
                hasvaluereturnd = true; // set Flag to true to start new call
                //You can set false also as per your requirement in case of error
            }
        );
        //}, 2000); 
    });

    // stop interval.
    $scope.stopPoll = function () {
        $interval.cancel(pollpromise);
        thresholdvalue = 0;     //reset all flags. 
        hasvaluereturnd = true;
    }
}]);