AngularJS: Perché ng-bind è meglio di {{}} in angolare?

Ero in una presentazione angolare e una delle persone nella riunione menzionata ng-bindè meglio che {{}}impegnativa.

Uno dei motivi, ng-bindinserisci la variabile nell'elenco di controllo e solo quando si verifica un cambio di modello, i dati vengono spinti a visualizzare, d'altra parte, {{}}interpolano l'espressione ogni volta (suppongo sia il ciclo angolare) e spingono il valore, anche se il valore è cambiato o meno.

Inoltre si dice che, se non ci sono molti dati sullo schermo, è possibile utilizzare {{}}e il problema delle prestazioni non sarà visibile. Qualcuno può fare luce su questo problema per me?

Se non si utilizza ng-bind, invece qualcosa del genere:

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

potresti vedere l'effettivo Hello, {{user.name}}per un secondo prima che user.namevenga risolto (prima che i dati vengano caricati)

Potresti fare qualcosa del genere

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

se questo è un problema per te.

Un'altra soluzione è usare ng-cloak.

Visibilità:

Mentre angularjs sta eseguendo il bootstrap, l'utente potrebbe vedere le parentesi posizionate nell'html. Questo può essere gestito con ng-cloak. Ma per me questa è una soluzione alternativa, che non ho bisogno di usare, se uso ng-bind.

Prestazione:

Il {{}}è molto più lento .

Questa ng-bindè una direttiva e posizionerà un watcher sulla variabile passata. Quindi ng-bindverrà applicato solo quando il valore passato cambia effettivamente .

Le parentesi invece saranno sporche controllate e aggiornate in ogni $digest , anche se non è necessario .

Attualmente sto realizzando una grande app a pagina singola (~ 500 associazioni per visualizzazione). Passare da {{}} a rigoroso ci ha ng-bindfatto risparmiare circa il 20% in ogni scope.$digest.

Suggerimento :

Se usi un modulo di traduzione come angular-translate , preferisci sempre le direttive prima dell'annotazione tra parentesi.

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

Se hai bisogno di una funzione di filtro, meglio scegliere una direttiva, che in realtà utilizza solo il tuo filtro personalizzato. Documentazione per il servizio $ filter

AGGIORNAMENTO 28.11.2014 (ma forse fuori tema):

In Angular 1.3x è bindoncestata introdotta la funzionalità. Pertanto è possibile associare il valore di un'espressione / attributo una volta (verrà associato quando! = 'Non definito').

Questo è utile quando non ti aspetti che il tuo legame cambi.

Utilizzo: Posiziona ::prima della rilegatura:

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

Esempio:

ng-repeatper generare alcuni dati nella tabella, con più associazioni per riga. Binding di traduzione, output di filtro, che vengono eseguiti in ogni digest dell'ambito.

ng-bind è meglio di {{...}}

Ad esempio, potresti fare:

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

Ciò significa che l'intero testo Hello, {{variable}}racchiuso da <div>verrà copiato e archiviato in memoria.

Se invece fai qualcosa del genere:

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

Solo il valore del valore verrà memorizzato e angolare registrerà un watcher (espressione di controllo) che consiste solo nella variabile.

Fondamentalmente la sintassi a doppio riccio è più naturalmente leggibile e richiede meno digitazione.

Entrambi i casi producono lo stesso output ma ... se si sceglie di andare avanti {{}}c'è una possibilità che l'utente vedrà per alcuni millisecondi {{}}prima che il modello venga visualizzato in modo angolare. Quindi, se noti qualcosa, {{}}è meglio usarlo ng-bind.

Anche molto importante è che solo nel tuo index.html della tua app angolare puoi non renderizzare {{}}. Se stai usando le direttive, quindi i modelli, non c'è alcuna possibilità di vederlo perché angolare prima rende il modello e dopo lo aggiunge al DOM.

