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

angularjs ejemplos (6)

Respuesta corta:

ng-model y data-ng-model son iguales y equivalentes!

¿Por qué?

razón para: prefijo de data-
La especificación de HTML5 espera que cualquier atributo personalizado sea prefijado por los data- .
razón para: tanto ng-model como data-ng-model son iguales y equivalentes.

Documento AngularJS - Normalización

Angular normaliza la etiqueta de un elemento y el nombre de atributo para determinar qué elementos coinciden con qué directivas. Por lo general, nos referimos a las directivas por su nombre normalizado de camelCase mayúsculas y minúsculas (por ejemplo, ngModel ). Sin embargo, dado que el HTML no distingue entre mayúsculas y minúsculas, nos referimos a las directivas en el DOM mediante formularios en minúsculas, generalmente utilizando atributos dash-delimited 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. Convierta el nombre delimitado:, - o _ a 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/> </div>

Actualmente estoy viendo este video tutorial de inicio para angular.js

En algún momento (después de 12''40 "), el orador indica que los atributos ng-app y data-ng-app="" son más o menos equivalentes dentro de la etiqueta <html> , y también lo son ng-model="my_data_binding y data-ng-model="my_data_binding" . Sin embargo, el orador dice que el html se validaría a través de diferentes validadores, dependiendo del atributo que se use.

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

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 arrojarán un error para nada con el prefijo de data- , como data-ng-app

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

Dato curioso: también puedes usar x-ng-app para el mismo efecto.

De la documentación de Angularjs

Angular normaliza la etiqueta de un elemento y el nombre de atributo para determinar qué elementos coinciden con qué directivas. Por lo general, 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 el HTML no distingue entre mayúsculas y minúsculas, nos referimos a las directivas en el DOM mediante formularios en minúsculas, generalmente utilizando 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:, - 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: enlazar
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Las diferencias radican en el hecho de que los atributos de data-* personalizados son válidos en la especificación HTML5 . Entonces, si necesita que su marca sea validada, debe usarlas en lugar de los atributos ng .

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

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

Hace que su html sea válido, lo que significa que puede ser usado por analizadores html (basados en servidor) como domdocument (php) u otros. Estos analizadores a menudo fallan en html no bien formados.
Angular normaliza el atributo, pero recuerde que está en el cliente, no en el servidor.