ng-bind及ng-cloak解决AngularJs页面加载闪屏问题

最新推荐文章于 2022-03-14 16:34:50 发布

zhifeng687

最新推荐文章于 2022-03-14 16:34:50 发布

阅读量887

点赞数

分类专栏： angular.js

angular.js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用AngularJS中的ng-cloak指令解决页面加载过程中出现的闪屏问题，并对比了双花括号表达式与ng-bind指令的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用AngularJs获取数据之后,可以使用双花括号表达式或者是ng-bind指令把数据添加到html中，但是这里涉及到一个前端页面渲染与性能的问题。

如果把js文件放在head头部，这时用户网络不好或者是js文件太大一时加载不完，就会出现页面混乱的局面。所以，一般情况下，我们是把js文件放在html页面的底部，等html和css加载完成之后再来执行js代码，但是在body体中要从Angular中获取数据，否则，网络一卡，用户会看到两个花括号{{]}，而没有任何数据，这种想象称为“闪屏”，下面是具体的解决方法：

使用ng-cloak指令，先把页面隐藏，等angular代码加载完成之后，再把html代码显示出来：

 
        01 <!doctype html>
 
        02 <html lang="en">
 
        03     <head>
 
        04         <meta charset="UTF-8">
 
        05         <title>Document</title>
 
        06         <meta name="Keywords" content="">
 
        07         <meta name="Description" content="">
 
        08         <style type="text/css">
 
        09             .ng-cloak{display:none;}
 
        10         </style>
 
        11     </head>
 
        12     <body>
 
        13         <div ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
 
        14             {{name}}
 
        15             <br/>
 
        16             <p ng-bind="name"></p>
 
        17         </div>
 
        18     </body>
 
        19 </html>
 
        20 <script type="text/javascript" src="../js/angular.min.js"></script>
 
        21 <script type="text/javascript">
 
        22     var m = angular.module('app', []);
 
        23     m.controller('ctrl', ['$scope', function($scope){
 
        24         $scope.name = '赵一鸣';
 
        25     }]);
 
        26 </script>