अंगुलज लोड स्क्रीन ajax अनुरोध पर

Question

Angularjs का उपयोग करते हुए, मुझे ajax अनुरोध पूरा होने तक एक लोडिंग स्क्रीन (एक साधारण स्पिनर) दिखाने की आवश्यकता है। कृपया एक कोड स्निपेट के साथ किसी भी विचार का सुझाव दें।

Comments

stackoverflow.com/questions/15033195/…

— अजय बेनीवाल

angulartutorial.blogspot.in/2014/04/…

— Prashobh

सबसे अच्छा अभ्यास उपयोग कर रहा है $httpProvider.interceptorsक्योंकि यह संभाल सकता है जब अजाक्स अनुरोध शुरू होता है और जब यह समाप्त होता है। यही कारण है कि $watchजब अजाक्स कॉल शुरू होने और समाप्त होने का पता लगाने की आवश्यकता नहीं है।

— फ्रैंक मायट थू

कैसे आप मेरे कारखाने कोणीय-httpshoter की जांच करते हैं , यह आपको लोडर और फ्रीज़िंग यूआई के लिए बेहतर नियंत्रण प्रदान करता है

— सिद्धार्थ

Answer 1

डेटा लोडिंग स्थिति को इंगित करने के लिए एक स्कोप वैरिएबल स्थापित करने के बजाय, यह निर्देश देना बेहतर है कि आपके लिए सब कुछ एक निर्देश है:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

इस निर्देश के साथ, आपको किसी भी लोडिंग एनीमेशन तत्व को 'लोड करने' का गुण देना होगा:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

आपके पास पृष्ठ पर कई लोडिंग स्पिनर हो सकते हैं। उन स्पिनरों को कहां और कैसे लेआउट करना है यह आप पर निर्भर है और निर्देश इसे स्वचालित रूप से आपके लिए चालू / बंद कर देगा।

Comments

यहाँ "लोडिंग" निर्देश दो बार कहा जा रहा है, $ location.path () के साथ। पहले वर्तमान पृष्ठ के साथ और अगले गंतव्य पृष्ठ के साथ। क्या कारण होना चाहिए?

— संजय डी

अति उत्कृष्ट। और यह भी, आप घड़ी पर टॉगल करने के लिए jquery टॉगल का उपयोग कर सकते हैं: elm.toggle (v)। मेरे पास $ टाइमआउट सत्र मॉनिटर है, और मेरे लिए, मुझे स्पिनर को केवल डेढ़ सेकंड के बाद दिखाना होगा। मैं अधिक धीरे-धीरे स्पिनर दिखाने के लिए संक्रमण के साथ एक सीएसएस लागू करूंगा।

— जोआओ पोलो

यदि आपको "elm.show () फ़ंक्शन नहीं है" त्रुटि मिलती है, तो आपको कोणीय लोड करने से पहले jquery जोड़ना होगा।

— morpheus05

आप जिस तरह से गुंजाइश करते हैं। मेरे लिए काम नहीं करता है। मुझे यह करना था कि जिस तरह से jzm करता है (नाम के चारों ओर '' का उपयोग करके और गुंजाइश उपसर्ग को छोड़ कर)। कोई विचार क्यों?

— KingOfHypocrites

क्या होगा अगर मुझे async करने की आवश्यकता है कई अलग-अलग क्षेत्रों को लोड करें?

— वादिम फेरर

Answer 2

यहाँ एक उदाहरण है। यह एक बूल के साथ सरल एनजी-शो विधि का उपयोग करता है।

एचटीएमएल

<div ng-show="loading" class="loading"><img src="...">LOADING...</div>
<div ng-repeat="car in cars">
  <li>{{car.name}}</li>
</div>
<button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>

AngularJS

  $scope.clickMe = function() {
    $scope.loading = true;
    $http.get('test.json')
      .success(function(data) {
        $scope.cars = data[0].cars;
        $scope.loading = false;
    });
  }

बेशक आप लोडिंग बॉक्स HTML कोड को एक निर्देश में स्थानांतरित कर सकते हैं, फिर $ गुंजाइश पर $ घड़ी का उपयोग करें। लोडिंग। कौनसे मामलेमें:

