Angularjs 진행률 표시 구현

Question

내 컨트롤러에서 http get 메서드를 구현하여 json에서 데이터를 가져 와서 내보기에 표시했습니다. 진행률 표시 줄을 구현하고 싶습니다. 하나를 구현했지만 데이터가로드 된 후에도 진행률 막대가 실행 중입니다. 데이터가로드되기 전에 진행률 표시 줄을 표시하고 데이터가로드 된 후 완료하는 방법 HTTP 요청이 가장 가능성이 빠르다 때문에

내 컨트롤러

.controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) { 


       $scope.progressbar = ngProgressFactory.createInstance(); 

       $http.get('https://feeds.citibikenyc.com/stations/stations.json'). 
         success(function (data, status, headers, config) { 

          $scope.progressbar.start(); 


          $scope.data = data; //first get the full object 
          $scope.mainArray = data.stationBeanList; 

          $timeout($scope.progressbar.complete(), 100); 

         }). 
         error(function (data, status, headers, config) { 
          // called asynchronously if an error occurs 
          // or server returns response with an error status. 
         }); 
      }]); 

Answer 1

, 당신의 솔루션이 아니라 최고라고 생각합니다.

내가 너라면 http 요청이 시작되면 로딩 아이콘이 표시되고 완료되면 메시지/알림/표시가 나타납니다.

당신은 그것을 위해 글꼴 멋진 사용할 수 있습니다

Animated Icons

예 :

<div ng-show="isLoading"> 
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> 
    <span class="sr-only">Loading...</span> 
</div> 

및

.controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) { 


       $scope.isLoading = null; 

       $http.get('https://feeds.citibikenyc.com/stations/stations.json'). 
         success(function (data, status, headers, config) { 

          $scope.isLoading = 'done'; 


          $scope.data = data; //first get the full object 
          $scope.mainArray = data.stationBeanList; 

          $timeout($scope.progressbar.complete(), 100); 

         }). 
         error(function (data, status, headers, config) { 
          // called asynchronously if an error occurs 
          // or server returns response with an error status. 
         }); 
      }]);