web-dev-qa-db-fra.com

Stratégie AngularJS pour empêcher le contenu flash sans style pour une classe

J'ai un projet AngularJS, je veux empêcher un FOUC pendant le chargement de la page sur un nom de classe. J'ai lu sur ng-template mais cela ne semble utile que pour le contenu d'une balise.

<body class="{{ bodyClass }}">

Je voudrais que ce soit "login" lors du chargement de la page. Une stratégie pour ça? Ou dois-je simplement le fudger et le charger en tant que "connexion" et utiliser manuellement javascript pour modifier le DOM juste pour cette instance.

javascriptdomangularjsinterpolationfouc
54
Casey Flynn

Ce que vous recherchez est ng-cloak.
Vous devez l'ajouter comme ceci:

<body class="{{ bodyClass }}" ng-cloak>

et cela empêchera le clignotement indésirable.
Lien vers des documents à ce sujet.

Modifier:
Il est également conseillé de mettre l'extrait ci-dessous dans votre fichier CSS, selon les documents.

"Pour un résultat optimal, le script angular.js doit être chargé dans la section head du document html; en variante, la règle css ci-dessus doit être incluse dans la feuille de style externe de l'application."

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

L'un des problèmes auxquels vous êtes confronté est que le navigateur affichera l'élément <body> Avant que AngularJS ne se charge et ne commence à manipuler le DOM. Ce que les autres ont dit à propos de ng-class Est correct, il fera la bonne classe en appliquant mais vous devez toujours ne rien montrer avant Angular est prêt.

Dans les versions précédentes de Angular vous pouviez faire ceci:

<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">

Dans les versions récentes, cela ne fonctionne cependant pas car ng-show Fait sa visibilité en ajoutant et en supprimant la classe ng-hide (Qui est moins spécifique qu'un attribut d'élément)

Ce que j'ai fait récemment est le suivant:

<head>
...
    <style> <!-- Or you could include this in an existing style sheet -->
        .ng-cloak {
            display: none !important;
        }
    </style>    
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">

En procédant de cette façon, le <body> Sera immédiatement masqué par le style de la classe ng-cloak. Lorsque Angular démarre, il traitera toutes les directives, y compris ng-class Et ng-cloak, Donc votre élément <body> Aura alors le droit classe et être visible.

En savoir plus ici directive ng-cloak

23
Nicholas Green

Il existe une solution au problème de flash en CSS simple qui est pare-balles. Pour la classe de l'élément racine de votre application, ajoutez ce qui suit. Cette solution fonctionne par ordre de traitement: tout est caché dans CSS, angular est chargé, puis CSS montre la racine de l'application. J'aime l'utiliser ainsi s'il y a d'autres éléments non angulaires sur la page qu'ils afficheront en premier, ce qui semblera se charger plus rapidement.

/* in your CSS file in head */
.myApp {
    display:none;
}

<div class="myApp" ng-app="myApp"></div>

Juste avant la fin du corps, ajoutez vos références de script et quelques CSS en ligne:

<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
    display:block;
}
</style>
</body>
6
mbokil

Au lieu d'utiliser la classe, vous devez utiliser ng-class

<body ng-class="{{ bodyClass }}">
3
Alex G

J'ai remarqué que parfois même ng-cloak ne semble pas vraiment fonctionner. Peut-être que je fais quelque chose de mal.

<body ng-cloak class="{{ bodyClass }}">

Je fais aussi une petite chose similaire à @mbokil, vous pouvez masquer l'élément par défaut. En utilisant un sélecteur d'attribut ciblant tous les éléments avec l'attribut ng-cloak, vous pouvez utiliser les directives angular. Cela présente plusieurs avantages, mais le principal avantage est une fois angular se déclenche, il supprime cet attribut qui déclenchera un redessin.

<style>
  [ng-cloak] {
    display:none;
  }
</style>
1
Jeff Richardson