Question

我已经在AngularJs中创建了一个单页面应用程序。

当我导航到我的应用程序的主页面（在heroku服务器上）时，我会在浏览器的左上角看到所有图片和文本处于原始状态，如下所示：

之后应用程序正确上传，如下所示：

这非常难看所以我想在加载应用程序之前加载微调器。

现在 - 这是我的问题 - 导致这种延迟和元素原始表示的原因是：1。页面控制器？或2. $ routeProvider加载整个应用程序？我提醒你这是一个单页应用程序，意味着所有数据都应该提前加载。

我在问，因为我尝试使用路径提供程序中的变量来控制应用程序的状态，但它没有帮助：

    $routeProvider
    .when('/', {
      templateUrl : 'components/login/loginView.html',
      controller  : 'loginController'
    }) 
    .when('/chat', {
      templateUrl : 'components/chat/chatView.html',
      controller  : 'chatController'
    });
  }).run(function ($rootScope) {

    // App is loading, so set isAppLoading to true and start a timer
    console.log($rootScope);
    $rootScope.isAppLoading = true;

  });;

所以我的想法是选项1是正确的。导致问题的原因是routeProvider试图呈现的页面的控制器，而不是routeProvider加载时间本身......

是真的吗？

希望我能成功地解释这个问题......

由于

Answer 1

您可以在加载页面之前显示加载程序，并在加载时隐藏其他内容。

将此css放入head

body.loading > * {
   display: none;
}

body.loading > .loader {
   display: block !important;
}

body > .loader {
    display: none !important;
}

默认情况下将一个类添加到body标记

<body class="loading" ..>
   <div class="loader">Loader Goes Here</div>
   <!-- Rest of your HTML content goes here -->
</body>

然后，您可以在$rootScope上收听状态更改事件。这样的事情。

app.run(function ($rootScope) {

    $rootScope.$on('$stateChangeSuccess', function() {
       $('body').removeClass('loading');
    });

    $rootScope.$on('$stateChangeStart', function() {
       $('body').addClass('loading');
    });
});

角度js页面的原始呈现

1 个答案: