Alternativa para ng-show / -hide ou como carregar somente a seção relevante do DOM

Ao usar ng-show / -hide, o conteúdo incluído nesses blocos inicialmente é exibido na canvas do usuário. Somente após alguns milissegundos (depois que o angular.js foi carregado e executado), o bloco correto aparece no ng-show.

Existe uma maneira melhor do que ng-show / -hide para carregar apenas a seção relevante de dados para o DOM?

O problema com o ng-view é que eu posso ter apenas um na página, então eu tenho que alternar o comportamento de muitas seções do DOM com base no estado atual.

Para evitar o “flash de conteúdo não compilado”, use ng-bind em vez de {{}} ou use ng-cloak :

 Hello, {{name}}! 

Se você usar o ng-cloak e não carregar o Angular.js na seção head do seu HTML, você precisará adicioná-lo ao seu arquivo CSS e garantir que ele seja carregado na parte superior da sua página:

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

Observe que você só precisa usar essas diretivas na sua página inicial. O conteúdo extraído posteriormente (por exemplo, ng-include, ng-view, etc.) será compilado pelo Angular antes do renderizador do navegador.

Existe uma maneira melhor de carregar dados diferentes de ng-show / hide, em que apenas a seção relevante é carregada no DOM.

Algumas alternativas para ng-show / ng-hide são ng-include , ng-switch e (desde v1.1.5) ng-if :

 

Veja também https://stackoverflow.com/a/12584774/215945 para um exemplo de ng-switch trabalhando em conjunto com ng-include.

Note que ng-switch e ng-if adicionam / removem elementos DOM, enquanto que ng-show / hide apenas altera o CSS (se isso é importante para você).

Eu usei o truque ng-manto e não parece funcionar tão bem. Seguindo a documentação Angular, adicionei o seguinte ao meu CSS e isso funciona:

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

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

A bela resposta de Per Mark Rajcok, aqui está uma CodePen mostrando ng-show, ng-switch e ng-if em ação, para que você possa comparar as abordagens e ver diferenças em como o conteúdo condicional é realmente renderizado.

Note que algumas pessoas acham que ng-show é um pouco mais rápido que ng-switch e ng-if para templates baseados em arquivos. Mas você pode usar o $ templateCache para pré-carregar seus modelos no momento da boot, reduzindo ou eliminando essa vantagem. Usando ng-switch e ng-if, você não precisa mais lidar com conteúdo condicional oculto no DOM quando não é necessário, e evitar que expressões nesse conteúdo sejam avaliadas pelo Angular em momentos inoportunos. Isso economiza resources de processamento que você não precisa desperdiçar e evita erros que podem ser gerados quando algo é avaliado prematuramente.