AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案

最新推荐文章于 2020-12-19 23:55:15 发布

K'illCode

最新推荐文章于 2020-12-19 23:55:15 发布

阅读量352

点赞数

分类专栏： angularJS 文章标签： angularJS

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

使用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>