AngularJS: Dlaczego ng-bind jest lepszy niż {{}} w angular?

Byłem w jednej z kątowych prezentacji, a jedna z osób na wspomnianym spotkaniu ng-bindjest lepsza niż {{}}wiążąca.

Jednym z powodów jest ng-bindumieszczenie zmiennej na liście obserwacyjnej i tylko w przypadku zmiany modelu dane są wypychane do widoku, z drugiej strony {{}}interpolują wyrażenie za każdym razem (myślę, że to cykl kątowy) i przesuwają wartość, nawet jeśli wartość się zmieniła lub nie.

Mówi się również, że jeśli nie masz dużo danych na ekranie, możesz użyć, {{}}a problem z wydajnością nie będzie widoczny. Czy ktoś może mi rzucić nieco światła na ten problem?

Jeśli nie używasz ng-bind, zamiast tego coś takiego:

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

może być wyświetlany rzeczywisty Hello, {{user.name}}przez sekundę, zanim user.namezostanie rozwiązany (przed załadowaniem danych)

Możesz zrobić coś takiego

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

jeśli to dla ciebie problem.

Innym rozwiązaniem jest użycie ng-cloak.

Widoczność:

Podczas gdy twój angularjs ładuje się, użytkownik może zobaczyć umieszczone w nawiasach klamrowych html. Można to rozwiązać za pomocą ng-cloak. Ale dla mnie jest to obejście, którego nie muszę używać, jeśli używam ng-bind.

Wydajność:

{{}}Jest znacznie wolniejszy .

Jest ng-bindto dyrektywa i spowoduje umieszczenie obserwatora na przekazywanej zmiennej. Więc ng-bindbędzie miała zastosowanie tylko, gdy przeszedł wartość ma faktycznie zmienić .

Z drugiej strony wsporniki będą sprawdzane i odświeżane w każdym $digest , nawet jeśli nie jest to konieczne .

Obecnie tworzę dużą aplikację na jednej stronie (~ 500 powiązań na wyświetlenie). Zmiana z {{}} na ścisłą ng-bindpozwoliła nam zaoszczędzić około 20% na każdym scope.$digest.

Sugestia :

Jeśli korzystasz z modułu tłumaczenia, takiego jak tłumaczenie kątowe , zawsze preferuj dyrektywy przed opisami w nawiasach.

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

Jeśli potrzebujesz funkcji filtrowania, lepiej skorzystaj z dyrektywy, która faktycznie korzysta z niestandardowego filtra. Dokumentacja usługi $ filter

AKTUALIZACJA 28.11.2014 (ale może nie na temat):

W Angular 1.3x wprowadzono bindoncefunkcjonalność. Dlatego możesz raz powiązać wartość wyrażenia / atrybutu (zostanie powiązana, gdy! = 'Undefined').

Jest to przydatne, gdy nie oczekuje się zmiany wiązania.

Użycie: Umieść ::przed oprawą:

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

Przykład:

ng-repeataby wyświetlić niektóre dane w tabeli, z wieloma powiązaniami na wiersz. Powiązania translacji, wyniki filtrów, które są wykonywane w każdym skrócie zakresu.

ng-bind jest lepszy niż {{...}}

Na przykład możesz wykonać:

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

Oznacza to, że cały Hello, {{variable}}załączony tekst <div>zostanie skopiowany i zapisany w pamięci.

Jeśli zamiast tego zrobisz coś takiego:

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

Tylko wartość wartości zostanie zachowana w pamięci, a kątowy zarejestruje obserwatora (wyrażenie zegarka), który składa się tylko ze zmiennej.

Zasadniczo podwójna składnia jest bardziej naturalnie czytelna i wymaga mniej pisania.

Oba przypadki dają takie same dane wyjściowe, ale .. jeśli wybierzesz opcję, {{}}istnieje szansa, że ​​użytkownik zobaczy kilka milisekund, {{}}zanim szablon zostanie wyrenderowany przez kąt. Więc jeśli zauważysz, {{}}to lepiej jest użyć ng-bind.

Bardzo ważne jest również to, że tylko w pliku index.html aplikacji kątowej możesz nie renderować {{}}. Jeśli używasz dyrektyw, a następnie szablonów, nie ma szans, aby to zobaczyć, ponieważ kątowy najpierw renderuje szablon, a następnie dołącza go do DOM.

{{...}}oznacza dwukierunkowe wiązanie danych. Ale ng-bind jest w rzeczywistości przeznaczony do jednokierunkowego wiązania danych.

