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-call几乎肯定会导致延迟。可以通过api-call缓慢接收数据，这样您就可以显示任何类型的加载文本/图像，以通知用户正在加载数据。

Answer 3

如果您希望在控制器输入时准备好数据，您可以添加resolve参数并将api调用作为此路由配置中的$ promise传递。

在Angular JS中延迟加载数据

3 个答案: