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

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