Użycie ng-bind zmniejszy liczbę obserwatorów na twojej stronie. Stąd ng-bind będzie szybszy niż {{...}}. Tak więc, jeśli chcesz tylko wyświetlić wartość i jej aktualizacje, a nie chcesz odzwierciedlać jej zmiany z interfejsu użytkownika z powrotem do kontrolera, przejdź do ng-bind . Zwiększy to wydajność strony i skróci czas ładowania strony.

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

Jest tak, ponieważ {{}}w kompilatorze kątowym uwzględnia się zarówno węzeł tekstowy, jak i jego element nadrzędny, ponieważ istnieje możliwość scalenia 2 {{}}węzłów. Dlatego istnieją dodatkowe linkery, które wydłużają czas ładowania. Oczywiście dla kilku takich przypadków różnica jest nieistotna, jednak gdy używasz tego w repeaterze dużej liczby elementów, spowoduje to wpływ na wolniejsze środowisko wykonawcze.

Powód, dla którego Ng-Bind jest lepszy, ponieważ,

Kiedy Twoja strona nie jest ładowana, gdy twój internet jest wolny lub gdy twoja strona jest w połowie ładowana, możesz zobaczyć, że tego rodzaju problemy (sprawdź zrzut ekranu ze znakiem odczytu) zostaną uruchomione na ekranie, który jest całkowicie dziwny. Aby tego uniknąć, powinniśmy użyć Ng-bind

ng-bind ma również swoje problemy. Kiedy próbujesz użyć filtrów kątowych , limitu lub czegoś innego, możesz mieć problem, jeśli użyjesz ng-bind . Ale w innym przypadku ng-bind jest lepszy po stronie UX. Kiedy użytkownik otworzy stronę, zobaczy (10ms-100ms), że drukuje symbole ( {{...}} ), dlatego ng-bind jest lepszy .

W {{}} występuje pewien problem z migotaniem, np. Kiedy odświeżasz stronę, wtedy przez krótki czas widoczny jest wyraz wyrażenia czasu, więc do przedstawienia danych powinniśmy użyć ng-bind zamiast wyrażenia.

ng-bindjest również bezpieczniejszy, ponieważ reprezentuje htmljako ciąg.

Na przykład '<script on*=maliciousCode()></script>'będzie wyświetlany jako ciąg i nie zostanie wykonany.

Według Angular Doc:
Ponieważ ngBind jest atrybutem elementu, sprawia, że ​​powiązania są niewidoczne dla użytkownika podczas ładowania strony ... to główna różnica ...

Zasadniczo dopóki wszystkie elementy dom nie zostaną załadowane, nie możemy ich zobaczyć, a ponieważ ngBind jest atrybutem elementu, czeka, aż domeny wejdą do gry ... więcej informacji poniżej

ngBind
- dyrektywa w module ng

The atrybut ngBind mówi angularjs zastąpić zawartość tekstową określonego elementu HTML z wartością danego wyrazu, a także aktualizować zawartość tekstową, gdy wartość, że zmiany ekspresji.

Zazwyczaj nie używasz ngBind bezpośrednio , ale zamiast tego używasz podwójnego, kręconego znacznika, takiego jak {{wyrażenie}}, który jest podobny, ale mniej szczegółowy.

Preferowane jest użycie ngBind zamiast {{wyrażenie}}, jeśli przeglądarka chwilowo wyświetla szablon w stanie surowym, zanim AngularJS go skompiluje. Ponieważ ngBind jest atrybutem elementu, sprawia, że ​​powiązania są niewidoczne dla użytkownika podczas ładowania strony.

Alternatywnym rozwiązaniem tego problemu byłoby pomocą ngCloak dyrektywy. odwiedź tutaj

Aby uzyskać więcej informacji na temat ngbind odwiedź tę stronę: https://docs.angularjs.org/api/ng/directive/ngBind

Możesz zrobić coś takiego jako atrybut, ng-bind :

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

lub wykonaj interpolację jak poniżej:

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

lub w ten sposób z atrybutami ng-cloak w AngularJs:

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

ng-cloak unikaj flashowania na domku i poczekaj, aż wszystko będzie gotowe! jest to równe atrybutowi ng-bind ...

Możesz odnieść się do tej witryny, która wyjaśni, która z nich jest lepsza, ponieważ wiem {{}}, że jest wolniejsza niż ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html Poleć tę stronę.