ajax - Angular 预渲染延迟 html 页面加载，以便预渲染加载 Ajax

Question

我正在使用 Angular 我需要延迟我的页面输出的完整输出，以便机器人在机器人停止处理 HTML 之前给内容加载时间。我的整个页面将呈现并且预呈现服务认为页面已完成，但 ajax 仍在加载数据。我只需要延迟内容刷新，直到 ajax 加载完全完成。 Angular 中有执行此操作的好方法吗？

我使用 Prerendering.io 作为我的预渲染服务。

Answer 1

你应该使用resolve机制:

$module.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.when('/actionWithAjaxData', {
            templateUrl: 'action.tpl.html',
            controller: 'ActionCtrl',
            resolve: {
                data: ['dataResource',
                    function(dataResource, APP_CONFIG) {
                        return dataResource.get(); //must return a promise
                    }
                ]
            }
        })
    }
])
.controller('ActionCtrl', ['data',
    function(data) {
        //data contains your ajax loaded data
    }
])

这样，只有在所有 promise 都已解决时才会构造 Controller 。如果一个 promise 被拒绝，你需要用一个错误处理程序来拦截它，比如 $routeChangeError

更多信息:https://docs.angularjs.org/api/ngRoute/provider/ $路由提供者

也就是说，如果你想延迟页面的显示，直到它的所有 ajax 请求都正常

如果您想要另一种方式:显示页面但在制作 ajax 时将页面的某些部分留空/隐藏。您可以使用观察者监视任何 ajax 请求，例如 angular-app 中的请求。应用:

angular.module('services.httpRequestTracker', []);
angular.module('services.httpRequestTracker').factory('httpRequestTracker', ['$http', function($http){

  var httpRequestTracker = {};
  httpRequestTracker.hasPendingRequests = function() {
    return $http.pendingRequests.length > 0;
  };

  return httpRequestTracker;
}]);

并在模板中使用它，例如:

<div class="spinner-container fade" ng-class="{in: hasPendingRequests(), out: !hasPendingRequests()}">
    <div class="spinner fade" ng-class="{in: hasPendingRequests(), out: !hasPendingRequests()}"></div>
</div>

这样，您就可以在有请求时显示加载器...

最后，如果您想将页面的特定部分链接到特定的 ajax 请求，您还可以使用 ajax 请求特定的回调(完成/错误)