AngularJS: Mengapa ng-bind lebih baik dari {{}} di angular?

401

Saya berada di salah satu presentasi sudut dan salah satu orang dalam pertemuan yang disebutkan ng-bindlebih baik daripada {{}}mengikat.

Salah satu alasannya, ng-bindmeletakkan variabel dalam daftar pantauan dan hanya ketika ada model mengubah data didorong untuk melihat, di sisi lain, {{}}akan menginterpolasi ekspresi setiap kali (saya kira itu adalah siklus sudut) dan mendorong nilai, meskipun nilainya berubah atau tidak.

Juga dikatakan bahwa, jika Anda tidak memiliki banyak data di layar Anda dapat menggunakan {{}}dan masalah kinerja tidak akan terlihat. Adakah yang bisa menjelaskan masalah ini untuk saya?

javascript angularjs ng-bind Nair
sumber
15
"Lebih baik digunakan ngBinddaripada {{ expression }}jika templat ditampilkan sebentar oleh peramban dalam keadaan mentah sebelum Angular mengompilasinya. Karena ngBindmerupakan elemen atribut, itu membuat ikatan tidak terlihat oleh pengguna saat halaman dimuat." - tetapi tidak ada yang disebutkan tentang kinerja.
Blazemonger
3
Bisakah Anda memeriksa, jika jawaban saya lebih baik
Konstantin Krass
{{}} menurut saya tidak praktis, pemirsa akan melihat tag Anda sebelum data dimuat sepenuhnya. Saya ingin tahu apakah tim Angular akan memperbaiki masalah ini.
Jerry Liang
2
@ Blazemonger: Tidak bisakah Anda hanya menyertakan atribut ng-cloak untuk mencegah templat ditampilkan sebentar?
supershnee

Jawaban:

322

Jika Anda tidak menggunakan ng-bind, gantinya sesuatu seperti ini:

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

Anda mungkin melihat aktual Hello, {{user.name}}sesaat sebelum user.namediselesaikan (sebelum data dimuat)

Anda bisa melakukan sesuatu seperti ini

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

jika itu masalah bagi Anda.

Solusi lain adalah menggunakan ng-cloak.

prinsip holografik
sumber
3
Berdasarkan apa yang Anda katakan, tidak ada kinerja yang berhasil jika kami menggunakan {{}}? Saya diberi tahu, jika Anda menggunakan {{}}, setiap kali, itu akan mendapatkan inerpolate dan menghasilkan hasilnya bahkan jika model tidak berubah.
Nair
4
Dan bagaimana cara menggunakan ng-bind jika saya tidak ingin membungkus user.name di dalam tag span? Jika saya menggunakan kurung keriting saya akan mendapatkan nama yang bersih, tanpa tag html
Victor
5
@KevinMeredith tampak seperti itu ketika HTML telah dimuat, tetapi sudut belum (belum). Ingat bahwa ini adalah sisi klien yang sedang kita bicarakan. Semua interpolasi harus dilakukan di browser memuat aplikasi. Biasanya beban sudut cukup cepat sehingga tidak terlihat, tetapi dalam beberapa kasus menjadi masalah. Jadi, ng-cloakdiciptakan untuk memperbaiki masalah ini.
Prinsip holografik
17
bagi saya, ini bukan jawaban untuk pertanyaan, mengapa ngBind lebih baik. Hanya saja cara menggunakan ngBind bukan anotasi {{}} dan referensi ke ngCloak.
Konstantin Krass
4
@ Viktor ada juga di ng-bind-templatemana Anda dapat menggabungkan kedua pendekatan: ng-bind-template="Hello, {{user.name}}"Di sini pengikatan masih menawarkan peningkatan kinerja dan tidak memperkenalkan bersarang lebih lanjut
loother
543

Visibilitas:

Saat angularjs Anda bootstrap, pengguna mungkin melihat tanda kurung Anda ditempatkan di html. Ini dapat diatasi dengan ng-cloak. Tetapi bagi saya ini adalah solusi, bahwa saya tidak perlu menggunakan, jika saya menggunakannya ng-bind.

Kinerja:

The {{}}adalah jauh lebih lambat .

Ini ng-bindadalah arahan dan akan menempatkan pengamat pada variabel yang lulus. Jadi ng-bindhanya akan berlaku, ketika nilai yang diteruskan benar-benar berubah .

Kurung di sisi lain akan kotor diperiksa dan disegarkan di setiap $digest , bahkan jika itu tidak perlu .

Saat ini saya sedang membangun aplikasi halaman tunggal besar (~ 500 binding per view). Mengubah dari {{}} menjadi ketat ng-bindmemang menghemat sekitar 20% di setiap scope.$digest.

Saran :

Jika Anda menggunakan modul terjemahan seperti angular-translate , selalu lebih suka arahan sebelum penjelasan tanda kurung.

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

Jika Anda membutuhkan fungsi filter, lebih baik gunakan arahan, yang sebenarnya hanya menggunakan filter kustom Anda. Dokumentasi untuk layanan $ filter

UPDATE 28.11.2014 (tapi mungkin di luar topik):

