CODEWITHSUNDEEP
angularjsajaxpreloader
user3800799
user3800799

Reputation: 538

Angular and preloader for an ajax template

I have a dashboard with several templates.

In one of the templates, I have a simple list. I'm using ng-repeat on my li's and that way I keep my list dynamic. But here's the thing -

Since I'm getting the data for this list using $http, it is likely to have an empty list for a second or two.

A good solution for this would be to add a preloader for my list by default, but how would you suggest to add the logic for that? The easiest way would be to add it like so:

$http({
    method: 'GET',
    url: './data/websites.json'
}).then(function successCallback(response) {
    // hide preloader, etc
});

Would it be the right way to go?

Also - is there anyway to have control on the template transitioning? for example, when a user left a page I want to show a preloader for X milliseconds, and only then move to the requested page

Upvotes: 0

Views: 102

Answers (1)

Tanvi B
Tanvi B

Reputation: 1567

It is better to have a directive does everything for you:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

With this directive, all you need to do is to give any loading animation element an 'loading' attribute:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

Upvotes: 1

Related Questions