web-applications - 在 Angular 中加载脚本和资源时，实现加载器动画的最佳方式是什么？

Question

我希望向我的 Web 应用程序的用户显示一个进度条，指示加载所需文件和脚本的当前进度。

最好显示百分比，但简单的加载器 gif 是可接受的解决方案。

如果可能的话，在 Angular 中实现可以显示图像、css 和 js 加载完成百分比指示的加载器的最佳方法是什么？

我正在考虑拥有一个小型应用程序，其唯一目的是加载资源和指示进度，当所有脚本和资源完成后，触发一些回调以启动 Angular (angular.bootstrap())。

我的猜测是有一群聪明人可以想出更好的解决方案，我希望并认为除了我之外还有更多人可以从这方面的一些好的建议中受益。

如果能够为加载程序的正确性指定估计的文件大小也很好:

<script load-src="//somehost.com/file.js" filesize="100"/>
<img load-src=sprite.png" filesize="50"/>

Answer 1

你是说加载<script>吗？标签和 <link>标签等？如果是这样，你可以使用 ng-cloak。使用 ng-cloak CSS 隐藏所有内容，并默认显示微调器。然后在 Angular 完全加载后取下微调器。 more info about ng-cloak

如果你的意思是在完成一组你自己的 HTTP 请求之前加载微调器，你可以使用 angular-promise-tracker跟踪 HTTP 请求并捕获“开始”和“完成”事件以提高百分比。

这是一个 http 请求加载微调器的示例:http://plnkr.co/edit/SHtk7eSrbs1dfoQawPCW?p=preview