Was ist der Unterschied zwischen ng-app und data-ng-app?

147

Ich habe angefangen, etwas über AngularJS zu lernen und bin verwirrt darüber, was die Unterschiede zwischen der ng-appund der data-ng-appDirektive sind.

angularjs angularjs-directive user1876508
quelle
7
Mögliches Duplikat von ng-app vs. data-ng-app, was ist der Unterschied?
Chenrui
8
@chenrui - dieses Q kam übrigens zuerst. (24. April gegen 16. Mai)
Fehlerhafter Philosoph
1
Ihre Anwendung wird nicht beeinträchtigt und Angular funktioniert wie erwartet, auch wenn Sie ng-app oder data-ng-app verwenden. Wie von @ user2289659 erwähnt, wird die Verwendung von data- * ab HTML5 als benutzerdefinierter Attributstandard eingeführt
Shujaath Khan

Antworten:

125

Die meisten dieser Antworten besagen lediglich, dass Vorlagen HTML oder HTML Validator kompatibel sind , ohne zu erklären, was DIESE Begriffe bedeuten.

Ich weiß es nicht genau, aber ich vermute, dass diese Begriffe für HTML-Validierungsprogramme gelten, die Ihren Code auf Einhaltung von Standards scannen - ähnlich wie Flusen. Sie erkennen ng-appkein gültiges Attribut. Sie erwarten, dass nicht standardmäßige HTML-Attribute vorangestellt werden

data-attribute_name_here.

Daher haben die Ersteller von AngularJSalternative Namen für ihre Anweisungen erstellt, die die data-vor ihnen stehenden enthalten, damit HTML-Validierungsprogramme sie "mögen".

Kirby L. Wallace
quelle
4
+1 für "Ok. Also, was bedeutet" Validator-konform "überhaupt?" Ansatz. Wenn Sie die Recherche durchgeführt hätten, würden Sie herausfinden, dass Sie größtenteils richtig raten. =)
Slacktracer
22
Gültiges HTML ist nichts für HTML-Validatoren. Browser analysieren HTML. Wenn Sie anfangen, von der HTML-Spezifikation abzuweichen, gibt es keine Garantie dafür, dass Ihr HTML korrekt analysiert wird.
Blender
1
Ja, die Validatoren sind ein Mittel zum Zweck. Ziel ist es, Ihre Webseiten so nah wie möglich an den Spezifikationen zu halten, wodurch die Anzahl der Browser - alt, aktuell und zukünftig - maximiert wird, in denen Ihre App tatsächlich wie erwartet funktioniert. Im Fall von "data- *" besteht auch das Risiko, dass Browser dasselbe Attribut wie ein Standard einführen, das mit dem Attribut Ihrer App kollidieren würde. Das Festhalten an solchen Standards hilft Tools (z. B. Redakteuren), diese zu verstehen und für Sie nützlicher zu machen.
Mahemoff
2
@Blender "Es gibt keine Garantie dafür, dass Ihr HTML korrekt analysiert wird", dasselbe gilt für gültiges HTML.
Twiz
1
@Chuck Ich schlage nicht vor, dass Sie es auf die eine oder andere Weise tun, nur dass das Problem nicht besonders wichtig ist. Wir können genauso gut Leerzeichen gegen Tabulatoren diskutieren, während wir dabei sind. haha
twiz
41

Keine in Bezug auf das Laufzeitverhalten, dies sind nur verschiedene Arten von Namensanweisungen, wie hier beschrieben: http://docs.angularjs.org/guide/directive

Direktiven haben Kamelnamen wie ngBind. Die Anweisung kann aufgerufen werden, indem der Name des Kamelfalls in einen Schlangenfall mit den folgenden Sonderzeichen übersetzt wird :, - oder _. Optional kann der Direktive x- oder data- vorangestellt werden, damit sie HTML-validator-kompatibel ist. Hier ist eine Liste einiger möglicher Direktivennamen: ng: bind, ng-bind, ng_bind, x-ng-bind und data-ng-bind.

Wie Sie aus dem Lesen ersehen data-können, kann dies verwendet werden, um Ihren HTML-Code HTML-Validator-Tests bestehen zu lassen.

pkozlowski.opensource
quelle
2
Wo in der Spezifikation von HTML erlaubt dies?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/…
pkozlowski.opensource
6

Sie können den eckigen Namespace deklarieren <html xmlns:ng="http://angularjs.org" ng-app>

Mounir
quelle
2
Dies scheint nur für ältere Apps zu gelten: "Wenn Sie die Syntax ng der alten Direktive verwenden, fügen Sie den XML-Namespace in HTML ein, um den IE glücklich zu machen. (Dies ist aus historischen Gründen hier und wir empfehlen die Verwendung von nicht mehr ng:.) ". Quelle: docs.angularjs.org/guide/bootstrap
Chuck Le Butt
5

In modernen Browsern gibt es keinen Unterschied, aber in älteren IEs funktionieren sie nur, wenn Sie einen XML-Namespace deklarieren, der ihn definiert.

Es gibt auch einen Validierungsunterschied darin, dass ng-appXHTML nicht gültig ist und Ihre Webseite die HTML-Validierung nicht besteht. Mit Angular können Sie seinen Anweisungen ein Präfix voranstellen data-oder x-eine Validierung zulassen.

abject_error
quelle
Dies scheint nur zuzutreffen, wenn Sie "ng:" verwenden. Ich glaube, "data-ng-" sollte validieren.
Chuck Le Butt
4

Sie können data-ng- anstelle von ng- verwenden, wenn Sie das HTML Ihrer Seite gültig machen möchten.
Dies wird einen Fehler auslösen

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

Dies wird keinen Fehler auslösen

<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
quelle
Könnten Sie bitte erklären, warum das erste Szenario einen Fehler auslösen würde?
Awani
Dies bezieht sich auf die w3c-Validierung.
Graham P Heath
3

Der grundlegende Unterschied zwischen diesen beiden Begriffen besteht darin, dass data-ng-app den HTML-Code validiert, während letzterer dies nicht tut. Die Funktionalität bleibt gleich. Für weitere Informationen können Sie w3Validator ausprobieren.

Abhishek Gakhar
quelle
-2

Es gibt absolut keinen Unterschied zwischen den beiden, außer dass bestimmte HTML5-Validatoren einen Fehler in einer Eigenschaft wie ng-app auslösen, aber keinen Fehler für etwas auslösen, dem Daten vorangestellt sind, wie z. B. data-ng-app. Die Verwendung des Datenpräfixes mit unseren Winkelanweisungen ist also gut.

Sogar Sie können Winkelanweisungen auf die unten genannten Arten verwenden: ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

König Raj
quelle