How to display wait message in AngularJS while data loading?

后端 未结 5 722
余生分开走
余生分开走 2021-02-04 03:22

I\'m new in AngularJS and trying to find the way how to display wait message while data loading? I mean data starts loading, display message and remove it when data loading is d

相关标签:
5条回答
  • 2021-02-04 03:42

    Depends from where you're loading the data. One solution I used was to create a LoadingService

    app.factory('LoadingService', function($rootScope) {
        return {
            loading : function(message) {
                 $rootScope.loadingMessage = message;
            },
            loaded : function() {
                 $rootScope.loadingMessage = null;
            }
        }
    }).controller('FooController', function($scope,$http,LoadingService) {
    
       $scope.loadSomeData = function() {
           LoadingService.loading('Data is loading');
    
           $http.get('/data').finally(function() {
                LoadingService.loaded();
           });
       };
    });
    

    Since I had only one place where the message was being displayed I could use RootScope to handle this. If you want to have a loading message multiple times you could write a directive also to handle this like Codezilla posted

    0 讨论(0)
  • 2021-02-04 03:43

    Edit: does not work on version 1.3.0 . Use request/response interceptors.

    If you want to listen to all requests globally and display a loading widget whenever there's a request pending, you can count the requests using request/response transformers. You simply add a counter and increase on a new request and decrease it on response. I use a provider for that:

    $httpProvider
      .defaults
      .transformRequest
      .push(function(data) {
          requestNotificationProvider
          .fireRequestStarted(data);
          return data;
    });
    

    And the same for transformResponse. Then the same provider holds the information on how many requests are pending and you can use them in a directive. You can read (& copy/paste the code) a full blog post on that here: http://www.kvetis.com/2014/01/angularjs-loading-widget.html There's a working demo in attached.

    0 讨论(0)
  • 2021-02-04 03:59

    I dont know if is the correct way, but I put on my template

     <img id="spinner" ng-src="images/spinner.gif" ng-if="!data" >
     <div ng-repeat="repo in repos | orderBy: repoSortOrder">...</div>
    
    0 讨论(0)
  • 2021-02-04 04:08
    <div ng-if="data.dataLoading">
        Loading...
    </div>
    

    JS

    $scope.data.dataLoading = true;
    
    return someService.getData().then(function (results) {                    
        ...
    }).finally(function () {
        $scope.data.dataLoading = false;
    });
    
    0 讨论(0)
  • 2021-02-04 04:09

    I've answered this question in this StackOverflow article, but here's a recap of what I did.

    If you style your code correctly, and make sure all calls to a web service pass through one particular factory function, then you can make that factory function handle showing and hiding your "Please Wait" popup.

    Here's the factory function which I use to call all of my GET web services:

    myApp.factory('httpGetFactory', function ($http, $q) {
        return function (scope, URL) {
            //  This Factory method calls a GET web service, and displays a modal error message if something goes wrong.
            scope.$broadcast('app-start-loading');          //  Show the "Please wait" popup
    
            return $http({
                url: URL,
                method: "GET",
                headers: { 'Content-Type': undefined }
            }).then(function (response) {
                scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup
                if (typeof response.data === 'object') {
                    return response.data;
                } else {
                    // invalid response
                    return $q.reject(response.data);
                }
            }, function (errorResponse) {
                scope.$broadcast('app-finish-loading');     //  Hide the "Please wait" popup
    
                //  The WCF Web Service returned an error.  
                //  Let's display the HTTP Status Code, and any statusText which it returned.
                var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n";
                var HTTPErrorStatusText = errorResponse.statusText;
    
                var message = HTTPErrorNumber + HTTPErrorStatusText;
    
                BootstrapDialog.show({
                    title: 'Error',
                    message: message,
                    buttons: [{
                        label: 'OK',
                        action: function (dialog) {
                            dialog.close();
                        },
                        draggable: true
                    }]
                });
    
                return $q.reject(errorResponse.data);
            });
        };
    });
    

    This would get called like this:

    myApp.webServicesURL = "http://localhost:15021/Service1.svc";
    
    var dsLoadAllEmployees = function (scope)
    {
         //  Load all survey records, from our web server
         $scope.LoadingMessage = "Loading Employees data...";
    
         var URL = myApp.webServicesURL + "/loadAllEmployees";
         return httpGetFactory(scope, URL);
    }
    

    Here's the "Please wait" control which I use on each page..

    <please-wait message="{{LoadingMessage}}" ></please-wait>
    

    ... and its code looks like this...

    myApp.directive('pleaseWait',  
        function ($parse) {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    message: '@message'
                },
                link: function (scope, element, attrs) {
                    scope.$on('app-start-loading', function () {
                        element.fadeIn(); 
                    });
                    scope.$on('app-finish-loading', function(){
                        element.animate({
                            top: "+=15px",
                            opacity: "0"
                        }, 500);
                    });
                },
                template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>'
            }
        });
    

    Using this structure, any of my Angular controllers can load data from a web service in just a few lines, and leave the factory to look after showing/hiding the "Please wait" message and to display any errors which occur:

       $scope.LoadAllSurveys = function () {
            DataService.dsLoadAllSurveys($scope).then(function (response) {
                //  Success
                $scope.listOfSurveys = response.GetAllSurveysResult;
            });
       }
    

    Nice, hey ?

    0 讨论(0)
提交回复
热议问题