ng-app vs. data-ng-app, ¿cuál es la diferencia?

230

Actualmente estoy viendo este video tutorial de inicio paraangular.js

En algún momento (después de 12'40" ), los estados de altavoces que los atributos ng-appy data-ng-app=""son más o menos equivalentes dentro de la <html>etiqueta, y también lo son ng-model="my_data_bindingy data-ng-model="my_data_binding". Sin embargo, el orador dice el html se validó a través de diferentes validadores, dependiendo de qué atributo es usado.

¿Podría explicar la diferencia entre las dos formas, ng-prefijo contra data-ng-prefijo?

html angularjs Stephane Rolland
fuente
2
posible duplicado de ¿Cuál es la diferencia entre ng-app y data-ng-app?
Bob Jarvis - Restablece a Monica

Respuestas:

403

Buena pregunta. La diferencia es simple: no hay absolutamente ninguna 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 nada con el prefijo data-, como data-ng-app.

Entonces, para responder a su pregunta, use data-ng-appsi desea validar su HTML para que sea un poco más fácil.

Dato curioso: también puedes usarlo x-ng-apppara el mismo efecto.

Code Whisperer
fuente
44
¿El prefijo de datos evitará que un atributo ng funcione correctamente? (por ejemplo, "data-ng-repeat")?
tonejac
3
Parece como un desperdicio de ciclos de CPU para quitar manualmente data-y x-. ¿Por qué no se pueden cambiar las reglas de validación HTML para aceptar ng-cosas?
DaveAlger
8
@DaveAlger: los data-*atributos son la forma de extender HTML .
sampathsris
1
@DaveAlger: Es una mala idea hacer lo que dijiste. Si hay muchas herramientas famosas como Angular afuera con diferentes prefijos, ¿quieres que HTML los siga a todos para agregar su prefijo? Como dijo Krumia, es la forma de extender HTML.
Dassi Orleando
65

De la documentación de Angularjs

Angular normaliza la etiqueta de un elemento y el nombre del atributo para determinar qué elementos coinciden con qué directivas. Normalmente nos referimos a las directivas por su nombre normalizado de camelCase que distingue entre mayúsculas y minúsculas (por ejemplo, ngModel). Sin embargo, dado que HTML no distingue entre mayúsculas y minúsculas, nos referimos a las directivas en DOM mediante formas en minúsculas, que generalmente usan atributos delimitados por guiones en elementos DOM (por ejemplo, ng-model).

El proceso de normalización es el siguiente:

Tira x- y datos- desde el frente del elemento / atributos. Convierta el nombre delimitado por:, - o _ a camelCase. Aquí hay algunos ejemplos equivalentes de elementos que coinciden con ngBind:

basado en la declaración anterior a continuación, todas son directivas válidas

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

srinu
fuente
Pero hace esto solo para compararlo con el nombre de la directiva. No cambia el atributo real.
RetroCoder
3
Es bueno saber acerca de la - ,: y _ notación
Code Whisperer
29

La diferencia radica en el hecho de que los data-*atributos personalizados son válidos en la especificación HTML5 . Entonces, si necesita que su marcado sea validado, debe usarlos en lugar de los ngatributos.

Manu Letroll
fuente
1
Entiendo por la especificación que data- * funcionaría ya que solo valida el html. Pero entonces, ¿por qué funcionaría x- *? no hay ninguna descripción sobre esto en la especificación.
Bhramar
1
x- * está reservado para el uso del navegador. En cuanto a su pregunta de POR QUÉ x funciona, cualquiera funcionará como angular específicamente se asegura de que funcione para cualquiera de los datos / x al codificarlo en su marco. Si se pregunta POR QUÉ x funciona para angular, bueno, ese es otro debate. Hay buenos argumentos para cualquiera. Vea esta respuesta en SO: stackoverflow.com/a/17902387/339803 La otra respuesta en esa página parece pensar que x es para XHTML, pero no estoy seguro. Vea qué puede hacer con eso después de leerlo todo. La especificación HTML5 también dice el uso del navegador / proveedor: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Respuesta corta:

ng-modely data-ng-modelson iguales y equivalentes!

¿Por qué?

  1. razón para: la especificación HTML5 dedata- prefijo espera que cualquier atributo personalizado tenga el prefijo .
    data-

  2. razón para: ambos ng-modely data-ng-modelson iguales y equivalentes.

Documento AngularJS - Normalización

Angular normaliza la etiqueta de un elemento y el nombre del atributo para determinar qué elementos coinciden con qué directivas. Normalmente nos referimos a las directivas por su nombre normalizado de camelCase que distingue entre mayúsculas y minúsculas (por ejemplo ngModel). Sin embargo, dado que HTML no distingue entre mayúsculas y minúsculas, nos referimos a las directivas en DOM mediante formas en minúsculas, que generalmente usan atributos delimitados por guiones en elementos DOM (por ejemplo ng-model).

El proceso de normalización es el siguiente:
1. Tira x-y data-desde el frente del elemento / atributos.
2. Convertir el :, -o _el nombre de -delimited camelCase.

Por ejemplo
Las siguientes formas son todas equivalentes y coinciden con la directiva ngBind:

<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>
Remolino
fuente
2

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

NNaseet
fuente
2
el OP entiende que se pueden usar indistintamente, pero desea saber por qué los dos están disponibles si funcionan "igual". Creo que una explicación de lo que los hace diferentes sería una respuesta más valiosa.
Charles Watson
1

si desea manipular html o fragmentos de html en su servidor antes de servirlo en el navegador, definitivamente desea utilizar atributos data-ng-xxx en lugar de solo atributos ng-xxx.

  1. Hace que su html sea válido, lo que significa que puede ser utilizado por analizadores html (basados ​​en servidor) como domdocument (php) u otros. Estos analizadores a menudo fallan en HTML no bien formado.
  2. Angular normaliza el atributo, pero recuerde, eso está en el cliente, no en el servidor.
Kees Hessels
fuente