Quand privilégier ng-if vs ng-show / ng-hide?

Je comprends cela ng-showet ng-hideaffecte l'ensemble de classes sur un élément et qui ng-ifcontrôle si un élément est rendu dans le cadre du DOM.

Existe-t-il des directives sur le choix ng-ifde ng-show/ ng-hideou vice-versa?

Dépend de votre cas d'utilisation mais pour résumer la différence:

1. ng-ifsupprimera les éléments du DOM. Cela signifie que tous vos gestionnaires ou tout autre élément attaché à ces éléments seront perdus. Par exemple, si vous liez un gestionnaire de clics à l'un des éléments enfants, lorsqu'il est ng-ifévalué à faux, cet élément sera supprimé du DOM et votre gestionnaire de clics ne fonctionnera plus, même après une ng-ifévaluation ultérieure à true et l'affichage de l'élément. Vous devrez rattacher le gestionnaire.
2. ng-show/ng-hidene supprime pas les éléments du DOM. Il utilise des styles CSS pour masquer / afficher les éléments (remarque: vous devrez peut-être ajouter vos propres classes). De cette façon, vos gestionnaires attachés aux enfants ne seront pas perdus.
3. ng-ifcrée une portée enfant ng-show/ng-hidesans

Les éléments qui ne sont pas dans le DOM ont moins d'impact sur les performances et votre application Web peut sembler plus rapide lors de l'utilisation ng-ifpar rapport à ng-show/ng-hide. D'après mon expérience, la différence est négligeable. Des animations sont possibles lors de l'utilisation des deux ng-show/ng-hideet ng-if, avec des exemples pour les deux dans la documentation Angular.

En fin de compte, la question à laquelle vous devez répondre est de savoir si vous pouvez supprimer l'élément du DOM ou non?

Voir ici pour un CodePen qui montre la différence dans le fonctionnement de ng-if / ng-show, DOM-sage.

@markovuksanovic a bien répondu à la question. Mais je viens à partir d' un autre point de vue: je toujours utiliser ng-ifet obtenir ces éléments de DOM, à moins que :

1. pour une raison quelconque, vous avez besoin des liaisons de données et des $watch-es sur vos éléments pour rester actifs pendant qu'ils sont invisibles. Les formulaires peuvent être un bon cas pour cela, si vous voulez pouvoir vérifier la validité des entrées qui ne sont pas actuellement visibles, afin de déterminer si l'ensemble du formulaire est valide.
2. Vous utilisez une logique d'état très élaborée avec des gestionnaires d'événements conditionnels, comme mentionné ci-dessus. Cela dit , si vous vous trouvez à attacher et à détacher manuellement des gestionnaires, de sorte que vous perdez un état important lorsque vous utilisez ng-if, demandez-vous si cet état serait mieux représenté dans un modèle de données, et les gestionnaires appliqués conditionnellement par des directives à chaque fois l'élément est rendu. Autrement dit, la présence / absence de gestionnaires est une forme de données d'état. Obtenez ces données du DOM et dans un modèle. La présence / absence des gestionnaires doit être déterminée par les données et donc facile à recréer.

Angular est très bien écrit. C'est rapide, vu ce qu'il fait. Mais ce qu'il fait, c'est tout un tas de magie qui rend les choses difficiles (comme la liaison de données bidirectionnelle) très simples. Rendre toutes ces choses faciles implique des frais généraux de performance. Vous pourriez être choqué de réaliser combien de centaines ou de milliers de fois une fonction de définition est évaluée pendant le $digestcycle sur un morceau de DOM que personne ne regarde même. Et puis vous vous rendez compte que vous avez des dizaines ou des centaines d'éléments invisibles faisant tous la même chose ...

Les bureaux peuvent en effet être suffisamment puissants pour rendre la plupart des problèmes de vitesse d'exécution JS sans objet. Mais si vous développez pour mobile, utiliser ng-if chaque fois que cela est humainement possible devrait être une évidence. La vitesse JS compte toujours sur les processeurs mobiles. L'utilisation de ng-if est un moyen très simple d'obtenir une optimisation potentiellement significative à un coût très, très faible.