HTML :

<loading></loading>

ANGULARJS प्रत्यक्ष :

  .directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="..."/>LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

PLUNK : http://plnkr.co/edit/AI1z21?p=preview

Comments

जिस तरह से आप गुंजाइश करते हैं। मेरे लिए काम करता है स्वीकृत जवाब दृष्टिकोण नहीं करता है।

— KingOfHypocrites

@jzm इतना बढ़िया समाधान 😊, दुर्भाग्य से इस समाधान के साथ काम नहीं कर रहा है ui-router, पता नहीं क्यों

— मो।

मैंने अपने प्रोजेक्ट में से एक में काम किया, ठीक है, दूसरे प्रोजेक्ट में मुझे लगता है कि भारी अजाक्स अनुरोध के कारण loading=trueसेट नहीं होता है

— अलमनायराब

Answer 3

मैं इसके लिए ngProgress का उपयोग करता हूं ।

अपने HTML में स्क्रिप्ट / सीएसएस फ़ाइलों को शामिल करने के बाद अपनी निर्भरता में 'ngProgress' जोड़ें। एक बार जब आप ऐसा करते हैं, तो आप कुछ ऐसा सेट कर सकते हैं, जो रूट परिवर्तन का पता चलने पर ट्रिगर हो जाएगा।

angular.module('app').run(function($rootScope, ngProgress) {
  $rootScope.$on('$routeChangeStart', function(ev,data) {
    ngProgress.start();
  });
  $rootScope.$on('$routeChangeSuccess', function(ev,data) {
    ngProgress.complete();
  });
});

AJAX अनुरोधों के लिए आप ऐसा कुछ कर सकते हैं:

$scope.getLatest = function () {
    ngProgress.start();

    $http.get('/latest-goodies')
         .success(function(data,status) {
             $scope.latest = data;
             ngProgress.complete();
         })
         .error(function(data,status) {
             ngProgress.complete();
         });
};

बस ऐसा करने से पहले नियंत्रकों की निर्भरता में 'ngProgress' जोड़ना याद रखें। और यदि आप कई AJAX अनुरोध कर रहे हैं, तो अपने AJAX अनुरोधों को 'ngProgress.complete ();' कहने से पहले समाप्त होने पर ट्रैक रखने के लिए मुख्य ऐप स्कोप में एक वृद्धिशील चर का उपयोग करें।

Answer 4

लंबितRequests का उपयोग करना सही नहीं है क्योंकि जैसा कि कोणीय दस्तावेज़ीकरण में उल्लेख किया गया है, यह संपत्ति मुख्य रूप से डीबगिंग उद्देश्यों के लिए उपयोग करने के लिए है।

यदि कोई सक्रिय Async कॉल है, तो यह जानने के लिए मैं एक इंटरसेप्टर का उपयोग करने की सलाह देता हूं।

module.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $rootScope) {
        if ($rootScope.activeCalls == undefined) {
            $rootScope.activeCalls = 0;
        }

        return {
            request: function (config) {
                $rootScope.activeCalls += 1;
                return config;
            },
            requestError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            },
            response: function (response) {
                $rootScope.activeCalls -= 1;
                return response;
            },
            responseError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            }
        };
    });
}]);

और फिर जाँच करें कि सक्रिय घड़ी शून्य है या नहीं, एक $ घड़ी के माध्यम से निर्देश में।

module.directive('loadingSpinner', function ($http) {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="loader unixloader" data-initialize="loader" data-delay="500"></div>',
        link: function (scope, element, attrs) {

            scope.$watch('activeCalls', function (newVal, oldVal) {
                if (newVal == 0) {
                    $(element).hide();
                }
                else {
                    $(element).show();
                }
            });
        }
    };
});

Answer 5

ऐसा करने का सबसे अच्छा तरीका कस्टम निर्देश के साथ प्रतिक्रिया अवरोधकों का उपयोग करना है । और प्रक्रिया को $ rootScope का उपयोग करके पब / उप तंत्र का उपयोग करके और बेहतर बनाया जा सकता है । विधियों पर $ प्रसारण और $ rootScc $ ।

