Alternative à ng-show / -hide ou comment ne charger que la section pertinente de DOM

Lorsque vous utilisez ng-show / -hide, le contenu de ces blocs s’affiche initialement sur l’écran de l’utilisateur. Ce n’est qu’après quelques millisecondes (après le chargement et l’exécution d’angular.js) que le bon bloc apparaît dans ng-show.

Existe-t-il un meilleur moyen que ng-show / -hide pour ne charger que la section de données pertinente dans le DOM?

Le problème avec ng-view est que je ne peux en avoir qu’un sur la page, donc je dois changer le comportement de nombreuses sections du DOM en fonction de l’état actuel.

Pour éviter le “flash de contenu non compilé”, utilisez ng-bind au lieu de {{}} ou utilisez ng-cloak :

 Hello, {{name}}! 

Si vous utilisez ng-cloak et que vous ne chargez pas Angular.js dans la section head de votre code HTML, vous devrez l’append à votre fichier CSS et vous assurer qu’il est chargé en haut de votre page:

 [ng\:cloak], [ng-cloak], .ng-cloak { display: none; } 

Notez que vous devez uniquement utiliser ces directives sur votre page initiale. Le contenu qui est extrait plus tard (par exemple, via ng-include, ng-view, etc.) sera compilé par Angular avant le rendu du navigateur.

Existe-t-il un meilleur moyen de charger des données autres que ng-show / hide, dans lesquelles seule la section concernée est chargée dans le DOM.

Ng-include , ng-switch et (depuis la v1.1.5) ng-if sont des alternatives à ng-show / ng-hide:

 

Voir aussi https://stackoverflow.com/a/12584774/215945 pour un exemple de ng-switch fonctionnant avec ng-include.

Notez que ng-switch et ng-if ajoutent / suppriment des éléments DOM, alors que ng-show / hide ne modifie que le CSS (si cela compte pour vous).

J’ai utilisé le ng-cloak sortingck et ça ne semble pas bien fonctionner. En suivant la documentation Angular, j’ai ajouté ce qui suit à mon CSS et cela fonctionne:

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

Voir: http://docs.angularjs.org/api/ng.directive:ngCloak

Par la bonne réponse de Mark Rajcok, voici un CodePen montrant ng-show, ng-switch et ng-if en action, vous pouvez donc comparer les approches et voir les différences de rendu du contenu conditionnel.

Notez que certaines personnes pensent que ng-show est un peu plus rapide que ng-switch et ng-if pour les modèles basés sur des fichiers. Mais vous pouvez utiliser $ templateCache pour précharger vos modèles au démarrage, en réduisant ou en éliminant cet avantage. En utilisant ng-switch et ng-if, vous n’avez plus à gérer le contenu conditionnel caché présent dans le DOM lorsque cela n’est pas nécessaire, et vous évitez que des expressions sur ce contenu soient évaluées par Angular à un moment inopportun. Cela vous évite de gaspiller des ressources et évite les erreurs qui peuvent être générées lorsque quelque chose est évalué prématurément.