Di Angular 1.3x bindonce fungsionalitasnya diperkenalkan. Karena itu Anda dapat mengikat nilai ekspresi / atribut sekali (akan terikat ketika! = 'Tidak terdefinisi').

Ini berguna saat Anda tidak mengharapkan ikatan Anda berubah.

Penggunaan: Tempatkan ::sebelum Anda mengikat:

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

Contoh:

ng-repeatuntuk menampilkan beberapa data dalam tabel, dengan beberapa binding per baris. Terjemahan-binding, output filter, yang dieksekusi di setiap ringkasan lingkup.

Konstantin Krass
sumber
32
ini jawaban yang lebih baik
NimChimpsky
13
Dari apa yang saya dapat katakan dari sumber (per 2014-11-24), interpolasi keriting ditangani seperti arahan (lihat addTextInterpolateDirective () di ng / compile.js). Itu juga menggunakan $ watch sehingga DOM tidak tersentuh jika teks tidak berubah, itu tidak "memeriksa kotor dan menyegarkan" pada setiap $ digest seperti yang Anda klaim. Apa yang dilakukan pada setiap $ digest adalah bahwa string hasil interpolasi dihitung. Hanya saja tidak ditugaskan ke simpul teks kecuali itu berubah.
Matti Virkkunen
6
Saya menulis tes kinerja untuk evaluasi internal. Itu 2000 entri dalam ng repeat dan ditampilkan 2 atribut di objek, jadi 2000x2 binding. Binding berbeda dalam: Pengikatan pertama hanya pengikatan dalam rentang. Detik memiliki html yang mengikat dan polos di dalamnya. Hasilnya: ng-bind lebih cepat sekitar 20% per ruang lingkup berlaku. Tanpa memeriksa kode, tampaknya, html polos tambahan dengan ekspresi keriting dalam elemen html bahkan lebih lama.
Konstantin Krass
2
Hanya ingin menunjukkan bahwa menurut tes di sini: jsperf.com/angular-bind-vs-brackets tampaknya menunjukkan bahwa kurung LEBIH CEPAT daripada mengikat. (Catatan: bilah adalah ops per detik, jadi lebih lama lebih baik). Dan seperti komentar sebelumnya, mekanisme menonton mereka pada akhirnya identik.
Warren
1
Karena Anda tidak menyediakan sumber apa pun, saya beri Anda satu: ng-perf.com/2014/10/30/... "ng-bind lebih cepat karena lebih sederhana. Interpolasi harus melalui langkah-langkah tambahan untuk memverifikasi konteks, penggabungan dari nilai dan banyak lagi. yang membuatnya sedikit lebih lambat. "
Konstantin Krass
29

ng-bind lebih baik dari {{...}}

Misalnya, Anda bisa melakukan:

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

Ini berarti bahwa seluruh teks yang Hello, {{variable}}dilampirkan oleh <div>akan disalin dan disimpan dalam memori.

Jika sebaliknya Anda melakukan sesuatu seperti ini:

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

Hanya nilai dari nilai yang akan disimpan dalam memori, dan angular akan mendaftarkan pengamat (watch expression) yang hanya terdiri dari variabel.

J brian
sumber
7
Di sisi lain, DOM Anda lebih dalam. Bergantung pada apa yang Anda lakukan, dalam dokumen besar ini dapat memengaruhi kinerja rendering.
stephband
2
Ya, saya pikir sama seperti @stephband. Jika Anda hanya ingin menampilkan nama dan nama belakang, misalnya. Mengapa tidak interpolasi saja? Ini akan melakukan cara yang sama karena akan menjalankan jam tangan yang sama dalam 1 intisari. Seperti: <div> {{firstName}} {{lastName}} </div> == <div> <span ng-bind = "firstName"> </span> <span ng-bind = "lastName"> </ span> </div> .. Dan yang pertama terlihat lebih baik. Saya pikir itu sangat tergantung pada apa yang Anda inginkan tetapi pada akhirnya mereka berdua memiliki kelebihan dan kekurangan.
pgarciacamou
3
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>adalah alternatif untuk {{}} dan fungsi seperti ng-bind
northamerican
1
Ini bukan apel untuk apel — Anda memperkenalkan elemen rentang dalam satu, dan bukan yang lainnya. Contoh dengan ng-bindakan lebih sebanding dengan <div>Hello, <span>{{variable}}</span></div>.
iconoclast
15

Pada dasarnya sintaks double-curly lebih mudah dibaca dan membutuhkan lebih sedikit pengetikan.

Kedua case menghasilkan output yang sama tetapi .. jika Anda memilih untuk pergi dengan {{}}ada kemungkinan bahwa pengguna akan melihat selama beberapa milidetik {{}}sebelum template Anda di-render oleh angular. Jadi, jika Anda perhatikan, {{}}lebih baik digunakanng-bind .

Juga sangat penting adalah bahwa hanya di index.html aplikasi sudut Anda, Anda dapat membatalkan render {{}}. Jika Anda menggunakan arahan maka templat, tidak ada kesempatan untuk melihat itu karena sudut pertama membuat templat dan setelah menambahkannya ke DOM.