जैसा कि पूरी प्रक्रिया को एक अच्छी तरह से लिखे गए ब्लॉग लेख में प्रलेखित किया गया है , मैं यहां फिर से दोहराने नहीं जा रहा हूं। कृपया अपने आवश्यक कार्यान्वयन के साथ आने के लिए उस लेख को देखें।

Answer 6

इस उत्तर के संदर्भ में

https://stackoverflow.com/a/17144634/4146239

मेरे लिए सबसे अच्छा समाधान है, लेकिन jQuery के उपयोग से बचने का एक तरीका है।

.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      scope.loadingStatus = 'true';
                  else
                      scope.loadingStatus = 'false';
              });
        }
      }
  })

  .controller('myController', function($scope, $http) {
      $scope.cars = [];
      
      $scope.clickMe = function() {
        scope.loadingStatus = 'true'
        $http.get('test.json')
          .success(function(data) {
            $scope.cars = data[0].cars;
            $scope.loadingStatus = 'false';
        });
      }
      
  });

<body ng-app="myApp" ng-controller="myController" ng-init="loadingStatus='true'">
        <loading ng-show="loadingStatus" ></loading>
  
        <div ng-repeat="car in cars">
          <li>{{car.name}}</li>
        </div>
        <button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>
  
</body>

आपको $ (तत्व) .show () बदलने की आवश्यकता है; और (तत्व) .show (); $ गुंजाइश के साथ। लोडिंगस्टैटस = 'सच'; और $ गुंजाइश.लोडिंगस्टैटस = 'गलत';

तत्व की एनजी-शो विशेषता सेट करने के लिए आपको इस चर का उपयोग करने की आवश्यकता है।

Answer 7

टाइपस्क्रिप्ट और कोणीय कार्यान्वयन

आदेश

((): void=> {
    "use strict";
    angular.module("app").directive("busyindicator", busyIndicator);
    function busyIndicator($http:ng.IHttpService): ng.IDirective {
        var directive = <ng.IDirective>{
            restrict: "A",
            link(scope: Scope.IBusyIndicatorScope) {
                scope.anyRequestInProgress = () => ($http.pendingRequests.length > 0);
                scope.$watch(scope.anyRequestInProgress, x => {            
                    if (x) {
                        scope.canShow = true;
                    } else {
                        scope.canShow = false;
                    }
                });
            }
        };
        return directive;
    }
})();

क्षेत्र

   module App.Scope {
        export interface IBusyIndicatorScope extends angular.IScope {
            anyRequestInProgress: any;
            canShow: boolean;
        }
    }  

खाका

<div id="activityspinner" ng-show="canShow" class="show" data-busyindicator>
</div>

CSS
#activityspinner
{
    display : none;
}
#activityspinner.show {
    display : block;
    position : fixed;
    z-index: 100;
    background-image : url('data:image/gif;base64,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') 
    -ms-opacity : 0.4;
    opacity : 0.4;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}

Answer 8

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

         angular.module('mean.system')
  .factory('myRestangular',['Restangular','$rootScope', function(Restangular,$rootScope) {
    return Restangular.withConfig(function(RestangularConfigurer) {
      RestangularConfigurer.setBaseUrl('http://localhost:3000/api');
      RestangularConfigurer.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
        var extractedData;
        // .. to look for getList operations
        if (operation === 'getList') {
          // .. and handle the data and meta data
          extractedData = data.data;
          extractedData.meta = data.meta;
        } else {
          extractedData = data.data;
        }
        $rootScope.$broadcast('apiResponse');
        return extractedData;
      });
      RestangularConfigurer.setRequestInterceptor(function (elem, operation) {
        if (operation === 'remove') {
          return null;
        }
        return (elem && angular.isObject(elem.data)) ? elem : {data: elem};
      });
      RestangularConfigurer.setRestangularFields({
        id: '_id'
      });
      RestangularConfigurer.addRequestInterceptor(function(element, operation, what, url) {
        $rootScope.$broadcast('apiRequest');
        return element;
      });
    });
  }]);

