ng-app vs. data-ng-app, was ist der Unterschied?

230

Ich schaue mir gerade dieses Start-Tutorial-Video anangular.js

Zu einem bestimmten Zeitpunkt (nach 12'40 ") gibt der Sprecher an, dass die Attribute ng-appund data-ng-app=""innerhalb des <html>Tags mehr oder weniger gleichwertig sind , ebenso wie ng-model="my_data_bindingund data-ng-model="my_data_binding". Der Sprecher sagt jedoch, dass der HTML-Code je nach Attribut durch verschiedene Validatoren validiert wird gebraucht.

Können Sie den Unterschied zwischen den beiden Möglichkeiten erklären, ng-Präfix gegen data-ng-Präfix?

html angularjs Stephane Rolland
quelle
2
Mögliches Duplikat von Was ist der Unterschied zwischen ng-app und data-ng-app?
Bob Jarvis - Stellen Sie Monica

Antworten:

403

Gute Frage. Der Unterschied ist einfach - es gibt absolut keinen Unterschied zwischen den beiden, außer dass bestimmte HTML5-Validatoren einen Fehler auf eine Eigenschaft wie ng-appwerfen, aber sie werfen keinen Fehler für etwas, dem ein Präfix data-wie vorangestellt ist data-ng-app.

Um Ihre Frage zu beantworten, verwenden data-ng-appSie , wenn Sie möchten, dass die Validierung Ihres HTML-Codes etwas einfacher ist.

Unterhaltsame Tatsache: Sie können auch x-ng-appden gleichen Effekt erzielen.

Code Whisperer
quelle
4
Würde das Datenpräfix jemals verhindern, dass ein ng-Attribut ordnungsgemäß funktioniert? (zB "data-ng-repeat")?
Tonejac
3
Es scheint eine solche Verschwendung von CPU-Zyklen zu sein, manuell zu entfernen data-und x-. Warum können die HTML-Validierungsregeln nicht geändert werden, um ng-Inhalte zu akzeptieren ?
DaveAlger
8
@ DaveAlger: data-*Attribute sind die Möglichkeit, HTML zu erweitern .
Sampathsris
1
@ DaveAlger: Es ist eine schlechte Idee, das zu tun, was du gesagt hast. Wenn es draußen viele berühmte Tools wie Angular mit unterschiedlichen Präfixen gibt, möchten Sie, dass HTML allen folgt, um ihr Präfix hinzuzufügen?!?! Wie Krumia sagte, ist es der Weg, HTML zu erweitern.
Dassi Orleando
65

Aus der Angularjs-Dokumentation

Angular normalisiert den Tag- und Attributnamen eines Elements, um zu bestimmen, welche Elemente mit welchen Anweisungen übereinstimmen. Wir verweisen normalerweise auf Anweisungen mit ihrem zwischen Groß- und Kleinschreibung beachteten Namen für camelCase (z. B. ngModel). Da bei HTML die Groß- und Kleinschreibung nicht berücksichtigt wird, wird auf Direktiven im DOM durch Kleinbuchstaben verwiesen, wobei normalerweise durch Bindestriche getrennte Attribute für DOM-Elemente verwendet werden (z. B. ng-Modell).

Der Normalisierungsprozess ist wie folgt:

Entfernen Sie x- und data- von der Vorderseite des Elements / der Attribute. Konvertieren Sie den durch:, - oder _ getrennten Namen in camelCase. Hier sind einige äquivalente Beispiele für Elemente, die mit ngBind übereinstimmen:

basierend auf der obigen Aussage sind alle gültigen Richtlinien

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

srinu
quelle
Dies geschieht jedoch nur, um den Namen der Direktive zu vergleichen. Das tatsächliche Attribut wird nicht geändert.
RetroCoder
3
Gut zu wissen über die -,: und _ Notation
Code Whisperer
29

Der Unterschied liegt in der Tatsache, dass benutzerdefinierte data-*Attribute in der HTML5-Spezifikation gültig sind . Wenn Sie also möchten, dass Ihr Markup validiert wird, sollten Sie sie anstelle der ngAttribute verwenden.

Manu Letroll
quelle
1
Ich verstehe aus der Spezifikation, dass data- * funktionieren würde, da es nur das HTML validiert. Aber warum sollte x- * dann funktionieren? Es gibt keine Beschreibung dazu in der Spezifikation.
Bhramar
1
x- * ist für die Verwendung durch den Browser reserviert. In Bezug auf Ihre Frage, WARUM x funktioniert, funktioniert beides als Winkel, um sicherzustellen, dass es für beide Daten / x funktioniert, indem es in das Framework codiert wird. Wenn Sie fragen, warum x für Winkel funktioniert, ist das eine weitere Debatte. Dafür gibt es gute Argumente. Siehe diese Antwort auf SO: stackoverflow.com/a/17902387/339803 Die andere Antwort auf dieser Seite scheint zu denken, dass x für XHTML ist, aber ich bin nicht sicher. Sehen Sie, was Sie daraus machen können, nachdem Sie alles gelesen haben. Die HTML5-Spezifikation besagt auch, dass Browser / Anbieter verwendet werden: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Kurze Antwort:

ng-modelund data-ng-modelsind gleich und gleichwertig!

Warum?

  1. Grund für: data- Präfix Die
    HTML5-Spezifikation erwartet, dass jedem benutzerdefinierten Attribut ein Präfix vorangestellt wird data-.

  2. Grund für: beide ng-modelund data-ng-modelsind gleich und gleichwertig.

AngularJS-Dokument - Normalisierung

Angular normalisiert den Tag- und Attributnamen eines Elements, um zu bestimmen, welche Elemente mit welchen Anweisungen übereinstimmen. Wir verweisen normalerweise auf Direktiven mit ihrem zwischen Groß- und Kleinschreibung beachteten Namen für camelCase (z ngModel. B. ). Da bei HTML die Groß- und Kleinschreibung nicht berücksichtigt wird, wird auf Direktiven im DOM durch Kleinbuchstaben verwiesen, wobei normalerweise durch Bindestriche getrennte Attribute für DOM-Elemente verwendet werden (z ng-model. B. ).

Der Normalisierungsprozess ist wie folgt:
1. Entfernen Sie x-und data-von der Vorderseite des Elements / der Attribute.
2. umrechnen :, -oder _separierten Namen camelCase.

Beispielsweise
Die folgenden Formulare sind alle gleichwertig und stimmen mit der ngBind-Direktive überein:

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

Sie können data-ng- anstelle von ng- verwenden, wenn Sie das HTML Ihrer Seite gültig machen möchten.

NNaseet
quelle
2
Das OP versteht, dass sie austauschbar sind, möchte aber wissen, warum die beiden verfügbar sind, wenn sie "gleich" arbeiten. Ich glaube, eine Erklärung, was sie unterscheidet, wäre eine wertvollere Antwort.
Charles Watson
1

Wenn Sie HTML- oder HTML-Fragmente auf Ihrem Server bearbeiten möchten, bevor Sie sie an den Browser senden, möchten Sie auf jeden Fall data-ng-xxx-Attribute anstelle von nur ng-xxx-Attributen verwenden.

  1. Es macht Ihr HTML gültig, was bedeutet, dass es von HTML-Parsern (serverbasiert) wie Domdocument (PHP) oder anderen verwendet werden kann. Diese Parser versagen oft auf nicht gut geformtem HTML.
  2. Angular normalisiert das Attribut, aber denken Sie daran, dass dies auf dem Client und nicht auf dem Server erfolgt.
Kees Hessels
quelle