AngularJS: Comment empêcher le "code flash" dans la page lors du chargement

J'ai créé une application simple utilisant AngularJS. Quand j'ouvre la page pour une deuxième que je vois l'écran ci-dessous:

AngularJS: Comment empêcher le

Cependant, après la charge est terminée, je vois le chargement et le style de contenu, ce qui est bien:

AngularJS: Comment empêcher le

Comment puis-je empêcher le flash de AngularJS code sur ma page ? Est-ce lié à FOUC ?

Voici le code HTML:

<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style>
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="left tab-bar-section">
<h1 class="title">Salary Calculator</h1>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Location</label>
</li>
<li><a href="#">United Kingdom</a>
</li>
</ul>
</aside>
<section class="main-section">
<div class="row full-width">
<div class="large-4 columns">
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Annual Salary</a>
</li>
<li class="tab-title"><a href="#panel2">Monthly Expenses</a>
</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/>
</div>
</div>
</div>
<div class="content" id="panel2">
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/>
</div>
</div>
</div>
</div>
</div>
<div class="large-8 columns"  ng-cloak >
<table >
<thead>
<tr>
<th width="200"></th>
<th width="250">Yearly</th>
<th width="250">Monthly</th>
<th width="250">Weekly</th>
<th width="250">Daily</th>
</tr>
</thead>
<tbody ng-repeat="val in results">
<tr>
<td>{{val.rowType}}</td>
<td>{{val.yearly}}</td>
<td>{{val.monthly}}</td>
<td>{{val.weekly}}</td>
<td>{{val.daily}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="../bower_components/angularjs/angular.js"></script>
<script src="js/app-service.js"></script>
<script src="js/app-controller.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

EDIT:

Veuillez voir ma réponse ainsi pour une solution alternative, en plus de la a accepté.

source d'informationauteur Cemre | 2015-02-14

  1. 23

    ng-manteau sera de les aider dans une certaine mesure, mais vous pouvez éviter cela en utilisant ng-bind au lieu d'utiliser {{ }}.

    par exemple 

    <td ng-bind="val.monthly"> </td>

    pas 

    <td>{{val.monthly}}</td>
  2. 5

    Il a été un long temps, mais ici, c'est pour ma solution de travail pour celui-ci:

    Vous devez utiliser ng-cloak sur la balise body de votre code html, MAIS le plus important, c'est que le CSS ci-dessous:

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
    }

    Pour moi, j'ai dû ajouter ceci pour arriver ng-manteau de travail. Ce n'est probablement pas la seule solution à ce problème, comme on peut le voir dans d'autres réponses. Espérons que cela aide quelqu'un.

  3. 4

    Angulaire vous donne déjà l'outil pour éviter cela: ngCloak: https://docs.angularjs.org/api/ng/directive/ngCloak

    Il suffit de mettre la directive sur votre corps comme <body ng-cloak> et cela devrait fonctionner.

    MODIFIER
    Les Docs vous conseillons également de fait pas le mettre sur le corps, mais sur de plus petites portions de votre page - si vous voyez la nécessité. Selon la taille de votre page, c'est une bonne idée. Pour les petits Pages je l'ai mis sur le corps et jamais eu de problèmes.