延迟整个页面在AngularJS中的加载，直到服务的ajax请求完成。

10 浏览
0 Comments

延迟整个页面在AngularJS中的加载，直到服务的ajax请求完成。

我在我的AngularJS项目中有一个单一的configService，它通过ajax请求从服务器获取整个项目的一些配置值，例如用户账户在激活之前是否需要进行审核。\n为了根据配置显示信息，整个页面的加载应该推迟直到这个ajax请求完成。我的服务看起来像这样：\n

angular.module('clientApp').factory('configService', function ($http) {
    var configService = {};
    var conf = {};
    Object.defineProperty(configService, 'serverConfig', {
        get: function () {
            return conf;
        }
    });
    $http.get('/api/config').success(function (data) {
        conf = $.extend(conf, data);
    });
    return configService;
});

\n因此，由于服务是一个单例，这将在页面加载时仅执行一次，而不是在每个路由更改时执行。\n现在我知道如何使用$q和promises，但我的问题是如何推迟所有angular的执行，直到这个服务完成其请求？我的大多数视图将需要来自configService.serverConfig的值，并依赖于它进行特定的行为 - 在每个控制器中异步执行和使用defered.then()似乎不是最好的主意。

0

2 答案

0 Comments

问题的原因是在AngularJS中，页面加载的时候可能会有一些异步请求，这些请求需要等待完成后才能完全加载页面。而默认情况下，AngularJS不会等待这些异步请求完成就开始渲染页面，这可能导致一些页面元素在请求未完成时就被渲染出来，给用户带来不好的体验。

解决方法是通过使用一个自定义的AngularJS模块，该模块会在所有初始异步请求完成后触发一个名为'ajaxComplete'的事件，以确保页面的加载是完整的。

具体的实现方法是使用一个AngularJS的拦截器来监控所有的异步请求。该拦截器会在每次新的请求发送时重置一个计时器，并跟踪当前待处理的请求数量。当所有请求都返回且在500毫秒内没有新的请求发送时，拦截器会判断初始异步请求已经完成，并触发'ajaxComplete'事件。

在上述解决方法中，作者提供了一个示例的Git项目，可以参考该项目来实现延迟页面加载的功能。

代码示例：

var app = angular.module('myApp', []);
app.factory('httpInterceptor', function($q, $rootScope) {
  var numRequests = 0;
  var completeTimer;
  return {
    request: function(config) {
      numRequests++;
      clearTimeout(completeTimer);
      return config;
    },
    response: function(response) {
      if ((--numRequests) === 0) {
        completeTimer = setTimeout(function() {
          $rootScope.$emit('ajaxComplete');
        }, 500);
      }
      return response;
    }
  };
});
app.config(function($httpProvider) {
  $httpProvider.interceptors.push('httpInterceptor');
});
app.controller('myCtrl', function($scope, $rootScope) {
  $rootScope.$on('ajaxComplete', function() {
    console.log('All initial ajax requests completed');
  });
});

希望以上解决方法能帮助你实现页面加载的延迟，使得页面在所有初始异步请求完成后再进行渲染，提供更好的用户体验。Happy coding!

0
0 Comments

原因：在AngularJS中，当服务的ajax请求还没有完成时，页面会先加载完，这可能会导致页面在请求完成前显示不完整或闪烁。

解决方法：可以通过手动启动AngularJS应用来延迟整个页面的加载，以确保服务的ajax请求完成后再显示页面内容。

具体的解决方法可以参考以下代码和链接：


angular.element(document).ready(function() {
  angular.bootstrap(document, ["yourApp"]);
});

也许手动启动应用可以解决问题……？

如果不是这种情况，请查看这篇帖子！

Delaying AngularJS route change until model loaded to prevent flicker

0