AngularJS: Por que ng-bind é melhor que {{}} em angular?

Eu participei de uma das apresentações angulares e uma das pessoas da reunião mencionada ng-bindé melhor do que {{}}obrigatória.

Um dos motivos, ng-bindcoloque a variável na lista de observação e somente quando houver uma alteração de modelo, os dados serão pressionados para visualizar, por outro lado, {{}}interpolará a expressão toda vez (acho que é o ciclo angular) e pressione a tecla valor, mesmo que o valor tenha sido alterado ou não.

Também é dito que, se você não tiver muitos dados na tela, poderá usá-lo {{}}e o problema de desempenho não será visível. Alguém pode lançar alguma luz sobre esse assunto para mim?

Se você não estiver usando ng-bind, algo como isto:

<div>
  Hello, {{user.name}}
</div>

você pode ver o real Hello, {{user.name}}por um segundo antes de user.nameser resolvido (antes dos dados serem carregados)

Você poderia fazer algo assim

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

se isso é um problema para você.

Outra solução é usar ng-cloak.

Visibilidade:

Enquanto o angularjs estiver inicializando, o usuário poderá ver os colchetes no html. Isso pode ser tratado com ng-cloak. Mas, para mim, esta é uma solução alternativa, que não preciso usar, se usar ng-bind.

Atuação:

O {{}}é muito mais lento .

Esta ng-bindé uma diretiva e colocará um observador na variável passada. Portanto, ng-bindisso só será aplicado quando o valor transmitido realmente mudar .

Os suportes, por outro lado, serão sujos verificados e atualizados em todos $digest , mesmo que não seja necessário .

No momento, estou criando um grande aplicativo de página única (~ 500 ligações por visualização). Mudar de {{}} para estrito ng-bindeconomizou cerca de 20% em todos scope.$digest.

Sugestão :

Se você usar um módulo de conversão como angular-translate , sempre prefira diretivas antes da anotação entre colchetes.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Se você precisar de uma função de filtro, é melhor optar por uma diretiva, que na verdade apenas usa seu filtro personalizado. Documentação para o serviço $ filter

ATUALIZAÇÃO 28.11.2014 (mas talvez fora do tópico):

No Angular 1.3x, a bindoncefuncionalidade foi introduzida. Portanto, você pode vincular o valor de uma expressão / atributo uma vez (será vinculado quando! = 'Indefinido').

Isso é útil quando você não espera que sua ligação seja alterada.

Uso: Coloque ::antes da ligação:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Exemplo:

ng-repeatpara gerar alguns dados na tabela, com várias ligações por linha. Ligações de tradução, saídas de filtro, que são executadas em todos os resumos de escopo.

ng-bind é melhor que {{...}}

Por exemplo, você poderia fazer:

<div>
  Hello, {{variable}}
</div>

Isso significa que o texto inteiro Hello, {{variable}}incluído por <div>será copiado e armazenado na memória.

Se você fizer algo assim:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Somente o valor do valor será armazenado na memória e angular registrará um observador (expressão de observação) que consiste apenas na variável.

Basicamente, a sintaxe com duas curvas é mais legível naturalmente e requer menos digitação.

Ambos os casos produzem a mesma saída, mas .. se você optar por continuar, {{}}há uma chance de que o usuário veja por alguns milissegundos {{}}antes que seu modelo seja renderizado em angular. Então, se você notar algum {{}}, é melhor usar ng-bind.

Também muito importante é que somente no index.html do seu aplicativo angular você pode não renderizar {{}}. Se você estiver usando diretivas, então modelos, não há chance de ver isso, porque angular primeiro processa o modelo e depois anexa-o ao DOM.

{{...}}significa ligação de dados bidirecional. Mas, ng-bind é realmente destinado à ligação de dados unidirecional.

O uso do ng-bind reduzirá o número de observadores em sua página. Portanto, o ng-bind será mais rápido que {{...}}. Portanto, se você deseja exibir apenas um valor e suas atualizações e não deseja refletir sua alteração da interface do usuário de volta para o controlador, vá para ng-bind . Isso aumentará o desempenho da página e reduzirá o tempo de carregamento da página.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Isso ocorre porque {{}}o compilador angular considera o nó de texto e seu pai, pois existe a possibilidade de mesclar 2 {{}}nós. Portanto, há vinculadores adicionais que aumentam o tempo de carregamento. É claro que, para algumas dessas ocorrências, a diferença é imaterial; no entanto, quando você a usa em um repetidor de grande número de itens, isso causa um impacto no ambiente de tempo de execução mais lento.

A razão pela qual o Ng-Bind é melhor porque,

Quando a sua página não está carregada, a internet está lenta ou o site carregado pela metade, você pode ver esses tipos de problemas (verifique a captura de tela com a marca de leitura) serão acionados na tela, o que é completamente estranho. Para evitar isso, devemos usar o Ng-bind

O ng-bind também tem seus problemas. Quando você tenta usar filtros angulares , limites ou qualquer outra coisa, talvez tenha problemas se usar o ng-bind . Mas, em outro caso, o ng-bind é melhor no lado do UX. Quando o usuário abre uma página, ele (10ms-100ms) exibe os símbolos ( {{...}} ), é por isso que o ng-bind é melhor .

Há algum problema de cintilação em {{}}, como quando você atualiza a página e, por um breve período de spam, é vista uma expressão. Portanto, devemos usar ng-bind em vez de expressão para representação de dados.

ng-bindtambém é mais seguro porque representa htmlcomo uma sequência.

Por exemplo, '<script on*=maliciousCode()></script>'será exibido como uma sequência e não será executado.

De acordo com o Angular Doc:
como o ngBind é um atributo do elemento, torna as ligações invisíveis para o usuário enquanto a página está carregando ... é a principal diferença ...

Basicamente, até que todos os elementos dom não sejam carregados, não podemos vê-los e, como ngBind é um atributo do elemento, ele espera até que os doms entrem em jogo ... mais informações abaixo

ngBind
- diretiva no módulo ng

O atributo ngBind diz ao AngularJS para substituir o conteúdo de texto do elemento HTML especificado pelo valor de uma determinada expressão e atualizar o conteúdo de texto quando o valor dessa expressão for alterado.

Normalmente, você não usa o ngBind diretamente , mas usa a marcação dupla como {{expression}}, que é semelhante, mas menos detalhada.

É preferível usar ngBind em vez de {{expression}} se um modelo for exibido momentaneamente pelo navegador em seu estado bruto antes que o AngularJS o compile. Como ngBind é um atributo do elemento, torna as ligações invisíveis para o usuário enquanto a página está carregando.

Uma solução alternativa para esse problema seria usar a diretiva ngCloak . visite aqui

para obter mais informações sobre o ngbind, visite esta página: https://docs.angularjs.org/api/ng/directive/ngBind

Você pode fazer algo assim como atributo, ng-bind :

<div ng-bind="my.name"></div>

ou faça a interpolação como abaixo:

<div>{{my.name}}</div>

ou dessa maneira com os atributos ng-cloak nos AngularJs:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-manto evite piscar no dom e aguarde até que tudo esteja pronto! isso é igual ao atributo ng-bind ...

Você pode consultar este site, ele fornecerá uma explicação sobre qual é o melhor, pois eu sei que {{}} isso é mais lento que o ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html consulte este site.