ng-app vs. data-ng-app, qual é a diferença?

Atualmente estou olhando para este vídeo tutorial de início para angular.js

Em algum momento (após 12’40 “), o locutor afirma que os atributos ng-app e data-ng-app="" são mais ou menos equivalentes dentro da tag , e assim são ng-model="my_data_binding e data-ng-model="my_data_binding" . No entanto, o locutor diz que o html seria validado através de diferentes validadores, dependendo de qual atributo é usado.

Você poderia explicar a diferença entre as duas formas, ng- prefix contra data-ng- prefix?

Boa pergunta. A diferença é simples – não há absolutamente nenhuma diferença entre os dois, exceto que certos validadores HTML5 lançarão um erro em uma propriedade como ng-app , mas eles não lançam um erro para qualquer coisa prefixada com data- – como data-ng-app .

Então, para responder à sua pergunta, use data-ng-app se você quiser validar seu HTML para ser um pouco mais fácil.

Curiosidade: Você também pode usar o x-ng-app para o mesmo efeito.

Da documentação do Angularjs

Angular normaliza a tag e o nome do atributo de um elemento para determinar quais elementos correspondem a quais diretivas. Normalmente, nos referimos a diretivas por seu nome normalizado camelCase com distinção entre maiúsculas e minúsculas (por exemplo, ngModel). No entanto, como o HTML não faz distinção entre maiúsculas e minúsculas, nos referimos a diretivas no DOM por formulários minúsculos, geralmente usando atributos delimitados por traço em elementos DOM (por exemplo, ng-model).

O processo de normalização é o seguinte:

Faixa x- e dados – da frente do elemento / atributos. Converta o nome:, – ou _-delimitado para camelCase. Aqui estão alguns exemplos equivalentes de elementos que correspondem ao ngBind:

com base na declaração acima abaixo, todas são diretrizes válidas

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

As diferenças residem no fato de que atributos data-* personalizados são válidos na especificação HTML5 . Portanto, se você precisar que sua marcação seja validada, você deve usá-las em vez dos atributos ng .

Resposta curta:

ng-model e data-ng-model são iguais e equivalentes!


Por quê?

  1. motivo para: prefixo de data-
    A especificação HTML5 espera que qualquer atributo personalizado seja prefixado por data- .

  2. razão para: tanto ng-model e data-ng-model são iguais e equivalentes.

Documento AngularJS – Normalização

Angular normaliza a tag e o nome do atributo de um elemento para determinar quais elementos correspondem a quais diretivas. Normalmente, nos referimos a diretivas por seu nome normalizado camelCase com ngModel maiúsculas e minúsculas (por exemplo, ngModel ). No entanto, como o HTML não faz distinção entre maiúsculas e minúsculas, nos referimos a diretivas no DOM por formulários minúsculos, geralmente usando atributos delimitados por traço em elementos DOM (por exemplo, ng-model ).

O processo de normalização é o seguinte:
1. Retirar x- e data- da frente do elemento / atributos.
2. Converta o nome:, - ou _ -delimited para camelCase .

Por exemplo
os seguintes formulários são todos equivalentes e correspondem à diretiva ngBind:

 
Hello





Você pode usar data-ng-, em vez de ng-, se quiser tornar sua página HTML válida.

Se você quiser manipular html ou html-fragments no seu servidor antes de servi-lo para o navegador, você definitivamente quer usar atributos data-ng-xxx em vez de apenas atributos ng-xxx.

  1. Isso torna seu HTML válido, o que significa que ele pode ser usado por analisadores html (baseados em servidor) como o domdocument (php) ou outros. Esses parsers geralmente falham em html não bem formado.
  2. Angular normaliza o atributo, mas lembre-se, isso está no cliente, não no servidor.