如何避免屏幕闪烁与 AngularJs.

How to avoid screen flickering with AngularJs?

本文关键字：AngularJs 闪烁 屏幕 何避免      更新时间：2023-09-26

我是角度的新手。我使用AngularJS来开发前端。但是在初始级别，我面临加载页面时闪烁某些内容的问题。

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

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

索引.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>

标头.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>

侧边栏.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>

仪表板.html

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

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

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

由于您让浏览器渲染页面然后加载 Angular，因此那里的时差可能会导致"闪烁"。尝试将脚本标记放在页面顶部。

摘自关于ngCloak的AngularJS文档：

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

相关文章：