यहाँ निर्देश है:

        angular.module('mean.system')
  .directive('smartLoadingIndicator', function($rootScope) {
    return {
      restrict: 'AE',
      template: '<div ng-show="isAPICalling"><p><i class="fa fa-gear fa-4x fa-spin"></i>&nbsp;Loading</p></div>',
      replace: true,
      link: function(scope, elem, attrs) {
        scope.isAPICalling = false;

        $rootScope.$on('apiRequest', function() {
          scope.isAPICalling = true;
        });
        $rootScope.$on('apiResponse', function() {
          scope.isAPICalling = false;
        });
      }
    };
  })
;

Comments

कोई भी एपीआई प्रतिक्रिया एनीमेशन को मार देगी। आपको अनुरोध के बारे में अतिरिक्त जानकारी संग्रहीत करनी चाहिए - प्रतिक्रिया, और केवल उस प्रतिक्रिया के लिए प्रतिक्रिया करें जो अनुरोध द्वारा प्रारंभ की गई थी।

— Krzysztof Safjanowski

Answer 9

इसे अपने "app.config" में शामिल करें:

 $httpProvider.interceptors.push('myHttpInterceptor');

और इस कोड को जोड़ें:

app.factory('myHttpInterceptor', function ($q, $window,$rootScope) {
    $rootScope.ActiveAjaxConectionsWithouthNotifications = 0;
    var checker = function(parameters,status){
            //YOU CAN USE parameters.url TO IGNORE SOME URL
            if(status == "request"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications+=1;
                $('#loading_view').show();
            }
            if(status == "response"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications-=1;

            }
            if($rootScope.ActiveAjaxConectionsWithouthNotifications<=0){
                $rootScope.ActiveAjaxConectionsWithouthNotifications=0;
                $('#loading_view').hide();

            }


    };
return {
    'request': function(config) {
        checker(config,"request");
        return config;
    },
   'requestError': function(rejection) {
       checker(rejection.config,"request");
      return $q.reject(rejection);
    },
    'response': function(response) {
         checker(response.config,"response");
      return response;
    },
   'responseError': function(rejection) {
        checker(rejection.config,"response");
      return $q.reject(rejection);
    }
  };
});

Answer 10

कोणीय-व्यस्त का उपयोग करें :

अपने एप्लिकेशन / मॉड्यूल के अनुसार cgBusy जोड़ें:

angular.module('your_app', ['cgBusy']);

इसमें अपना वादा जोड़ें scope:

function MyCtrl($http, User) {
  //using $http
  this.isBusy = $http.get('...');
  //if you have a User class based on $resource
  this.isBusy = User.$save();
}

अपने HTML टेम्पलेट में:

<div cg-busy="$ctrl.isBusy"></div>

Answer 11

इसके अलावा, एक अच्छा डेमो है जो दिखाता है कि आप Angularjsअपने प्रोजेक्ट में एनीमेशन का उपयोग कैसे कर सकते हैं ।

लिंक यहाँ है (ऊपरी बाएँ कोने को देखें) ।

यह एक खुला स्रोत है। यहाँ डाउनलोड करने के लिए लिंक है

और यहाँ ट्यूटोरियल के लिए लिंक है ;

मेरा कहना है, आगे बढ़ो और स्रोत फ़ाइलों को डाउनलोड करें और फिर देखें कि उन्होंने स्पिनर को कैसे लागू किया है। हो सकता है कि उन्होंने थोड़ा बेहतर ऑप्रैच इस्तेमाल किया हो। तो, इस परियोजना की जाँच करें।

Answer 12

यहाँ सरल इंटरसेप्टर उदाहरण, मैंने माउस को प्रतीक्षा पर रखा है जब अजाक्स शुरू होता है और अजाक्स समाप्त होने पर इसे ऑटो पर सेट करता है।

$httpProvider.interceptors.push(function($document) {
return {
 'request': function(config) {
     // here ajax start
     // here we can for example add some class or show somethin
     $document.find("body").css("cursor","wait");

     return config;
  },

  'response': function(response) {
     // here ajax ends
     //here we should remove classes added on request start

     $document.find("body").css("cursor","auto");

     return response;
  }
};
});

