如何使用angularJS页面预加载器？

Question

我想为我的AngularJS应用程序使用预加载器，我想要的是，当用户第一次打开我的网站时，加载器显示并且当所有回调函数完成其工作时它应该消失。

这是我试过的：

 var App = angular.module('App.directives', []);
 App.directive('routeLoadingIndicator', function($rootScope){
   return {
   restrict:'E',
   template:"<h1 ng-if='isRouteLoading' style='position: fixed; width: 100%; height: 100%; background: rgb(255, 255, 255) none repeat scroll 0% 0%; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 2147483647;' >Loading...</h1>",
   link:function(scope, elem, attrs){
     scope.isRouteLoading = false;

     $rootScope.$on('$routeChangeStart', function(){
       scope.isRouteLoading = true;
     });

     $rootScope.$on('$routeChangeSuccess', function(){
       scope.isRouteLoading = false;
     });
   }
 };
});

$ routeChangeSuccess仅在模板完全加载时起作用，但我需要一个在所有回调完成时触发的解决方案，例如$ http请求。我想添加一个在用户点击链接时出现的加载器，当页面加载完全包含所有$ http请求时加载器将不可见