Angular Prerendering延迟html页面加载,以便prerender加载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被拒绝,你需要用一个错误处理程序拦截它$routeChangeError

更多信息:https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

也就是说,如果你想延迟页面的显示,直到它的所有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请求特定的回调(完成/错误)