Quando favorecer ng-if vs. ng-show / ng-hide?

Eu entendo isso ng-showe ng-hideafeta a classe definida em um elemento e que ng-ifcontrola se um elemento é renderizado como parte do DOM.

Existem diretrizes para escolher ng-ifentre ng-show/ ng-hideou vice-versa?

Depende do seu caso de uso, mas para resumir a diferença:

1. ng-ifremoverá elementos do DOM. Isso significa que todos os seus manipuladores ou qualquer outra coisa anexada a esses elementos serão perdidos. Por exemplo, se você vincular um manipulador de cliques a um dos elementos filhos, quando for ng-ifavaliado como falso, esse elemento será removido do DOM e o manipulador de cliques não funcionará mais, mesmo depois que ng-ifavaliar como true e exibir o elemento. Você precisará reconectar o manipulador.
2. ng-show/ng-hidenão remove os elementos do DOM. Ele usa estilos CSS para ocultar / mostrar elementos (nota: você pode precisar adicionar suas próprias classes). Dessa forma, seus manipuladores anexados a crianças não serão perdidos.
3. ng-ifcria um escopo filho enquanto ng-show/ng-hidenão

Os elementos que não estão no DOM têm menos impacto no desempenho e seu aplicativo Web pode parecer mais rápido quando usado em ng-ifcomparação com ng-show/ng-hide. Na minha experiência, a diferença é insignificante. As animações são possíveis ao usar ambos ng-show/ng-hidee ng-if, com exemplos para ambos na documentação Angular.

Por fim, a pergunta que você precisa responder é se você pode remover o elemento do DOM ou não?

Veja aqui um CodePen que demonstra a diferença de como o ng-if / ng-show funciona, em termos de DOM.

@markovuksanovic respondeu bem à pergunta. Mas eu chegaria a isso de outra perspectiva: eu sempre usava ng-ife tirava esses elementos do DOM, a menos que:

1. por algum motivo, você precisa das associações de dados e $watch-es em seus elementos para permanecer ativo enquanto eles estão invisíveis. Os formulários podem ser um bom argumento para isso, se você quiser verificar a validade das entradas que não estão visíveis no momento, para determinar se o formulário inteiro é válido.
2. Você está usando uma lógica stateful realmente elaborada com manipuladores de eventos condicionais, como mencionado acima. Dito isto , se você se encontra anexando e desanexando manualmente manipuladores, de modo a perder um estado importante ao usar ng-if, pergunte-se se esse estado seria melhor representado em um modelo de dados e os manipuladores aplicados condicionalmente por diretivas sempre que o elemento é renderizado. Em outras palavras, a presença / ausência de manipuladores é uma forma de dados de estado. Tire esses dados do DOM e entre em um modelo. A presença / ausência dos manipuladores deve ser determinada pelos dados e, portanto, fácil de recriar.

Angular está escrito muito bem. É rápido, considerando o que faz. Mas o que ele faz é um monte de mágica que faz coisas difíceis (como ligação de dados bidirecional) parecerem trivialmente fáceis. Fazer com que todas essas coisas pareçam fáceis implica alguma sobrecarga de desempenho. Você pode ficar chocado ao perceber quantas centenas ou milhares de vezes uma função setter é avaliada durante o $digestciclo em um pedaço de DOM que ninguém está olhando. E então você percebe que tem dezenas ou centenas de elementos invisíveis, todos fazendo a mesma coisa ...

Os desktops podem realmente ser poderosos o suficiente para tornar a maioria dos problemas de velocidade de execução de JS discutíveis. Mas se você estiver desenvolvendo para dispositivos móveis, usar ng-if sempre que humanamente possível deve ser um acéfalo. A velocidade do JS ainda é importante nos processadores móveis. Usar ng-if é uma maneira muito fácil de obter otimização potencialmente significativa a um custo muito, muito baixo.

Da minha experiência:

1) Se sua página tiver uma alternância que usa ng-if / ng-show para mostrar / ocultar algo, ng-if causa mais atraso no navegador (mais lento). Por exemplo: se você tem um botão usado para alternar entre duas visualizações, o ng-show parece ser mais rápido.

2) ng-if criará / destruirá o escopo quando for avaliado como verdadeiro / falso. Se você tiver um controlador conectado ao ng-if, esse código será executado toda vez que o ng-if for avaliado como verdadeiro. Se você estiver usando o ng-show, o código do controlador será executado apenas uma vez. Portanto, se você tiver um botão que alterna entre várias visualizações, o uso de ng-if e ng-show faria uma enorme diferença na maneira como você escreve o código do seu controlador.

A resposta não é simples:

Depende das máquinas de destino (móvel x desktop), depende da natureza dos seus dados, navegador, sistema operacional, hardware em que é executado ... você precisará avaliar se realmente deseja saber.

É principalmente um problema de memória versus computação ... como na maioria dos problemas de desempenho, a diferença pode se tornar significativa com elementos repetidos (n) como listas, especialmente quando aninhados (nxn ou pior) e também que tipo de computação você executa dentro desses elementos :

• ng-show : se esses elementos opcionais estiverem frequentemente presentes (densos), como por exemplo 90% das vezes, pode ser mais rápido tê-los prontos e apenas mostrá-los / ocultá-los, especialmente se o conteúdo for barato (apenas texto simples, nada para calcular ou carregar). Isso consome memória, pois preenche o DOM com elementos ocultos, mas apenas mostrar / ocultar algo que já existe provavelmente será uma operação barata para o navegador.

• ng-if : Se, pelo contrário, é provável que os elementos não sejam mostrados (esparsos), apenas construa-os e destrua-os em tempo real, especialmente se seu conteúdo for caro (computações / classificadas / filtradas, imagens, imagens geradas). Isso é ideal para elementos raros ou "sob demanda", economiza memória em termos de não preencher o DOM, mas pode custar muita computação (criação / destruição de elementos) e largura de banda (obtenção de conteúdo remoto). Também depende de quanto você calcula na visualização (filtragem / classificação) versus o que você já possui no modelo (dados pré-classificados / pré-filtrados).

Uma observação importante:

ngIf (diferentemente do ngShow) geralmente cria escopos filhos que podem produzir resultados inesperados.

Eu tive um problema relacionado a isso e passei MUITO tempo para descobrir o que estava acontecendo.

(Minha diretiva estava gravando seus valores de modelo no escopo errado.)

Portanto, para economizar seu cabelo, use o ngShow, a menos que você corra muito devagar.

De qualquer forma, a diferença de desempenho é quase imperceptível e ainda não tenho certeza de quem é o favor sem um teste ...

ng-if em ng-include e no ng-controller terão um grande impacto sobre ng-include, ele não carregará a parcial necessária e não será processada, a menos que o sinalizador seja verdadeiro no ng-controller, não carregará o controlador a menos que o sinalizador seja true, mas o problema é quando um sinalizador fica falso em ng - se ele for removido do DOM quando o sinalizador voltar verdadeiro, recarregará o DOM neste caso, ng-show é melhor, por uma vez mostre ng-se é melhor

Se você usar ng-show or ng-hideo conteúdo (por exemplo, miniaturas do servidor), será carregado independentemente do valor da expressão, mas será exibido com base no valor da expressão.

Se você usar, ng-ifo conteúdo será carregado apenas se a expressão do ng-if for avaliada como verdadeira.

Usar ng-if é uma boa ideia em uma situação em que você irá carregar dados ou imagens do servidor e mostrá-los apenas dependendo da interação do usuário. Dessa forma, o carregamento da sua página não será bloqueado por tarefas desnecessárias e desnecessárias.