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 losdata-
.razón para: tanto
ng-model
comodata-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. Tirax-
ydata-
desde el frente del elemento / atributos.
2. Convierta el nombre delimitado:,-
o_
acamelCase
.
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>
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.