我已经阅读了很多关于ng-cloak的内容(https://docs.angularjs.org/api/ng/directive/ngCloak),但似乎Angular 4没有ngCloak。
所以我不知道如何避免这种不愉快的效果。
Angular 4是否有一个等效的指令来代替ng-cloak?如何在加载时正确显示页面而不显示未样式化的html?
index.html文件不应包含任何特定于应用程序的HTML代码,只应包含一些标题和应用程序的根标签。它可以在根标签内包含一个占位文本,例如“正在加载”。
应用程序的所有HTML代码都应该位于app.component.html和其他组件中。
@angular/cli会生成一个名为"template"的index.html文件,其内容如下:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
浏览器立即显示“正在加载…”文本。在Angular被初始化之后,它将被实际应用程序替换。要获得白色页面,只需删除文本。
Loading...
占位符只适用于 <app-root>
吗?还是适用于任何渲染较慢的 Angular 组件? - starfruit3254<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
当页面加载时,您可以删除占位符。
您也可以尝试(但这很混乱且难以维护)采用两个“加载器”的增量方法:一个非常、非常小的加载器几乎不需要CSS/图像,一旦字体和其他极少量的基本资产被onLoad加载,您可以用简单的动画替换它,然后从那里加载所有其他内容并启用完整的Angular应用程序。
还有“打包器”实用程序,可以将大多数HTML、CSS和JS压缩为单个缩小的SPA包;其中一些(我很抱歉,我看到过几个使用过它们的人,但从未使用过自己并且无法引用它们)也提供了像上面描述的最小加载器。这可能会为您处理一些维护工作,并且值得一试。我知道这是因为我的一个同事在一个项目中不得不用HTML5替换Flash“请等待”加载器(这不是一个Angular项目,但我认为这并不重要)。
(在我看来最好的解决方案)您可以使用Angular Universal进行服务器端渲染。工作流程如下:
example.com
<script>
标签)发送到用户的浏览器BrowserModule.withServerTransition();
有关Universal的更多信息可在此处阅读。,Angular可以处理在“静态页面”上执行的所有操作(在JavaScript启动之前)您可以从Universal进一步发展,并将您的Angular Universal应用程序作为渐进式Web应用程序(PWA)提供。有关PWA的更多信息可在此处阅读
再向前迈一步,并从Google Cache引入加速移动页面(AMP)。有关AMP的更多信息可在此处阅读。
您永远不应该在index.html中放置任何超过应用程序root
节点的内容:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
我认为这种行为是不可避免的。你能做的最好的事情就是尽可能地加快速度。使用最新版本、AOT和懒加载可以帮助很多。
或者,你可以在你的index.html
中添加一些CSS。
这是一个特性,而不是错误。
你可以选择以下三种方案之一:
历史上,方案#2一直是最受批评的方法,尤其是因为有那么多人想采用它。我建议不要追求它。