Qual è la differenza tra ng-app e data-ng-app?

147

Ho iniziato a conoscere AngularJS e sono confuso su quali siano le differenze tra le direttive ng-appe data-ng-app.

angularjs angularjs-directive

— user1876508
fonte

7

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

— chenrui,

8

@chenrui - questa Q è arrivata per prima. (24 aprile vs 16 maggio)

— Blundering Philosopher

1

La tua applicazione non subirà alcun impatto e Angular funzionerà come previsto anche se usi ng-app o data-ng-app ma come menzionato da @ user2289659 facendo uso di dati- * viene introdotto lo standard di attributo personalizzato da HTML5 in poi

— Shujaath Khan

125

La maggior parte di queste risposte sta semplicemente dicendo che rende il modello HTML valido o compatibile con HTML Validator , senza spiegare nemmeno cosa significano QUESTI termini.

Non lo so per certo, ma suppongo che questi termini si applichino ai programmi di convalida HTML che eseguono la scansione del codice per verificarne la conformità agli standard, un po 'come lanugine. Non riconoscono ng-appcome un attributo valido. Si aspettano che gli attributi HTML non predefiniti vengano preceduti

data-attribute_name_here.

Quindi, i creatori di AngularJShanno creato nomi alternativi per le loro direttive che includono i data-davanti a loro in modo che i programmi di validazione HTML li "apprezzino".

— Kirby L. Wallace
fonte

4

+1 per "Ok. Quindi, cosa significa" validator compliant ", comunque?" approccio. Se avessi fatto la ricerca, scopriresti che stai indovinando per lo più giusto. =)

— slacktracer

22

HTML valido non è per validatori HTML. I browser analizzano HTML. Se inizi a deviare dalle specifiche HTML, non c'è garanzia che il tuo HTML verrà analizzato correttamente.

— Blender,

1

Sì, i validatori sono un mezzo per raggiungere il fine. L'obiettivo è rendere le tue pagine Web il più vicino possibile alle specifiche, il che massimizza il numero di browser (vecchi, presenti e futuri) in cui la tua app funzionerà effettivamente come previsto. Nel caso di "data- *", c'è anche il rischio che i browser possano introdurre lo stesso attributo di uno standard, che si scontrerebbe con l'attributo della tua app. Inoltre, attenersi a standard come questo aiuterà gli strumenti (ad es. I redattori) a comprenderli e renderli più utili per te.

— mahemoff,

2

@Blender "non esiste alcuna garanzia che il tuo HTML verrà analizzato correttamente", lo stesso si può dire per un HTML valido.

— twiz,

1

@Chuck Non ti sto suggerendo di farlo in un modo o nell'altro, solo che il problema non è particolarmente importante. Potremmo anche discutere gli spazi contro le schede mentre ci siamo. haha

— twiz,

41

Nessuno in termini di comportamento di runtime, questi sono solo stili diversi di direttive di denominazione come descritto qui: http://docs.angularjs.org/guide/directive

Le direttive hanno nomi con involucro di cammello come ngBind. La direttiva può essere invocata traducendo il nome del caso di cammello in caso di serpente con questi caratteri speciali:, - o _. Facoltativamente, la direttiva può essere preceduta da x- o data- per renderla conforme a HTML validator. Ecco un elenco di alcuni dei possibili nomi delle direttive: ng: bind, ng-bind, ng_bind, x-ng-bind e data-ng-bind.

Come puoi vedere dalla lettura di questo, data-puoi usarlo per superare i test di validazione HTML HTML /

— pkozlowski.opensource
fonte

2

Dove nelle specifiche dell'HTML lo consente?

— user1876508,

3

@utente1876508: w3.org/TR/2011/WD-html5-20110525/…

— pkozlowski.opensource

6

È possibile dichiarare lo spazio dei nomi angolare <html xmlns:ng="http://angularjs.org" ng-app>

— Mounir
fonte

2

Questo sembra essere applicabile solo per le app legacy: "Se si sceglie di utilizzare la sintassi della direttiva vecchio stile ng: quindi includere xml-namespace in html per rendere felice IE. (Questo è qui per motivi storici e non consigliamo più l'uso di ng :.)". Fonte: docs.angularjs.org/guide/bootstrap

— Chuck Le Butt,

5

Nei browser moderni non c'è differenza, ma negli IE più vecchi non funzioneranno se non si dichiara uno spazio dei nomi XML che lo definisce.

Esiste anche una differenza di convalida in quanto ng-appnon è XHTML valido e causerà la mancata convalida HTML della pagina Web. Angolare ti consente di aggiungere il prefisso alle sue direttive data-o x-di consentirne la convalida.

— abject_error
fonte

Questo sembra essere vero solo se stai usando "ng:". Credo che "data-ng-" dovrebbe essere validato.

— Chuck Le Butt,

4

Puoi usare data-ng-, invece di ng-, se vuoi rendere valido l'HTML della tua pagina.
Questo genererà un errore

<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>

Questo non genererà un errore

<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
fonte

Potresti spiegare perché il primo scenario dovrebbe generare un errore?

— Awani,

Questo fa riferimento alla validazione di w3c.

— Graham P Heath,

3

La differenza di base tra questi due termini è che data-ng-app convalida l'HTML mentre quest'ultimo no. La funzionalità rimane invariata. Per ulteriori riferimenti, puoi provare w3Validator.

— Abhishek Gakhar
fonte

-2

Assolutamente non c'è alcuna differenza tra i due, tranne per il fatto che alcuni validatori HTML5 generano un errore su una proprietà come ng-app, ma non generano un errore per qualcosa con prefisso data, come data-ng-app. Quindi usare il prefisso dei dati con le nostre direttive angolari è buono.

Anche tu puoi usare le direttive angolari nei modi sotto menzionati ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

— Re Raj
fonte