Question

我想在我的Angular APP中首次加载时显示一个简单的html / css加载微调器。微调器代码包含在我的index.html中。

然而，直到我的angularjs APP开始进入时，dom似乎才会被渲染，导致白色屏幕显示非常长，直到最终发生。有没有办法阻止它？

我想了解如何在头部的css代码加载完成后立即加载我的普通html / css微调器，以改善用户体验。

在webpagetest.org上测试似乎确认了这个诊断（/ settings，/ introduction，/ menus行都是在渲染之前调用AngularJS服务完成的外部API）：

以下是我的构建代码的简化版本：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
    <link rel="stylesheet" href="styles/lib.css">
    <link rel="stylesheet" href="styles/app.css">
</head>
<body>

    <div id="base-container" ng-controller="Shell as main">
        <div ng-include="'app/layout/header.html'"></div>
        <div id="content" ui-view ng-cloak autoscroll="true"></div>
        <div ng-include="'app/layout/footer.html'"></div>
    </div>

    <!-- This is the spinner I would like to display on first load -->
    <div ng-show="::false" class="spinner-container">
        <div class="spinner sk-spinner sk-spinner-pulse"></div>
    </div>

    <script src="js/lib.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Answer 1

无论应用程序的复杂程度如何，所有控制器都在同一个角度应用程序中，同一个应用程序中的所有作用域都从同一个根继承，无论您在$ rootScope上定义的是什么，都可用于所有子作用域。

我们有两种方法可以解决此问题：

使用$ broadcast（），$ emit（）和$ on（）来促进事件驱动的发布者 - 订阅者模型，以便在您的控制器之间发送通知和传递数据。（专业解决方案）
声明$ rootScope变量并观察变化。（简单方法）

Answer 2

事实证明问题来自“渲染阻止javascript”，我不得不在我的JS中添加“async”标签来修复它。

在我的lib.js和app.js中添加async时，在加载角度脚本之前我遇到了app.js加载的问题（从而导致APP抛出错误）。为了解决这个问题，我将lib.js和app.js合并为一个文件，然后添加了异步标记。

我的最终构建代码看起来像那样（魔术发生在最终的“脚本”标签上）：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
    <link rel="stylesheet" href="styles/lib.css">
    <link rel="stylesheet" href="styles/app.css">
</head>
<body>

    <div id="base-container" ng-controller="Shell as main">
        <div ng-include="'app/layout/header.html'"></div>
        <div id="content" ui-view ng-cloak autoscroll="true"></div>
        <div ng-include="'app/layout/footer.html'"></div>
    </div>

    <!-- This is the spinner I would like to display on first load -->
    <div ng-show="::false" class="spinner-container">
        <div class="spinner sk-spinner sk-spinner-pulse"></div>
    </div>

    <!-- This app.js now also contains lib.js from my question !-->
    <script src="js/app.js" async></script>
</body>
</html>

为什么在我的Angular APP完成加载后才会呈现DOM纯HTML元素？

2 个答案: