angularjs - Angular and preloader for an ajax template -

i have dashboard several templates.

in 1 of templates, have simple list. i'm using ng-repeat on li's , way keep list dynamic. here's thing -

since i'm getting data list using $http, have empty list second or two.

a solution add preloader list default, how suggest add logic that? easiest way add so:

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

would right way go?

also - there anyway have control on template transitioning? example, when user left page want show preloader x milliseconds, , move requested page

it better have directive 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 directive, need give loading animation element 'loading' attribute:

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