Jak wyświetlić komunikat oczekiwania w AngularJS podczas ładowania danych?

Question

Jestem nowy w AngularJS i próbuję znaleźć sposób wyświetlania komunikatu oczekiwania podczas ładowania danych? Mam na myśli, że dane rozpoczynają ładowanie, wyświetlają komunikat i usuwają je po zakończeniu ładowania danych.

Szukałem w internecie ale nie znalazłem niczego, co potrzeba ...

Answer 1

<div ng-if="data.dataLoading"> 
    Loading... 
</div> 

JS

$scope.data.dataLoading = true; 

return someService.getData().then(function (results) {      
    ... 
}).finally(function() { 
    $scope.data.dataLoading = false; 
}); 

Answer 2

Zależy skąd jesteś ładowania danych. Jednym z rozwiązań Kiedyś było stworzenie 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(); 
     }); 
    }; 
}); 

Ponieważ miałem tylko jedno miejsce, gdzie był wyświetlany komunikat mogę używać RootScope sobie z tym poradzić. Jeśli chcesz mieć wiadomość ładującą kilka razy, możesz napisać dyrektywę również do obsługi tego jak Codezilla opublikowana

Answer 3

Edytuj: nie działa w wersji 1.3.0. Użyj przechwytujących żądania/odpowiedzi.

Jeśli chcesz wysłuchać wszystkich żądań na całym świecie i wyświetlać widżet ładowania, gdy jest oczekujące żądanie, możesz liczyć żądania przy użyciu numeru request/response transformers. Wystarczy dodać licznik i zwiększyć na nowe żądanie i zmniejszyć go w odpowiedzi. Korzystam z usług dostawcy:

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

To samo dotyczy transformResponse. Następnie ten sam dostawca przechowuje informacje o liczbie oczekujących żądań i można ich użyć w dyrektywie. Możesz przeczytać (& kopiuj/wklej kod) pełny wpis na blogu w tym miejscu: http://www.kvetis.com/2014/01/angularjs-loading-widget.html W załączeniu jest działające demo.

Answer 4

nie wiem, czy jest to prawidłowy sposób, ale włożyłem szablonu

<img id="spinner" ng-src="images/spinner.gif" ng-if="!data" > 
<div ng-repeat="repo in repos | orderBy: repoSortOrder">...</div> 

Answer 5

mam odpowiedzieć na to pytanie w this StackOverflow article, ale tutaj jest podsumowanie tego, co zrobiłem.

Jeśli styl kod poprawnie i czy wszystkie połączenia z przepustki usług internetowych poprzez jeden szczególności factory funkcji, to można zrobić, że uchwyt factory funkcja pokazywanie i ukrywanie swojego „Please Wait” okienko.

Oto funkcja factory którego używam zadzwonić wszystkich moich GET internetowych usług:

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

To sprawdzony tak:

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

Oto „Proszę czekać” kontrolę które użyj na każdej stronie ..

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

... a jego kod wygląda tak ...

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

Korzystanie z tej struktury, każde z moich kątowe kontrolerów może wczytać dane z usługi internetowej w zaledwie kilku linii, i opuszcza fabrykę opiekować pokazywanie/ukrywanie się komunikat „proszę czekać” i wyświetla żadnych błędów które występują:

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

Ładne, hej?