tutorial HttpInterceptor और AngularJS 1.1.5 का उपयोग कर लोडिंग स्पिनर को कार्यान्वित करना




angularjs tutorial pdf (3)

"प्रतिक्रियाइंटरसेप्टर्स" को बहिष्कृत किया गया था। "इंटरसेप्टर" ने इसे पूर्वावलोकन संस्करण में कई संवर्द्धन के साथ बदल दिया। मेरे सिर के ऊपर से मुझे याद नहीं है कि कौन सा संस्करण है। इस पर दस्तावेज़ीकरण दुर्लभ है, इसलिए आप शायद स्रोत कोड की जांच करने से सबसे अच्छे हैं।

परिवर्तन की बात इस तरह दिखती है:

$httpProvider.interceptors.push(function($q, $rootScope) {
  return {
     'request': function(config) {
        // intercepts the request
     },
     'response': function(response) {
       // intercepts the response. you can examine things like status codes
     },
     'responseError': function(response) {
       // intercepts the response when the response was an error
     }
  }
});

कोणीय स्रोत में आपको $ HttpProvider फ़ंक्शन में "* # इंटरसेप्टर" के अंतर्गत दस्तावेज़ मिलेगा। मैंने जो पोस्ट किया है उसके समान ही एक उदाहरण उपयोग है।

https://code.i-harness.com

मुझे एसओ पर यहां http / संसाधन कॉल के लिए लोडिंग स्पिनर का एक उदाहरण मिला है:

जैसा कि आप कार्यान्वयन कार्यों को देख सकते हैं (AngularJS 1.0.5 का उपयोग करके)। हालांकि यदि आप स्रोतों को AngularJS 1.1.5 में बदलते हैं। उदाहरण अब और काम नहीं करता है।

मैंने सीखा कि $httpProvider.responseInterceptors 1.1.5 में बहिष्कृत है। इसके बजाय किसी को $httpProvider.interceptors उपयोग करना चाहिए

दुर्भाग्य से प्लंबर में उपरोक्त स्ट्रिंग को प्रतिस्थापित करने से समस्या हल नहीं हुई। क्या किसी ने कभी भी AngularJS 1.1.5 में HttpInterceptor का उपयोग करके ऐसे लोडिंग स्पिनर को किया है?

आपकी सहायताके लिए धन्यवाद!

माइकल


प्रदान / स्वीकृत समाधान ठीक है अगर आप अपने समाधान में JQuery शामिल करना चाहते हैं , जो AngularJS टीम आगे बढ़ने के खिलाफ सिफारिश कर रही है। element.show/.hide Angular के JQLite में समर्थित नहीं हैं .... इसलिए गैर-jquery सत्र में चलाने के लिए निम्न रिफैक्टर आवश्यक हैं:

'छुपा' वर्ग जोड़ने के लिए HTML तत्व बदलें

<div id="loaderDiv" loader class="hidden">
     <img src="Content/images/yourgif.gif" class="ajax-loader" />
</div>

छिपे हुए वर्ग को अपने सीएसएस में जोड़ें:

.hidden{display:none !important}

और इस प्रकार निर्देश को ट्विक करें:

(function() {
    'use strict';

    angular
        .module('your_app')
        .directive('yourSpinner', yourSpinner);

    yourSpinner.$inject = ['$rootScope'];

    function yourSpinner($rootScope) {
       return function($scope, element, attrs) {
           $scope.$on("loader_show", function () {
               if (element.hasClass("hidden")) {
                   element.removeClass("hidden")
               }
            });
            return $scope.$on("loader_hide", function () {
                if(!element.hasClass("hidden")){
                    element.addClass("hidden")
                }
            });
        }
    }

})();

कारखाना ठीक है जैसा है।


स्टीव के संकेत के लिए धन्यवाद मैं लोडर को लागू करने में सक्षम था:

इंटरसेप्टर:

.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {

            numLoadings++;

            // Show loader
            $rootScope.$broadcast("loader_show");
            return config || $q.when(config)

        },
        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return response || $q.when(response);

        },
        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

निर्देशक:

.directive("loader", function ($rootScope) {
    return function ($scope, element, attrs) {
        $scope.$on("loader_show", function () {
            return element.show();
        });
        return $scope.$on("loader_hide", function () {
            return element.hide();
        });
    };
}
)

सीएसएस:

#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;
}

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}

HTML:

<div id="loaderDiv" loader>
    <img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/>
</div>






angularjs