कोड को एप्लिकेशन कॉन्फिगर में जोड़ा जाना है app.config। मैंने दिखाया कि लोड करने की स्थिति पर माउस को कैसे बदलना है, लेकिन इसमें किसी लोडर सामग्री को दिखाना / छिपाना, या जोड़ना संभव है, कुछ सीएसएस वर्गों को हटा दें जो लोडर दिखा रहे हैं।

इंटरसेप्टर हर ऐजैक्स कॉल पर चलेगा, इसलिए हर http कॉल पर विशेष बूलियन वैरिएबल ($ गुंजाइश.loading = true / false आदि) बनाने की कोई आवश्यकता नहीं है।

इंटरसेप्टर कोणीय jqLite https://docs.angularjs.org/api/ng/function/angular.element में निर्मित किया जा रहा है, इसलिए किसी Jquery की आवश्यकता नहीं है।

Answer 13

शो और आकार विशेषताओं के साथ एक निर्देश बनाएँ (आप और भी जोड़ सकते हैं)

    app.directive('loader',function(){
    return {
    restrict:'EA',
    scope:{
        show : '@',
      size : '@'
    },
    template : '<div class="loader-container"><div class="loader" ng-if="show" ng-class="size"></div></div>'
  }
})

और HTML के रूप में उपयोग करें

 <loader show="{{loader1}}" size="sm"></loader>

में शो चर पारित सच जब किसी भी वादा चल रहा है और है कि झूठी जब अनुरोध पूरा हो गया है। सक्रिय डेमो - JsFiddle में कोणीय लोडर प्रत्यक्ष उदाहरण डेमो

Answer 14

मैंने इसे बनाने के लिए @ डेविडलिन के उत्तर को थोड़ा सरल बनाया - निर्देशन में jQuery पर किसी भी निर्भरता को हटा दिया । मैं इस काम की पुष्टि कर सकता हूं क्योंकि मैं इसे उत्पादन एप्लिकेशन में उपयोग करता हूं

function AjaxLoadingOverlay($http) {

    return {
        restrict: 'A',
        link: function ($scope, $element, $attributes) {

            $scope.loadingOverlay = false;

            $scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            $scope.$watch($scope.isLoading, function (isLoading) {
                $scope.loadingOverlay = isLoading;
            });
        }
    };
}   

मैं ng-showछुपाने / दिखाने के लिए jQuery कॉल के बजाय उपयोग करता हूं <div>।

यहाँ वह है <div>जो मैंने उद्घाटन <body>टैग के ठीक नीचे रखा है :

<div ajax-loading-overlay class="loading-overlay" ng-show="loadingOverlay">
    <img src="Resources/Images/LoadingAnimation.gif" />
</div>

और यहां CSS है जो UI को ब्लॉक करने के लिए ओवरले प्रदान करता है जबकि $ http कॉल किया जा रहा है:

.loading-overlay {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.loading-overlay:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading-overlay:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

CSS श्रेय @Steve सीजर को जाता है - उनकी पोस्ट: https://stackoverflow.com/a/35470281//35354545

Answer 15

आप एक शर्त जोड़ सकते हैं और फिर इसे रूटस्कोप के माध्यम से बदल सकते हैं। आपके ajax अनुरोध से पहले, आप बस $ rootScope कहते हैं। $ emit ('stopLoader');

angular.module('directive.loading', [])
        .directive('loading',   ['$http', '$rootScope',function ($http, $rootScope)
        {
            return {
                restrict: 'A',
                link: function (scope, elm, attrs)
                {
                    scope.isNoLoadingForced = false;
                    scope.isLoading = function () {
                        return $http.pendingRequests.length > 0 && scope.isNoLoadingForced;
                    };

                    $rootScope.$on('stopLoader', function(){
                        scope.isNoLoadingForced = true;
                    })

                    scope.$watch(scope.isLoading, function (v)
                    {
                        if(v){
                            elm.show();
                        }else{
                            elm.hide();
                        }
                    });
                }
            };

        }]);

यह निश्चित रूप से सबसे अच्छा समाधान नहीं है, लेकिन यह अभी भी काम करेगा।