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

230

Atualmente, estou vendo este vídeo tutorial de início paraangular.js

Em algum momento (após 12'40" ), os estados de alto-falante que os atributos ng-appe data-ng-app=""são mais ou menos equivalentes dentro da <html>tag, e assim são ng-model="my_data_bindinge data-ng-model="my_data_binding". No entanto, o orador diz o html seria validado através de diferentes validadores, dependendo de qual atributo é usava.

Você poderia explicar a diferença entre as duas maneiras, ng-prefixo versus data-ng-prefixo?

html angularjs Stephane Rolland
fonte
2
possível duplicata de Qual é a diferença entre ng-app e data-ng-app?
Bob Jarvis - Reinstate Monica

Respostas:

403

Boa pergunta. A diferença é simples - não há absolutamente nenhuma 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 algo prefixado com data-, como data-ng-app.

Portanto, para responder sua pergunta, use data-ng-appse você deseja validar seu HTML um pouco mais fácil.

Curiosidade: você também pode usar x-ng-appo mesmo efeito.

Code Whisperer
fonte
4
O prefixo de dados impediria que um atributo ng funcionasse corretamente? (por exemplo, "repetição de dados em ng")?
tonejac
3
Parece que é um desperdício de ciclos de CPU retirar data-e remover manualmente x-. Por que as regras de validação HTML não podem ser alteradas para aceitar ng-coisas?
21815 DaveAlger
8
@DaveAlger: os data-*atributos são o caminho para estender o HTML .
Sampathsris
1
@ DaveAlger: É uma má idéia fazer o que você disse. Se houver muitas ferramentas famosas como Angular lá fora, com prefixo diferente, você deseja que o HTML siga todas elas para adicionar seu prefixo?!?! Como Krumia disse, é o caminho para estender o HTML.
Dassi Orleando
65

Da documentação do Angularjs

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

O processo de normalização é o seguinte:

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

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

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

srinu
fonte
Mas isso é feito apenas para comparar com o nome da diretiva. Não altera o atributo real.
RetroCoder
3
É bom saber sobre o - ,: e _ notação
Código Whisperer
29

A diferença está no fato de que os data-*atributos personalizados são válidos na especificação HTML5 . Portanto, se você precisar que sua marcação seja validada, use-as em vez dos ngatributos.

Manu Letroll
fonte
1
Entendo pela especificação que data- * funcionaria, pois apenas valida o html. Mas então por que x- * funcionaria? não há descrição sobre isso na especificação.
Bhramar 10/07
1
x- * está reservado para uso pelo navegador. Quanto à sua pergunta PORQUE x funciona, qualquer um deles funcionará como angular, especificamente, para garantir que funcione para os dados / x, codificando-os em sua estrutura. Se você está perguntando POR QUE x funciona para angular, isso é outro debate. Existem bons argumentos para ambos. Veja esta resposta no SO: stackoverflow.com/a/17902387/339803 A outra resposta nessa página parece pensar que x é para XHTML, mas não tenho certeza. Veja o que você pode fazer disso depois de ler tudo. HTML5 especificação também diz que o uso do navegador / fornecedor: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Resposta curta:

ng-modele data-ng-modelsão iguais e equivalentes!

Por quê?

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

  2. razão para: ambos ng-modele data-ng-modelsão iguais e equivalentes.

Documento AngularJS - Normalização

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

O processo de normalização é o seguinte:
1. Os seguintes formulários são todos equivalentes e correspondem à diretiva ngBind:x- e a data-partir da frente do elemento / atributos.
2. Converta o :, -ou _nome -delimited para camelCase.

Por exemplo 

<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>
Eddy
fonte
2

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

NNaseet
fonte
2
o OP entende que eles podem ser usados ​​de forma intercambiável, mas deseja saber por que os dois estão disponíveis se funcionam "da mesma forma". Acredito que uma explicação sobre o que os torna diferentes seria uma resposta mais valiosa.
Charles Watson
1

se você deseja manipular fragmentos html ou html no seu servidor antes de veiculá-lo no navegador, definitivamente deseja usar atributos data-ng-xxx em vez de apenas ng-xxx.

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