如何在 Angular JS 中为“ng-view”做预加载？

I use <div ng-view></div>在网页上。 当我点击块中的链接时<div>已加载 HTML 模板已设置在routeProvider。还一起完成请求 AJAX，返回加载模板的数据。

现在的问题是，单击后我得到带有空表单的 HTML 模板，但 AJAX 请求仍在工作。几秒钟后，HTML 表单就会从 AJAX 归档数据。

我如何预加载目录页面ng-view?

这里似乎有一些类似的问题：

• Angularjs 根据 ajax 请求加载屏幕
• Angular JS 加载屏幕和页面动画.

此外，还有很多模块可以处理加载动画http://ngmodules.org。例如，这些：

• https://github.com/cgross/angular-busy
• https://github.com/chieffancypants/angular-loading-bar（我在我的应用程序中使用这个）
• https://github.com/McNull/angular-block-ui和别的。

UPD: 我根据角度加载栏的工作原理编写了一个简单的解决方案。我没有用 ng-view 测试它，但它似乎可以与 ui-view 一起使用。这不是最终的解决方案，必须进行完善。

angular.module('ui')

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('LoadingListener');
}])

.factory('LoadingListener', [ '$q', '$rootScope', function($q, $rootScope) {
    var reqsActive = 0;

    function onResponse() {
        reqsActive--;
        if (reqsActive === 0) {
            $rootScope.$broadcast('loading:completed');
        }
    }

    return {
        'request': function(config) {
            if (reqsActive === 0) {
                $rootScope.$broadcast('loading:started');
            }
            reqsActive++;
            return config;
        },
        'response': function(response) {
            if (!response || !response.config) {
                return response;
            }
            onResponse();
            return response;
        },
        'responseError': function(rejection) {
            if (!rejection || !rejection.config) {
                return $q.reject(rejection);
            }
            onResponse();
            return $q.reject(rejection);
        },
        isLoadingActive : function() {
            return reqsActive === 0;
        }
    };
}])

.directive('loadingListener', [ '$rootScope', 'LoadingListener', function($rootScope, LoadingListener) {

    var tpl = '<div class="loading-indicator" style="position: absolute; height: 100%; width: 100%; background-color: #fff; z-index: 1000">Loading...</div>';

    return {
        restrict: 'CA',
        link: function linkFn(scope, elem, attr) {
            var indicator = angular.element(tpl);
            elem.prepend(indicator);

            elem.css('position', 'relative');
            if (!LoadingListener.isLoadingActive()) {
                indicator.css('display', 'none');
            }

            $rootScope.$on('loading:started', function () {
                indicator.css('display', 'block');
            });
            $rootScope.$on('loading:completed', function () {
                indicator.css('display', 'none');
            });
        }
    };
}]);

它可以这样使用：

<section class="content ui-view" loading-listener></section>