it-swarm.com.de

AngularJS: Warum ist ng-bind im Winkel besser als {{}}?

Ich war in einer der angular Präsentationen und einer der in der Besprechung genannten ng-bind ist besser als {{}} bindend.

Einer der Gründe ist, dass ng-bind die Variable in die Beobachtungsliste einfügt und die Daten nur dann angezeigt werden, wenn eine Modelländerung vorliegt. Andererseits interpoliert {{}} den Ausdruck jedes Mal (I denke, es ist der angular Zyklus) und drücke den Wert, auch wenn sich der Wert geändert hat oder nicht.

Es wird auch gesagt, dass Sie {{}} verwenden können, wenn Sie nicht viele Daten auf dem Bildschirm haben und das Leistungsproblem nicht sichtbar ist. Kann mir jemand etwas Licht in dieses Thema bringen?

399
Nair

Wenn Sie _ng-bind_ nicht verwenden, ist dies in etwa so:

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

möglicherweise wird das aktuelle _Hello, {{user.name}}_ eine Sekunde lang angezeigt, bevor _user.name_ aufgelöst wird (bevor die Daten geladen werden).

Sie könnten so etwas tun

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

wenn das ein Problem für Sie ist.

Eine andere Lösung ist ng-cloak .

321

Sichtbarkeit:

Während Ihr AngularJS bootet, sieht der Benutzer möglicherweise Ihre platzierten Klammern im HTML-Code. Dies kann mit ng-cloak erledigt werden. Aber für mich ist dies eine Problemumgehung, die ich nicht verwenden muss, wenn ich ng-bind verwende.


Leistung:

Der {{}} ist viel langsamer .

Dieser ng-bind ist eine Direktive und setzt einen Watcher auf die übergebene Variable. Der ng-bind wird also nur angewendet, wenn sich der übergebene Wert tatsächlich ändert .

Die Klammern hingegen werden schmutzig überprüft und in jedem aktualisiert $digest, auch wenn es nicht erforderlich ist .


Ich erstelle gerade eine große App für eine einzelne Seite (ca. 500 Bindungen pro Ansicht). Durch den Wechsel von {{}} zu striktem ng-bind haben wir bei jedem scope.$digest etwa 20% gespart.


Vorschlag :

Wenn Sie ein Übersetzungsmodul wie angle-translate verwenden, bevorzugen Sie immer Direktiven vor den Kommentaren in Klammern.

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

Wenn Sie eine Filterfunktion benötigen, entscheiden Sie sich besser für eine Direktive, die nur Ihren benutzerdefinierten Filter verwendet. Dokumentation für $ filter service


UPDATE 28.11.2014 (aber vielleicht nicht zum Thema):

In Angular 1.3x wurde die bindonce Funktionalität eingeführt. Daher können Sie den Wert eines Ausdrucks/Attributs einmal binden (wird gebunden, wenn! = 'Undefined').

Dies ist nützlich, wenn Sie nicht erwarten, dass sich Ihre Bindung ändert.

Verwendung: Platzieren Sie :: vor Ihrer Bindung:

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

Beispiel:

ng-repeat, um einige Daten in der Tabelle mit mehreren Bindungen pro Zeile auszugeben. Übersetzungsbindungen, Filterausgaben, die in jedem Scope Digest ausgeführt werden.

541

_ng-bind_ ist besser als _{{...}}_

Zum Beispiel könnten Sie Folgendes tun:

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

Dies bedeutet, dass der gesamte Text Hello, {{variable}} eingeschlossen von _<div>_ kopiert und gespeichert wird.

Wenn Sie stattdessen Folgendes tun:

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

Nur der Wert des Werts wird gespeichert, und angular registriert einen Watcher (Watch-Ausdruck), der nur aus der Variablen besteht.

29
J brian

Grundsätzlich ist die doppelt geschweifte Syntax natürlicher lesbar und erfordert weniger Eingaben.

In beiden Fällen wird die gleiche Ausgabe erzeugt, aber wenn Sie sich für {{}} entscheiden, besteht die Möglichkeit, dass der Benutzer für einige Millisekunden den {{}} sieht, bevor Ihre Vorlage von Angular gerendert wird. Wenn Sie also einen {{}} bemerken, ist es besser, ng-bind zu verwenden.

Sehr wichtig ist auch, dass Sie nur in Ihrer index.html Ihrer angular App {{}} nicht gerendert haben können. Wenn Sie Direktiven und dann Vorlagen verwenden, ist dies nicht erkennbar, da angular die Vorlage zuerst rendert und anschließend an das DOM anfügt.