{{...}}si intende l'associazione dati bidirezionale. Ma ng-bind è in realtà pensato per l'associazione dati unidirezionale.

L'uso di ng-bind ridurrà il numero di osservatori nella tua pagina. Quindi ng-bind sarà più veloce di {{...}}. Quindi, se vuoi solo visualizzare un valore e i suoi aggiornamenti e non vuoi riflettere la sua modifica dall'interfaccia utente al controller, allora scegli ng-bind . Ciò aumenterà le prestazioni della pagina e ridurrà il tempo di caricamento della pagina.

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

Questo perché con {{}}il compilatore angolare considera sia il nodo di testo sia il suo genitore in quanto esiste la possibilità di unire 2 {{}}nodi. Quindi ci sono linker aggiuntivi che si aggiungono al tempo di caricamento. Naturalmente per alcuni di questi casi la differenza è irrilevante, tuttavia quando lo si utilizza all'interno di un ripetitore di un gran numero di elementi, si avrà un impatto in un ambiente di runtime più lento.

Il motivo per cui Ng-Bind è migliore perché,

Quando la tua pagina non è caricata o quando Internet è lento o quando il tuo sito web è caricato a metà, puoi vedere questo tipo di problemi (Controlla lo screenshot con il segno Leggi) verrà attivato sullo schermo che è completamente strano. Per evitare ciò, dovremmo usare Ng-bind

Anche ng-bind ha i suoi problemi. Quando provi ad usare filtri angolari , limit o qualcos'altro, potresti avere problemi se usi ng-bind . Ma in altri casi, ng-bind è migliore nel lato UX. Quando l'utente apre una pagina, vedrà (10ms-100ms) che stampa i simboli ( {{...}} ), ecco perché ng-bind è migliore .

C'è un problema di sfarfallio in {{}} come quando si aggiorna la pagina, quindi per un breve spam si vede l'espressione del tempo, quindi dovremmo usare ng-bind invece di expression per la rappresentazione dei dati.

ng-bindè anche più sicuro perché rappresenta htmlcome una stringa.

Ad esempio, '<script on*=maliciousCode()></script>'verrà visualizzato come una stringa e non verrà eseguito.

Secondo Angular Doc:
Poiché ngBind è un attributo element, rende i binding invisibili all'utente durante il caricamento della pagina ... è la differenza principale ...

Fondamentalmente fino a quando tutti gli elementi dom non vengono caricati, non possiamo vederli e poiché ngBind è un attributo sull'elemento, attende fino a quando i dom entrano in gioco ... maggiori informazioni di seguito

ngBind
- direttiva nel modulo ng

L' attributo ngBind dice ad AngularJS di sostituire il contenuto del testo dell'elemento HTML specificato con il valore di una determinata espressione e di aggiornare il contenuto del testo quando cambia il valore di quella espressione.

In genere, non si utilizza ngBind direttamente , ma si utilizza invece il doppio markup riccio come {{espressione}} che è simile ma meno dettagliato.

È preferibile utilizzare ngBind anziché {{espressione}} se un modello viene momentaneamente visualizzato dal browser allo stato grezzo prima che AngularJS lo compili. Poiché ngBind è un attributo element, rende i binding invisibili all'utente durante il caricamento della pagina.

Una soluzione alternativa a questo problema sarebbe l'utilizzo della direttiva ngCloak . visita qui

per maggiori informazioni su ngbind visita questa pagina: https://docs.angularjs.org/api/ng/directive/ngBind

Potresti fare qualcosa del genere come attributo, ng-bind :

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

o fai l'interpolazione come di seguito:

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

o in questo modo con gli attributi ng-cloak in AngularJs:

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

ng-mantello evita di lampeggiare sul dom e aspetta che tutto sia pronto! questo è uguale all'attributo ng-bind ...

Puoi fare riferimento a questo sito che ti darà una spiegazione quale è meglio, come so {{}}, questo è più lento di ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html fai riferimento a questo sito.