Qual é a diferença entre ng-app e data-ng-app?

147

Comecei a aprender sobre o AngularJS e estou confuso sobre quais são as diferenças entre as diretivas ng-appe data-ng-app.

angularjs angularjs-directive user1876508
fonte
7
possível duplicação de ng-app vs. data-ng-app, qual é a diferença?
Chenrui
8
@chenrui - este Q veio primeiro entre. (24 de abril x 16 de maio)
Blundering Philosopher
1
Seu aplicativo não será afetado e o Angular funcionará conforme o esperado, mesmo se você usar ng-app ou data-ng-app, mas conforme mencionado por @ user2289659 usando dados- * é introduzido o padrão de atributo personalizado do HTML5 em diante
Shujaath Khan

Respostas:

125

A maioria dessas respostas está simplesmente dizendo que torna o modelo válido em HTML ou compatível com o validador de HTML , sem explicar o que esses termos significam.

Não sei ao certo, mas acho que esses termos se aplicam aos programas de validação HTML que examinam seu código quanto à conformidade com os padrões - como fiapos. Eles não reconhecem ng-appcomo um atributo válido. Eles esperam que atributos HTML não padrão sejam precedidos por

data-attribute_name_here.

Portanto, os criadores do site AngularJScriaram nomes alternativos para suas diretivas, que incluem os que estão data-na frente deles, para que os programas validadores de HTML "gostem" deles.

Kirby L. Wallace
fonte
4
+1 para "Ok. Então, o que significa 'compatível com validador'?" abordagem. Se você tivesse feito a pesquisa, descobriria que está acertando na maioria das vezes. =)
slacktracer
22
HTML válido não é para validadores de HTML. Navegadores analisam HTML. Se você começar a desviar-se da especificação HTML, não há garantia de que seu HTML será analisado corretamente.
Blender
1
Sim, os validadores são um meio para o fim. O objetivo é tornar suas páginas da Web o mais próximo possível das especificações, o que maximiza o número de navegadores (antigos, presentes e futuros) nos quais seu aplicativo realmente funcionará conforme o esperado. No caso de "dados- *", também há os navegadores de risco que podem introduzir o mesmo atributo de um padrão, o que colidiria com o atributo do seu aplicativo. Além disso, aderir a padrões como esse ajudará as ferramentas (por exemplo, editores) a entender e torná-las mais úteis para você.
mahemoff
2
@Blender "não há garantia de que seu HTML será analisado corretamente", o mesmo pode ser dito para HTML válido.
Twiz
1
@ Chuck, não estou sugerindo que você faça de uma maneira ou de outra, apenas que o problema não é particularmente importante. Também podemos debater espaços x tabulações enquanto estamos nisso. haha
twiz 26/09/14
41

Nenhum em termos de comportamento em tempo de execução, esses são apenas estilos diferentes de diretivas de nomenclatura, conforme descrito aqui: http://docs.angularjs.org/guide/directive

As diretivas possuem nomes de camel case, como ngBind. A diretiva pode ser invocada traduzindo o nome da caixa de camelo para caixa de cobra com os seguintes caracteres especiais:, - ou _. Opcionalmente, a diretiva pode ser prefixada com x ou dados para torná-la compatível com o validador HTML. Aqui está uma lista de alguns dos possíveis nomes de diretiva: ng: bind, ng-bind, ng_bind, x-ng-bind e data-ng-bind.

Como você pode ver lendo isso, data-pode ser usado para fazer seu HTML passar nos testes do validador HTML /

pkozlowski.opensource
fonte
2
Onde na especificação do HTML permite isso?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/…
pkozlowski.opensource
6

Você pode declarar o espaço para nome angular <html xmlns:ng="http://angularjs.org" ng-app>

Mounir
fonte
2
Isso parece ser aplicável apenas a aplicativos herdados: "Se você optar por usar a sintaxe da diretiva de estilo antigo ng: inclua xml-namespace no html para deixar o IE feliz. (Isso está aqui por razões históricas e não recomendamos mais o uso de ng :.) ". Fonte: docs.angularjs.org/guide/bootstrap
Chuck Le Butt
5

Nos navegadores modernos, não há diferença, mas nos IEs mais antigos, eles não funcionarão, a menos que você declare um namespace XML definindo-o.

Também há uma diferença de validação em que ng-appXHTML não é válido e fará com que sua página da Web falhe nas validações em HTML. Angular permite prefixar suas diretivas com data-ou x-para validar.

abject_error
fonte
Isso parece ser verdade apenas se você estiver usando "ng:". Eu acredito que "data-ng-" deve validar.
Chuck Le Butt
4

Você pode usar data-ng-, em vez de ng-, se desejar tornar o HTML da sua página válido.
Isso gerará um erro

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

Isso não gera um erro

<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
fonte
Você poderia explicar por que o primeiro cenário geraria um erro?
Awani 27/08/18
Isso está referenciando a validação do w3c.
Graham P Heath
3

A diferença básica entre esses dois termos é que o aplicativo de dados-ng valida o HTML, enquanto o último não. A funcionalidade permanece a mesma. Para mais referência, você pode tentar o w3Validator.

Abhishek Gakhar
fonte
-2

Absolutamente não há diferença entre os dois, exceto que certos validadores HTML5 lançam um erro em uma propriedade como ng-app, mas eles não lançam um erro para qualquer coisa prefixada com dados, como dados-ng-app. Portanto, é bom usar o prefixo de dados com nossas diretivas angulares.

Mesmo você pode usar diretivas angulares das maneiras mencionadas abaixo ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

King Raj
fonte