AngularJs 预加载器答案

【问题标题】：Preloader with AngularJsAngularJs 预加载器
【发布时间】：2016-02-16 15:01:30
【问题描述】：

我有一个非常简单的 Html 网站（没有服务器端代码）。我决定使用 angularJs，而不是复制一些 HTML。使用一些指令和一些局部视图，我可以重复使用一些代码而不复制它。

我为预加载器创建了一个指令，但我有一个问题.. 预加载器显示的时间比页面加载稍晚... 我的意思是加载了一些图像和文本，然后出现了预加载器，最后，当文档准备好时，预加载器消失了……这真的很烦人！

我希望预加载器出现在所有内容之前，但也许在那一刻还没有加载角度。我不知道我是否清楚。

无论如何，在这里你可以明白我的意思：

这是我的代码：

HTML 页面

<head>
    ...
    <script src="/js/angularjs-1.4.8.min.js"></script>
    <script src="/js/angularjs/app.js"></script>
    <script src="/js/angularjs/directives/preloader.js"></script>
</head>
<body ng-app="renovahaus">
    <rh-preloader></rh-preloader>
    ...
</body>

JS - 指令

angular.module('renovahaus')
    .directive('rhPreloader', ['$document', function ($document) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/partial_views/directives/templates/preloader.html',
            link: function (scope, element, attr) {
                $document.ready(function () {
                    /*will first fade out the loading animation*/
                    $(element).find("#status").fadeOut();

                    /*will fade out the whole DIV that covers the website.*/
                    $(element).delay(1000).fadeOut("slow");

                    $("body").css('overflow-y', 'visible');
                    $("body").css('position', 'relative');
                });
            }
        };
    }]);

HTML - 模板指令

<div class="preloader">
    <div id="status"></div>
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
        </div>
    </div>
</div>

谢谢

【问题讨论】：

请告诉我们你到目前为止做了什么......没有任何代码，我们将如何调试？
您可以随时使用插件。github.com/joshuahiggins/angular-preloader
我编辑了我的帖子@Lal

标签： javascript html angularjs preloader

【解决方案1】：

一些尝试的可能性：

将 ng-cloak 类添加到您的
将整个页面（预加载器除外）放入 ng-include 中？ id 为“wrapper”的 div 中的所有 dom。
否则，您可以使用 angular 的路由模块，该模块将包含您所有内容所在的模板。

【讨论】：

你让我觉得......也许我做的一切都错了......也许我应该有一个像SPA这样的东西..，所以，只有一页，内容根据路线而变化。 ..我正在做相反的事情..我的意思是..不同的页面具有不同的指令/部分视图以避免代码的复制
Angularjs 被设计为 SPA，所以是的，你做错了。并且通过路由和适当的关注点分离，您无需复制代码。但是当然，如果你是从 angularjs 开始的，那么一开始可能就不那么容易了。如果你需要复杂的导航：检查angular-ui-router，你可以定义状态和视图，嵌套状态和嵌套视图。
非常感谢，我现在已经用另一种方式解决了，但是我会一点一点地修改方法，以正确的方式开发我正在做的这个小网站

【解决方案2】：

我修改了 id 为“wrapper”的 div，以便隐藏（可见性：隐藏）并在预加载器消失时显示。当然不是正确的方法，但解决了我的问题。

【讨论】：