Apa perbedaan antara ng-app dan data-ng-app?

147

Saya sudah mulai belajar tentang AngularJS dan saya bingung tentang apa perbedaan antara arahan ng-appdan data-ng-apparahan.

angularjs angularjs-directive pengguna1876508
sumber
7
mungkin duplikat dari ng-app vs data-ng-app, apa bedanya?
chenrui
8
@chenrui - Q ini lebih dulu btw. (24 April vs 16 Mei)
Blundering Philosopher
1
Aplikasi Anda tidak akan terkena dampak dan Angular akan berfungsi seperti yang diharapkan bahkan jika Anda menggunakan ng-app atau data-ng-app tetapi seperti yang disebutkan oleh @ user2289659 memanfaatkan data- * diperkenalkan standar atribut khusus dari HTML5 dan seterusnya
Shujaath Khan

Jawaban:

125

Sebagian besar jawaban ini hanya mengatakan membuat template HTML valid , atau HTML Validator Compliant , tanpa menjelaskan apa arti istilah MEREKA, baik.

Saya tidak tahu pasti, tetapi saya menduga bahwa istilah ini berlaku untuk program validasi HTML yang memindai kode Anda untuk kepatuhan standar - jenis seperti serat. Mereka tidak mengenali ng-appatribut yang valid. Mereka mengharapkan atribut HTML non-standar akan diawali

data-attribute_name_here.

Jadi, pembuat AngularJStelah membuat nama alternatif untuk arahan mereka yang menyertakan data-di depan mereka sehingga program validator HTML akan "menyukai" mereka.

Kirby L. Wallace
sumber
4
+1 untuk "Oke. Jadi, apa yang dimaksud dengan 'validator compliant'?" pendekatan. Jika Anda telah melakukan penelitian, Anda akan menemukan bahwa Anda menebak sebagian besar benar. =)
slacktracer
22
HTML yang valid bukan untuk validator HTML. Browser mem-parsing HTML. Jika Anda mulai menyimpang dari spesifikasi HTML, tidak ada jaminan bahwa HTML Anda akan diuraikan dengan benar.
Blender
1
Ya, validator adalah sarana sampai akhir. Tujuannya adalah untuk membuat halaman web Anda sedekat mungkin dengan spesifikasi, yang memaksimalkan jumlah browser - lama, sekarang, dan masa depan - di mana aplikasi Anda benar-benar akan berfungsi seperti yang diharapkan. Dalam kasus "data- *", ada juga browser risiko yang dapat memperkenalkan atribut yang sama sebagai standar, yang akan bertabrakan dengan atribut aplikasi Anda. Selain itu, berpegang teguh pada standar seperti ini akan membantu alat (misalnya editor) memahami dan menjadikannya lebih bermanfaat bagi Anda.
mahemoff
2
@Blender "tidak ada jaminan bahwa HTML Anda akan diuraikan dengan benar", hal yang sama dapat dikatakan untuk HTML yang valid.
twiz
1
@Chuck Saya tidak menyarankan Anda melakukannya dengan satu atau lain cara, hanya saja masalahnya tidak terlalu penting. Kami mungkin juga memperdebatkan spasi vs tab saat kami melakukannya. haha
twiz
41

Tidak ada dalam hal perilaku runtime, itu hanya gaya penamaan arahan yang berbeda seperti yang dijelaskan di sini: http://docs.angularjs.org/guide/directive

Arahan memiliki nama yang dikurung unta seperti ngBind. Arahan dapat dipanggil dengan menerjemahkan nama kasus unta ke dalam kasus ular dengan karakter khusus ini:, -, atau _. Secara opsional, arahan dapat diawali dengan x-, atau data- agar sesuai dengan validator HTML. Berikut adalah daftar beberapa nama direktif yang mungkin: ng: bind, ng-bind, ng_bind, x-ng-bind dan data-ng-bind.

Seperti yang dapat Anda lihat dari membaca ini, data-dapat digunakan untuk membuat tes lulus HTML HTML Anda validator /

pkozlowski.opensource
sumber
2
Di mana dalam spesifikasi HTML memungkinkan untuk ini?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/...
pkozlowski.opensource
6

Anda dapat mendeklarasikan namespace sudut <html xmlns:ng="http://angularjs.org" ng-app>

Mounir
sumber
2
Ini tampaknya hanya berlaku untuk aplikasi lawas: "Jika Anda memilih untuk menggunakan sintaks direktif gaya lama: kemudian sertakan xml-namespace dalam html untuk membuat IE bahagia. (Ini di sini karena alasan historis, dan kami tidak lagi merekomendasikan penggunaan ng :.) ". Sumber: docs.angularjs.org/guide/bootstrap
Chuck Le Butt
5

Di browser modern tidak ada perbedaan, tetapi di IE yang lebih lama, mereka tidak akan berfungsi kecuali Anda mendeklarasikan namespace XML untuk mendefinisikannya.

Ada juga perbedaan validasi dalam ng-appXHTML yang tidak valid, dan akan menyebabkan halaman web Anda gagal validasi HTML. Angular memungkinkan Anda untuk mengawali arahannya dengan data-atau x-mengizinkannya untuk divalidasi.

abject_error
sumber
Tampaknya ini hanya benar jika Anda menggunakan "ng:". Saya percaya "data-ng-" harus divalidasi.
Chuck Le Butt
4

Anda dapat menggunakan data-ng-, bukannya ng-, jika Anda ingin membuat halaman HTML Anda valid.
Ini akan menimbulkan kesalahan

<div ng-app="">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

</div>

Ini tidak akan menghasilkan kesalahan

<div data-ng-app="scope" data-ng-init="name='test'">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" data-ng-model="name"></p>
  <p data-ng-bind="name"></p>

</div>
Vahap Gencdal
sumber
Bisakah Anda jelaskan mengapa skenario pertama membuat kesalahan?
Awani
Ini merujuk validasi w3c.
Graham P Heath
3

Perbedaan mendasar antara kedua istilah ini adalah bahwa data-ng-app memvalidasi HTML sementara yang kedua tidak. Fungsionalitas tetap sama. Untuk referensi lebih lanjut Anda dapat mencoba w3Validator.

Abhishek Gakhar
sumber
-2

Sama sekali tidak ada perbedaan di antara keduanya, kecuali bahwa validator HTML5 tertentu akan membuat kesalahan pada properti seperti ng-app, tetapi mereka tidak melempar kesalahan untuk apa pun yang diawali dengan data-, seperti data-ng-app. Jadi menggunakan awalan data dengan arahan sudut kami adalah baik.

Bahkan Anda dapat menggunakan arahan sudut dalam cara yang disebutkan di bawah ini ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

Raja Raj
sumber