ng-app vs. data-ng-app, qual è la differenza?

Attualmente sto guardando questo video tutorial di avvio per angular.js

Ad un certo momento (dopo 12’40 “), l’oratore afferma che gli attributi ng-app e data-ng-app="" sono più o meno equivalenti all’interno del tag , e quindi sono ng-model="my_data_binding e data-ng-model="my_data_binding" . Tuttavia, l’oratore afferma che l’html sarà convalidato attraverso diversi validatori, a seconda di quale attributo è usato.

Potresti spiegare la differenza tra i due modi, ng- prefix rispetto al prefisso data-ng- ?

Buona domanda. La differenza è semplice: non c’è assolutamente alcuna differenza tra i due, tranne che alcuni validatori HTML5 generano un errore su una proprietà come ng-app , ma non lanciano un errore per qualcosa che ha come prefisso i data- , come data-ng-app .

Quindi, per rispondere alla tua domanda, usa data-ng-app se vuoi che il tuo codice HTML sia un po ‘più semplice.

Fatto divertente: puoi usare anche x-ng-app allo stesso modo.

Dalla documentazione di Angularjs

Angolare normalizza il tag di un elemento e il nome dell’attributo per determinare quali elementi corrispondono a quali direttive. In genere facciamo riferimento alle direttive in base al nome normalizzato di camelCase sensibile alla distinzione tra maiuscole e minuscole (ad es. NgModel). Tuttavia, dal momento che HTML non fa distinzione tra maiuscole e minuscole, facciamo riferimento alle direttive nel DOM tramite moduli di minuscole, in genere utilizzando attributi delimitati da trattini sugli elementi DOM (ad esempio, ng-model).

Il processo di normalizzazione è il seguente:

Strip x- e data- dalla parte anteriore dell’elemento / attributi. Convertire il nome delimitato da:, – o _ a camelCase. Ecco alcuni esempi equivalenti di elementi che corrispondono a ngBind:

sulla base di quanto sopra riportato di seguito tutte sono direttive valide

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

Le differenze risiedono nel fatto che gli attributi data-* personalizzati sono validi nelle specifiche HTML5 . Quindi se hai bisogno che il tuo markup sia validato, dovresti usarli piuttosto che gli attributi di ng .

Risposta breve:

ng-model e data-ng-model sono uguali e equivalenti!


Perché?

  1. motivo per: data- prefisso
    Le specifiche HTML5 si aspettano che qualsiasi attributo personalizzato sia prefissato da data- .

  2. motivo: sia il ng-model data-ng-model sono uguali ed equivalenti.

Documento AngularJS – Normalizzazione

Angolare normalizza il tag di un elemento e il nome dell’attributo per determinare quali elementi corrispondono a quali direttive. In genere facciamo riferimento alle direttive in base al nome normalizzato di camelCase sensibile alla distinzione tra maiuscole e minuscole (ad es. ngModel ). Tuttavia, dal momento che HTML non fa distinzione tra maiuscole e minuscole, facciamo riferimento alle direttive nel DOM tramite moduli di minuscole, in genere utilizzando attributi delimitati da trattini sugli elementi DOM (ad esempio, ng-model ).

Il processo di normalizzazione è il seguente:
1. Strip x- e data- dalla parte anteriore dell’elemento / attributi.
2. Converti il ​​nome : ,, o _ -delimitato in camelCase .

Per esempio
i seguenti moduli sono tutti equivalenti e corrispondono alla direttiva ngBind:

 
Hello





Puoi usare data-ng-, invece di ng-, se vuoi rendere valido il tuo HTML di pagina.

se vuoi manipolare i frammenti html o html sul tuo server prima di servirlo nel browser, devi assolutamente usare gli attributi data-ng-xxx invece degli attributi solo ng-xxx.

  1. Rende valido il tuo html, il che significa che può essere utilizzato da parser html (basati su server) come domdocument (php) o altri. Questi parser spesso falliscono su un html non ben formato.
  2. Angolare normalizza l’attributo, ma ricorda che è sul client, non sul server.