ng-app vs data-ng-app, apa bedanya?

230

Saat ini saya melihat video ini awal tutorial untukangular.js

Pada suatu saat (setelah 12'40 "), pembicara menyatakan bahwa atribut ng-appdan data-ng-app=""kurang lebih setara di dalam <html>tag, dan begitu juga ng-model="my_data_bindingdan data-ng-model="my_data_binding". Namun pembicara mengatakan html akan divalidasi melalui validator yang berbeda, tergantung pada atribut mana yang bekas.

Bisakah Anda menjelaskan perbedaan antara dua cara, ng-awalan terhadap data-ng-awalan?

html angularjs Stephane Rolland
sumber
2
mungkin duplikat Apa perbedaan antara ng-app dan data-ng-app?
Bob Jarvis - Reinstate Monica

Jawaban:

403

Pertanyaan bagus. Perbedaannya sederhana - 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 untuk menjawab pertanyaan Anda, gunakan data-ng-appjika Anda ingin memvalidasi HTML Anda menjadi sedikit lebih mudah.

Fakta menyenangkan: Anda juga dapat menggunakan x-ng-appefek yang sama.

Pembisik kode
sumber
4
Apakah awalan data akan mencegah atribut ng berfungsi dengan baik? (mis., "data-ng-repeat")?
tonejac
3
Sepertinya pemborosan siklus CPU secara manual data-dan x-. Mengapa aturan validasi HTML tidak dapat diubah untuk menerima ng-barang?
DaveAlger
8
@DaveAlger: data-*atribut adalah cara untuk memperluas HTML .
sampathsris
1
@ DaveAlger: Itu ide yang buruk untuk dilakukan seperti yang Anda katakan. Jika ada banyak alat terkenal seperti Angular di luar sana dengan awalan yang berbeda, Anda ingin agar HTML mengikuti semuanya untuk menambahkan awalannya?!?! Seperti yang dikatakan Krumia, ini adalah cara untuk memperluas HTML.
Dassi Orleando
65

Dari Dokumentasi Angular

Angular menormalkan tag elemen dan nama atribut untuk menentukan elemen mana yang cocok dengan arahan. Kami biasanya merujuk pada arahan dengan nama dinormalisasi camelCase case-sensitive mereka (misalnya ngModel). Namun, karena HTML tidak peka huruf besar-kecil, kami merujuk pada arahan dalam DOM dengan bentuk huruf kecil, biasanya menggunakan atribut dasbor dibatasi pada elemen DOM (misalnya model-ng).

Proses normalisasi adalah sebagai berikut:

Strip x dan data- dari depan elemen / atribut. Ubah nama:, -, atau _-dibatasi untuk camelCase. Berikut adalah beberapa contoh elemen yang cocok dengan ngBind:

berdasarkan pernyataan di atas di bawah ini semua adalah arahan yang valid

1. ng-bind
2. ng: bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

srinu
sumber
Tapi ini dilakukan hanya untuk membandingkan dengan nama direktif. Itu tidak mengubah atribut yang sebenarnya.
RetroCoder
3
Baik untuk mengetahui tentang notasi
Code Whisperer
29

Perbedaannya terletak pada fakta bahwa data-*atribut khusus valid dalam spesifikasi HTML5 . Jadi, jika Anda perlu markup Anda untuk divalidasi, Anda harus menggunakannya daripada ngatribut.

Manu Letroll
sumber
1
Saya mengerti dari spesifikasi bahwa data- * akan berfungsi karena hanya memvalidasi html. Tapi mengapa x- * bekerja? tidak ada keterangan tentang ini dalam spesifikasi.
Bhramar
1
x- * dicadangkan untuk digunakan oleh browser. Mengenai pertanyaan Anda tentang MENGAPA x berfungsi, keduanya akan bekerja sebagai angular khusus memastikan itu berfungsi untuk data / x dengan mengkodekannya ke dalam kerangka kerja mereka. Jika Anda bertanya MENGAPA x bekerja untuk sudut, maka itulah perdebatan lainnya. Ada argumen yang bagus untuk keduanya. Lihat jawaban ini di SO: stackoverflow.com/a/17902387/339803 Jawaban lain pada halaman itu tampaknya berpikir x adalah untuk XHTML, tapi saya tidak yakin. Lihat apa yang dapat Anda lakukan setelah membaca semuanya. HTML5 spec juga mengatakan penggunaan browser / vendor: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Jawaban singkat:

ng-modeldan data-ng-modelsama dan setara!

Mengapa?

  1. alasan untuk: spesifikasi HTML5data- awalan mengharapkan setiap atribut khusus diawali oleh .
    data-

  2. alasan untuk: keduanya ng-modeldan data-ng-modelsama dan setara.

Dokumen AngularJS - Normalisasi

Angular menormalkan tag elemen dan nama atribut untuk menentukan elemen mana yang cocok dengan arahan mana. Kami biasanya merujuk pada arahan dengan nama normal camelCase case-sensitive mereka (misalnya ngModel). Namun, karena HTML tidak peka terhadap huruf besar-kecil, kami merujuk pada arahan dalam DOM dengan bentuk huruf kecil, biasanya menggunakan atribut dasbor dibatasi pada elemen DOM (misalnya ng-model).

Proses normalisasi adalah sebagai berikut:
1. Strip x-dan data-dari depan elemen / atribut.
2. Mengkonversi :, -atau _nama -delimited untuk camelCase.

Sebagai contoh
formulir berikut semuanya setara dan cocok dengan arahan ngBind:

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>
Eddy
sumber
2

Anda dapat menggunakan data-ng-, bukannya ng-, jika Anda ingin membuat halaman HTML Anda valid.

NNaseet
sumber
2
OP mengerti bahwa mereka dapat digunakan secara bergantian, tetapi ingin tahu mengapa keduanya tersedia jika mereka bekerja "sama". Saya percaya penjelasan tentang apa yang membuat mereka berbeda akan menjadi jawaban yang lebih berharga.
Charles Watson
1

jika Anda ingin memanipulasi html atau html-fragmen di server Anda sebelum menyajikannya ke browser, Anda pasti ingin menggunakan atribut data-ng-xxx bukan hanya atribut ng-xxx.

  1. Itu membuat html Anda valid, artinya dapat digunakan oleh parser html (berbasis server) seperti domdocument (php) atau yang lainnya. Parser ini sering gagal pada html yang tidak terbentuk dengan baik.
  2. Angular menormalkan atribut, tetapi ingat, itu ada di klien, bukan di server.
Kees Hessels
sumber