遅延データをロードする

Question

私はこの

(function (app) { 
    app.controller('productListController', productListController) 

    productListController.$inject = ['$scope', 'apiService', 'notificationService', '$ngBootbox', '$filter']; 

    function productListController($scope, apiService, notificationService, $ngBootbox, $filter) { 
     $scope.products = []; 
     $scope.page = 0; 
     $scope.pagesCount = 0; 
     $scope.getProducts = getProducts; 
     $scope.keyword = ''; 

     $scope.search = search; 

     $scope.deleteProduct = deleteProduct; 

     $scope.selectAll = selectAll; 

     $scope.deleteMultiple = deleteMultiple; 

     function deleteMultiple() { 
      var listId = []; 
      $.each($scope.selected, function (i, item) { 
       listId.push(item.ID); 
      }); 
      var config = { 
       params: { 
        checkedProducts: JSON.stringify(listId) 
       } 
      } 
      apiService.del('/api/product/deletemulti', config, function (result) { 
       notificationService.displaySuccess('Deleted successfully ' + result.data + 'record(s).'); 
       search(); 
      }, function (error) { 
       notificationService.displayError('Can not delete product.'); 
      }); 
     } 

     $scope.isAll = false; 
     function selectAll() { 
      if ($scope.isAll === false) { 
       angular.forEach($scope.products, function (item) { 
        item.checked = true; 
       }); 
       $scope.isAll = true; 
      } else { 
       angular.forEach($scope.products, function (item) { 
        item.checked = false; 
       }); 
       $scope.isAll = false; 
      } 
     } 

     $scope.$watch("products", function (n, o) { 
      var checked = $filter("filter")(n, { checked: true }); 
      if (checked.length) { 
       $scope.selected = checked; 
       $('#btnDelete').removeAttr('disabled'); 
      } else { 
       $('#btnDelete').attr('disabled', 'disabled'); 
      } 
     }, true); 

     function deleteProduct(id) { 
      $ngBootbox.confirm('Are you sure to detele?').then(function() { 
       var config = { 
        params: { 
         id: id 
        } 
       } 
       apiService.del('/api/product/delete', config, function() { 
        notificationService.displaySuccess('The product hase been deleted successfully!'); 
        search(); 
       }, function() { 
        notificationService.displayError('Can not delete product'); 
       }) 
      }); 
     } 

     function search() { 
      getProducts(); 
     } 

     function getProducts(page) { 
      page = page || 0; 
      var config = { 
       params: { 
        keyword: $scope.keyword, 
        page: page, 
        pageSize: 20 
       } 
      } 
      apiService.get('/api/product/getall', config, function (result) { 
       if (result.data.TotalCount == 0) { 
        notificationService.displayWarning('Can not find any record.'); 
       } 
       $scope.products = result.data.Items; 
       $scope.page = result.data.Page; 
       $scope.pagesCount = result.data.TotalPages; 
       $scope.totalCount = result.data.TotalCount; 
      }, function() { 
       console.log('Load product failed.'); 
      }); 
     } 

     $scope.getProducts(); 
    } 
})(angular.module('THTCMS.products')); 

ようなコードを持っているので、私の問題は、私は、データをロードするときに、アプリケーションがデータをロードするために私にいくつかの時間がかかるです。 すぐにデータをロードする必要がありますか？

Answer 1

APIコールを使用してデータを読み込んでいるため、遅延が発生します。この遅延を処理するには、読み込み画面を表示する必要があります。データが読み込まれると、読み込み画面が非表示になり、メイン画面が表示されます。 $ httpインターセプタを使用してこれを実現できます。

参照：Showing Spinner GIF during $http request in angular

Answer 2

APIコールは、ほぼ確実に遅延を引き起こしています。データはapi-call経由でゆっくりと受信されるので、データがロードされていることを使用することを通知する任意の種類の読み込みテキスト/イメージを表示できます。

Answer 3

コントローラーが入っているときにデータを準備したい場合は、resolveパラメーターを追加し、このルートのルート構成で$ promiseとしてapi呼び出しを渡すことができます。