Delay loading data in Angular JS

Question

I have code like this

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

So my problem is when i loading data the application take me some time to load data. I need load data as soon as Is the any solution for this?

Using angular loading bar is simple to implement

Jerry
– Jerry

2016-07-17 04:33:10 +00:00
Commented Jul 17, 2016 at 4:33 — Jerry
– Jerry, Commented Jul 17, 2016 at 4:33

Community · Accepted Answer · 2017-05-23 11:58:56Z

2

Since you are loading data via api call, there will be a delay. To handle this delay, you should display a loading screen. Once the data is loaded, the loading screen gets hidden and your main screen is visible. You can achieve this using $http interceptors.

See : Showing Spinner GIF during $http request in angular

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 16, 2016 at 12:49

Dev Shah

3021 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Imdad · Accepted Answer · 2016-07-16 12:54:33Z

0

The api-call is almost certainly causing the delay. Data may be received slowly via the api-call so you could display any sort of loading text/image to notify the use that the data is being loaded.

answered Jul 16, 2016 at 12:54

Imdad

7691 gold badge12 silver badges32 bronze badges

Comments

MMhunter · Accepted Answer · 2016-07-16 13:09:00Z

0

If u want the data ready at the time when controller inits, u can add a resolve param and pass the api call as a $promise in the route configuration for this route.

answered Jul 16, 2016 at 13:09

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Delay loading data in Angular JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related