Question

我是棱角分明的新人。我使用AngularJS来开发前端。但是在初始级别我遇到了在页面加载时闪烁一些内容的问题。

我的问题是，当我在localhost中运行我的应用程序时，有时它会在屏幕上显示数据绑定表达式，或者它在浏览器上显示一些疯狂的输出。虽然我的问题没有解决，但我使用ng-clock（由angularjs docs建议）。

我的html文件太小了，虽然它的闪烁没有做很多事情。请注意我的脚本标签位于底部。请给我一些想法，以防止AngularJS中的这个王者。

的index.html

    <!DOCTYPE html>
    <html lang="en" ng-app="app">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Sample App</title>
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="styles/cover.css">
        <link rel="stylesheet" href="styles/sidebar.css">
        <style type="text/css"></style>
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')
        </script>
        <script src="node_modules/angular/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl" ng-cloak>
        <div class="site-wrapper">
            <div class="site-wrapper-inner">
                  <div class="masthead clearfix">
                      <div class="inner">
                          <div ng-include src="'views/header.html'"></div>
                      </div>
                  </div>
                  <div class="inner" ng-clock>
                        <div ng-if="hasSidebar" ng-include src="'views/sidebar.html'" id="sidebar" ng-cloak></div>
                        <div id="view" ng-view></div>
                  </div>
                  <div class="mastfoot">
                      <div class="inner">
                          <p>Cover template</p>
                      </div>
                  </div>
            </div>
        </div>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="node_modules/angular-route/angular-route.min.js"></script>

        <script src="controllers/app.js"></script>
    </body>

    </html>

header.html中

<h3 class="masthead-brand">Cover</h3>
<nav>
    <ul class="nav masthead-nav">
        <li class="active"><a ng-href="#/home">Home</a></li>
        <li><a ng-href="#/features">Features</a></li>
        <li><a ng-href="#/contact">Contact</a></li>
        <li><a ng-href="#/dashboard">Dashboard</a></li>
    </ul>
</nav>

sidebar.html

<ul class="list-unstyled">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
</ul>

dashboard.html

<div id="content">
  <h1>Dashboard</h1>
</div>

Answer 1

这可能是因为您在页面底部加载了AngularJS脚本。

请注意，当您指定ng-cloak指令时，Angular本身会隐藏该元素。

由于您的浏览器渲染页面而然后加载Angular，因此可能导致＆＃34;闪烁的时间差异为＃34;。尝试将脚本标记放在页面顶部。

取自AngularJS docs about ngCloak：

为获得最佳效果，必须在头部加载angular.js脚本 html文档的一部分;或者，上面的css规则必须包含在应用程序的外部样式表中。

如何使用AngularJs避免屏幕闪烁？

的index.html

header.html中

sidebar.html

dashboard.html

1 个答案: