2016-07-16 82 views
0

我有這樣在角JS延遲加載數據

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

代碼,所以我的問題是,當我加載應用程序採取了一些時間來加載數據。 我需要加載數據儘快 是否有任何解決方案?

+0

使用角加載杆很容易實現 – Jerry

回答

2

由於您通過api調用加載數據,因此會有延遲。爲了處理這種延遲,你應該顯示一個加載屏幕。數據加載完成後,加載屏幕將隱藏起來,您的主屏幕可以看到。你可以使用$ http攔截器來實現這一點。

請參見:Showing Spinner GIF during $http request in angular

0

中,API調用幾乎肯定造成了延誤。數據可能通過api調用緩慢接收,因此您可以顯示任何類型的加載文本/圖像以通知使用數據正在加載。

0

如果你想在控制器進入時準備好數據,你可以添加一個resolve參數,並在此路由的路由配置中將api呼叫作爲$ promise傳遞。