Javascript 角度js页面的原始表示_Javascript_Angularjs

Javascript 角度js页面的原始表示

javascript angularjs

Javascript 角度js页面的原始表示,javascript,angularjs,Javascript,Angularjs,我用AngularJs创建了一个单页应用程序当我导航到我的应用程序主页（在heroku服务器上）时，我会在浏览器的左上角看到所有处于原始状态的图片和文本，如下所示：之后，应用程序将正确上载，如下所示：这是相当丑陋的，所以我想把一个旋转加载，直到应用程序加载现在-这是我的问题-是什么导致了延迟和元素的原始呈现：1。页面控制器？或2。$routeProvider加载整个应用程序？我提醒你，这是一个单页应用程序，意味着所有数据都应该提前加载我之所以这么问，是因为我试图在我运行的路线提供商

我用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加载时间本身

这是真的吗

希望我已经设法解释了这个问题

谢谢

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

将此css放入

标题中

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>

所以你只想知道会发生什么？我想知道在哪里放置我的各种isFinishedLoading-在我放置的示例中的路由提供程序内，或者在我尝试加载的页面的控制器内在控制器内，或者你可以尝试两者并查看结果..如果你不从服务器加载数据，页面应该以人类无法察觉的速度显示。。。我认为问题出在别处

app.run(function ($rootScope) {

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

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