hellopath
sumber
5
Cukup menarik, tidak sama. Saya tidak mendapatkan output pada ng-bind = "anArrayViaFactory" vs {{anArrayViaFactory}}. Saya menemukan masalah ini ketika mencoba untuk menampilkan respons json dalam protoype jekyll tetapi karena konflik dengan templating serupa {{}}, saya terpaksa menggunakan ng-bind. Ng-bind di dalam blok ng-repeat (item di anArrayViaFactory) akan menampilkan nilai.
eddywashere
5

{{...}}dimaksudkan pengikatan data dua arah. Tapi, ng-bind sebenarnya dimaksudkan untuk pengikatan data satu arah.

Menggunakan ng-bind akan mengurangi jumlah pengamat di halaman Anda. Karenanya ng-bind akan lebih cepat dari {{...}}. Jadi, jika Anda hanya ingin menampilkan nilai dan pembaruannya, dan tidak ingin mencerminkan perubahannya dari UI kembali ke controller, maka lanjutkan untuk ng-bind . Ini akan meningkatkan kinerja halaman dan mengurangi waktu pemuatan halaman.

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

Ini karena dengan {{}}kompiler sudut mempertimbangkan simpul teks dan induknya karena ada kemungkinan penggabungan 2 {{}}simpul. Karenanya ada tautan tambahan yang menambah waktu buka. Tentu saja untuk beberapa kejadian seperti itu perbedaannya tidak penting, namun ketika Anda menggunakan ini di dalam pengulang sejumlah besar item, itu akan menyebabkan dampak dalam lingkungan runtime yang lebih lambat.

Ambika Sukla
sumber
2

masukkan deskripsi gambar di sini

Alasan mengapa Ng-Bind lebih baik karena,

Ketika halaman Anda tidak dimuat atau ketika internet Anda lambat atau ketika situs web Anda memuat setengah, maka Anda dapat melihat jenis masalah ini (Periksa tanda Screen Shot dengan Baca) akan dipicu pada Layar yang benar-benar aneh. Untuk menghindari itu, kita harus menggunakan Ng-bind

Vikas Kalapur
sumber
1

ng-bind memiliki masalah juga. Ketika Anda mencoba menggunakan filter sudut , batas atau sesuatu yang lain, Anda mungkin dapat memiliki masalah jika Anda menggunakan ng-bind . Tetapi dalam kasus lain, ng-bind lebih baik di sisi UX. Ketika pengguna membuka halaman, ia akan melihat (10ms-100ms) yang mencetak simbol ( {{...}} ), itu sebabnya ng-bind lebih baik .

Hazarapet Tunanyan
sumber
1

Ada beberapa masalah yang berkedip-kedip di {{}} seperti ketika Anda me-refresh halaman lalu terlihat spam waktu singkat. Jadi kita harus menggunakan ng-bind alih-alih ekspresi untuk penggambaran data.

GAURAV ROY
sumber
0

ng-bindjuga lebih aman karena direpresentasikan htmlsebagai string.

Jadi misalnya, '<script on*=maliciousCode()></script>'akan ditampilkan sebagai string dan tidak dieksekusi.

raneshu
sumber
0

Menurut Angular Doc:
Karena ngBind adalah atribut elemen, itu membuat binding tidak terlihat oleh pengguna saat halaman sedang memuat ... itu perbedaan utama ...

Pada dasarnya sampai setiap elemen dom tidak dimuat, kita tidak dapat melihatnya dan karena ngBind adalah atribut pada elemen, ia menunggu sampai dom bermain, ... info lebih lanjut di bawah ini

ngBind
- direktif dalam modul ng

The ngBind atribut memberitahu AngularJS mengganti konten teks dari elemen HTML yang ditentukan dengan nilai ekspresi yang diberikan, dan untuk memperbarui konten teks ketika nilai bahwa perubahan ekspresi.

Biasanya, Anda tidak menggunakan ngBind secara langsung , tetapi Anda menggunakan markup keriting ganda seperti {{ekspresi}} yang mirip tetapi kurang bertele-tele.

Lebih baik menggunakan ngBind daripada {{expression}} jika templat ditampilkan sebentar oleh peramban dalam keadaan mentah sebelum AngularJS mengkompilasinya. Karena ngBind adalah atribut elemen, itu membuat binding tidak terlihat oleh pengguna saat halaman sedang dimuat.

Sebuah solusi alternatif untuk masalah ini akan menggunakan ngCloak direktif. kunjungi di sini

untuk info lebih lanjut tentang ngbind, kunjungi halaman ini: https://docs.angularjs.org/api/ng/directive/ngBind

Anda dapat melakukan sesuatu seperti ini sebagai atribut, ng-bind :

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

atau lakukan interpolasi seperti di bawah ini:

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

atau begini dengan atribut ng-cloak di AngularJs:

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

ng-cloak hindari flashing pada dom dan tunggu sampai semua siap! ini sama dengan atribut ng-bind ...

Alireza
sumber
0

Anda dapat merujuk ke situs ini dan ini akan memberi Anda penjelasan mana yang lebih baik karena saya tahu {{}} ini lebih lambat daripada ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html merujuk situs ini.

Sneha
sumber