¿Cuál es la diferencia entre ng-app y data-ng-app?

147

He comenzado a aprender sobre AngularJS y estoy confundido acerca de cuáles son las diferencias entre las directivas ng-appy data-ng-app.

angularjs angularjs-directive usuario1876508
fuente
77
posible duplicado de ng-app vs. data-ng-app, ¿cuál es la diferencia?
chenrui
8
@chenrui: esta Q vino primero por cierto. (24 de abril frente a 16 de mayo)
Filósofo del error
1
Su aplicación no se verá afectada y Angular funcionará como se espera, incluso si usa ng-app o data-ng-app, pero como lo mencionó @ user2289659 haciendo uso de data- * se introduce el estándar de atributo personalizado desde HTML5 en adelante
Shujaath Khan

Respuestas:

125

La mayoría de estas respuestas simplemente dicen que HTML de plantilla es válido o que cumple con el Validador de HTML , sin explicar tampoco lo que significan ESOS términos.

No estoy seguro, pero supongo que estos términos se aplican a los programas de validación HTML que escanean su código para cumplir con los estándares, algo así como pelusa. No se reconocen ng-appcomo un atributo válido. Esperan que los atributos HTML no predeterminados sean precedidos por

data-attribute_name_here.

Por lo tanto, los creadores de AngularJShan creado nombres alternativos para sus directivas que incluyen el data-frente de ellos para que los programas de validación HTML "les gusten".

Kirby L. Wallace
fuente
44
+1 para "Ok. Entonces, ¿qué significa 'validador compatible' de todos modos?" Acercarse. Si hubieras hecho la investigación, descubrirías que estás acertando en su mayoría. =)
slacktracer
22
El HTML válido no es para validadores HTML. Los navegadores analizan HTML. Si comienza a desviarse de la especificación HTML, no hay garantía de que su HTML se analice correctamente.
Licuadora
1
Sí, los validadores son un medio para el fin. El objetivo es hacer que sus páginas web estén lo más cerca posible de las especificaciones, lo que maximiza la cantidad de navegadores (antiguos, presentes y futuros) en los que su aplicación realmente funcionará como se espera. En el caso de "data- *", también existe el riesgo de que los navegadores puedan introducir el mismo atributo que un estándar, que colisionaría con el atributo de su aplicación. Además, apegarse a estándares como este ayudará a las herramientas (p. Ej., Editores) a entenderlo y hacerlo más útil para usted.
mahemoff
2
@Blender "no hay garantía de que su HTML se analice correctamente", lo mismo puede decirse de HTML válido.
twiz
1
@Chuck No estoy sugiriendo que lo hagas de una forma u otra, solo que el problema no es particularmente importante. También podríamos debatir espacios frente a pestañas mientras lo hacemos. jaja
twiz
41

Ninguno en términos del comportamiento de tiempo de ejecución, esos son solo diferentes estilos de directivas de nombres como se describe aquí: http://docs.angularjs.org/guide/directive

Las directivas tienen nombres en camello como ngBind. La directiva se puede invocar traduciendo el nombre del caso de camello en un caso de serpiente con estos caracteres especiales:, - o _. Opcionalmente, la directiva puede tener como prefijo x- o data- para que sea compatible con el validador HTML. Aquí hay una lista de algunos de los posibles nombres de directivas: ng: bind, ng-bind, ng_bind, x-ng-bind y data-ng-bind.

Como puede ver al leer esto, data-puede usarse para hacer que su HTML pase las pruebas de validación de HTML /

pkozlowski.opensource
fuente
2
¿Dónde en la especificación de HTML permite esto?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/…
pkozlowski.opensource
6

Puedes declarar el espacio de nombres angular <html xmlns:ng="http://angularjs.org" ng-app>

Mounir
fuente
2
Esto parece ser aplicable solo para aplicaciones heredadas: "Si elige usar la sintaxis de la directiva de estilo antiguo ng: entonces incluya el espacio de nombres xml en html para hacer feliz a IE. (Esto está aquí por razones históricas, y ya no recomendamos el uso de ng :.) ". Fuente: docs.angularjs.org/guide/bootstrap
Chuck Le Butt el
5

En los navegadores modernos no hay diferencia, pero en los IE más antiguos, no funcionarán a menos que declare un espacio de nombres XML que lo defina.

También hay una diferencia de validación en que ng-appno es XHTML válido, y hará que su página web falle en las validaciones HTML. Angular le permite prefijar sus directivas con data-o x-permitirle validar.

abject_error
fuente
Esto parece ser cierto solo si está usando "ng:". Creo que "data-ng-" debería validar.
Chuck Le Butt el
4

Puede usar data-ng-, en lugar de ng-, si desea que su página HTML sea válida.
Esto se generará un error

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

Esto no arrojará un error

<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
fuente
¿Podría explicar por qué el primer escenario arrojaría un error?
Awani
Esto hace referencia a la validación de w3c.
Graham P Heath
3

La diferencia básica entre estos dos términos es que data-ng-app valida el HTML mientras que el último no. La funcionalidad sigue siendo la misma. Para más referencia puede probar w3Validator.

Abhishek Gakhar
fuente
-2

Absolutamente no hay diferencia entre los dos, excepto que ciertos validadores HTML5 arrojarán un error en una propiedad como ng-app, pero no arrojan un error para cualquier cosa con el prefijo data-, como data-ng-app. Por lo tanto, usar el prefijo de datos con nuestras directivas angulares es bueno.

Incluso puede usar las directivas angulares de las formas mencionadas a continuación ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

Rey raj
fuente