Selon mon expérience:

1) Si votre page a une bascule qui utilise ng-if / ng-show pour afficher / masquer quelque chose, ng-if entraîne plus de retard dans le navigateur (plus lent). Par exemple: si vous avez un bouton utilisé pour basculer entre deux vues, ng-show semble être plus rapide.

2) ng-if créera / détruira la portée quand il évaluera à vrai / faux. Si vous avez un contrôleur attaché au ng-if, ce code de contrôleur sera exécuté à chaque fois que le ng-if aura la valeur true. Si vous utilisez ng-show, le code du contrôleur n'est exécuté qu'une seule fois. Donc, si vous avez un bouton qui bascule entre plusieurs vues, l'utilisation de ng-if et ng-show ferait une énorme différence dans la façon dont vous écrivez le code de votre contrôleur.

La réponse n'est pas simple:

Cela dépend des machines cibles (mobile vs desktop), cela dépend de la nature de vos données, du navigateur, du système d'exploitation, du matériel sur lequel il fonctionne ... vous aurez besoin de comparer si vous voulez vraiment savoir.

C'est principalement un problème de mémoire vs de calcul ... comme avec la plupart des problèmes de performances, la différence peut devenir significative avec des éléments répétés (n) comme des listes, en particulier lorsqu'ils sont imbriqués (nxn, ou pire) et aussi quel type de calculs vous exécutez à l'intérieur de ces éléments :

• ng-show : si ces éléments facultatifs sont souvent présents (denses), comme disons 90% du temps, il peut être plus rapide de les avoir prêts et de les afficher / masquer uniquement, surtout si leur contenu est bon marché (juste du texte brut, rien pour calculer ou charger). Cela consomme de la mémoire car il remplit le DOM d'éléments cachés, mais simplement afficher / masquer quelque chose qui existe déjà est susceptible d'être une opération bon marché pour le navigateur.

• ng-if : Si au contraire les éléments ne sont probablement pas affichés (rares), il suffit de les construire et de les détruire en temps réel, surtout si leur contenu est cher à obtenir (calculs / triés / filtrés, images, images générées). Ceci est idéal pour les éléments rares ou `` à la demande '', il économise de la mémoire en termes de non remplissage du DOM mais peut coûter beaucoup de calcul (création / destruction d'éléments) et de bande passante (obtention de contenu distant). Cela dépend également de la quantité que vous calculez dans la vue (filtrage / tri) par rapport à ce que vous avez déjà dans le modèle (données pré-triées / pré-filtrées).

Une remarque importante:

ngIf (contrairement à ngShow) crée généralement des étendues enfants qui peuvent produire des résultats inattendus.

J'ai eu un problème lié à cela et j'ai passé BEAUCOUP de temps à comprendre ce qui se passait.

(Ma directive écrivait ses valeurs de modèle dans la mauvaise portée.)

Donc, pour sauver vos cheveux, utilisez simplement ngShow à moins que vous ne couriez trop lentement.

La différence de performance est à peine perceptible de toute façon et je ne sais pas encore qui est en faveur sans test ...

ng-if sur ng-include et sur ng-controller aura un impact important sur ng-include, il ne chargera pas le partiel requis et ne traitera pas à moins que flag soit vrai sur ng-controller il ne chargera pas le contrôleur à moins que flag ne soit true mais le problème est quand un drapeau devient faux dans ng-si il se retire du DOM quand le drapeau revient vrai il rechargera le DOM dans ce cas ng-show est meilleur, pour une fois montrer ng-if est meilleur

Si vous utilisez ng-show or ng-hidele contenu (par exemple, les miniatures du serveur) sera chargé quelle que soit la valeur de l'expression mais sera affiché en fonction de la valeur de l'expression.

Si vous utilisez, ng-ifle contenu ne sera chargé que si l'expression du ng-if est jugée véridique.

L'utilisation de ng-if est une bonne idée dans une situation où vous allez charger des données ou des images à partir du serveur et les afficher uniquement en fonction de l'interaction des utilisateurs. De cette façon, le chargement de votre page ne sera pas bloqué par des tâches intensives inutiles.