15
hellopath

{{...}} ist eine bidirektionale Datenbindung. Aber ng-bind ist eigentlich für die unidirektionale Datenbindung gedacht.

Die Verwendung von ng-bind verringert die Anzahl der Beobachter auf Ihrer Seite. Daher ist ng-bind schneller als {{...}}. Wenn Sie also nur einen Wert und seine Aktualisierungen anzeigen und die Änderung von der Benutzeroberfläche zurück zum Controller nicht widerspiegeln möchten, wählen Sie ng-bind. Dies erhöht die Seitenleistung und verringert die Ladezeit der Seite.

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

Dies liegt daran, dass bei {{}} der angular Compiler sowohl den Textknoten als auch den übergeordneten Knoten berücksichtigt, da die Möglichkeit besteht, 2 {{}} Knoten zusammenzuführen. Daher gibt es zusätzliche Linker, die die Ladezeit verlängern. In einigen Fällen spielt der Unterschied natürlich keine Rolle. Wenn Sie ihn jedoch in einem Repeater mit einer großen Anzahl von Elementen verwenden, hat dies Auswirkungen auf die langsamere Laufzeitumgebung.

4
Ambika Sukla

enter image description here

Der Grund, warum Ng-Bind besser ist, weil,

Wenn Ihre Seite nicht geladen ist oder wenn Ihr Internet langsam ist oder wenn Ihre Website zur Hälfte geladen ist, können Sie diese Art von Problemen sehen (Überprüfen Sie den Screenshot mit der Lesemarkierung.) wird auf dem Bildschirm ausgelöst, was völlig seltsam ist. Um dies zu vermeiden, sollten wir Ng-bind verwenden

2
Vikas Kalapur

Es gibt ein Problem mit dem Flackern in {{}}, wenn Sie die Seite aktualisieren und dann ein kurzer Spam-Ausdruck angezeigt wird. Daher sollten wir zur Darstellung der Daten ng-bind anstelle von expression verwenden.

1
GAURAV ROY

ng-bind hat auch seine Probleme. Wenn Sie versuchen, angular Filter, Grenze oder etwas anderes zu verwenden, vielleicht kann ein Problem haben, wenn Sie ng-bind verwenden. In anderen Fällen ist ng-bind in UX side besser. Wenn der Benutzer eine Seite öffnet, sieht er (10ms-100ms), dass Symbole gedruckt werden ( {{...}}), deshalb ist ng-bind besser.

1

Nach Angular Doc:
Da ngBind ein Elementattribut ist, werden die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird. Dies ist der Hauptunterschied ...

Grundsätzlich, bis alle dom Elemente nicht geladen sind, können wir sie nicht sehen und weil ngBind ist Attribut auf dem Element, es wartet, bis die Doms ins Spiel kommen ... Weitere Informationen unten

ngBind
- Direktive in Modul ng

Das Attribut ngBind weist AngularJS an, den Text zu ersetzen Inhalt des angegebenen HTML-Elements mit dem Wert eines bestimmten Ausdrucks und zum Aktualisieren des Textinhalts, wenn sich der Wert dieses Ausdrucks ändert.

In der Regel verwenden Sie ngBind nicht direkt , sondern verwenden stattdessen das doppelte geschweifte Markup wie {{expression} } das ist ähnlich, aber weniger ausführlich.

Es ist vorzuziehen, ngBind anstelle von {{expression}} zu verwenden, wenn eine Vorlage momentan vom Browser im unformatierten Zustand angezeigt wird, bevor AngularJS sie kompiliert. Da ngBind ein Elementattribut ist, werden die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird.

Eine alternative Lösung für dieses Problem wäre die Verwendung der Anweisung ngCloak . hier besuchen

weitere Informationen zu ngbind finden Sie auf dieser Seite: https://docs.angularjs.org/api/ng/directive/ngBind

Sie könnten so etwas tun als Attribut ng-bind :

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

oder interpoliere wie folgt:

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

oder so mit ng-cloak Attributen in AngularJs:

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

ng-cloak vermeide das Flashen auf dem Dom und warte, bis alle fertig sind! Dies ist gleich ng-bind Attribut ...

0
Alireza

Du kannst auf diese Seite verweisen, es wird dir eine Erklärung geben, welche besser ist, da ich weiß, dass {{}} dies langsamer ist als ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html Verweisen Sie auf diese Website.

0
Sneha

ng-bind ist auch sicherer, weil es html als Zeichenfolge darstellt.

So wird beispielsweise '<script on*=maliciousCode()></script>' als String angezeigt und nicht ausgeführt.

0
raneshu