web-dev-qa-db-fra.com

ng-app vs data-ng-app, quelle est la différence?

Je suis en train de regarder cette vidéo de démarrage pour angular.js

À un moment donné (après 12'40 "), le locuteur indique que les attributs ng-app et data-ng-app="" sont plus ou moins équivalents à l'intérieur de la balise <html>, de même que ng-model="my_data_binding et data-ng-model="my_data_binding". Cependant, l'orateur a déclaré que le code HTML serait validé par différents validateurs, en fonction de l'attribut utilisé.

Pourriez-vous expliquer la différence entre les deux manières, le préfixe ng- contre le préfixe data-ng-?

html5angularjs
226
Stephane Rolland

Bonne question. La différence est simple - il n'y a absolument aucune différence entre les deux sauf que certains validateurs HTML5 jetteront une erreur sur une propriété comme ng-app, mais ils ne jetteront pas d'erreur pour les éléments préfixés avec data-, comme data-ng-app.

Donc, pour répondre à votre question, utilisez data-ng-app si vous souhaitez que la validation de votre code HTML soit un peu plus facile.

Fait amusant: vous pouvez également utiliser x-ng-app dans le même sens.

400
Code Whisperer

De Documentation Angularjs

Angular normalise la balise d'un élément et le nom de son attribut pour déterminer quels éléments correspondent à quelles directives. Nous nous référons généralement aux directives par leur nom normalisé camelCase (par exemple, ngModel). Cependant, comme HTML ne fait pas la distinction entre les majuscules et les minuscules, nous référons aux directives du modèle DOM par des formes minuscules, qui utilisent généralement des attributs délimités par des tirets sur les éléments DOM (par exemple, le modèle ng).

Le processus de normalisation est le suivant:

Supprimez x et les données de l'avant de l'élément/attributs. Convertissez le nom délimité par:, - ou _ en camelCase. Voici quelques exemples équivalents d'éléments correspondant à ngBind:

sur la base de la déclaration ci-dessous, toutes sont des directives valides

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

63
srinu

La différence réside dans le fait que les attributs personnalisés data-* sont valables dans spécification HTML5 . Donc, si vous avez besoin que votre marquage soit validé, vous devriez les utiliser plutôt que les attributs ng.

29
Manu Letroll

Réponse courte:

ng-model et data-ng-model sont identiques et équivalents!

Pourquoi?

  1. raison de: data- préfixe
    spécification HTML5 s'attend à ce que tout attribut personnalisé soit préfixé par data-.

  2. raison pour: ng-model et data-ng-model sont identiques et équivalents.

Document AngularJS - Normalisation

Angular normalise la balise et le nom d'attribut d'un élément pour déterminer quels éléments correspondent à quelles directives. Nous nous référons généralement aux directives par leur casse camelCase nom normalisé (par exemple, ngModel). Cependant, comme HTML ne fait pas la distinction entre les majuscules et les minuscules, nous référons aux directives du DOM sous forme de minuscules, en utilisant généralement les attributs délimité par des tirets sur les éléments DOM (par exemple ng-model).

Le processus de normalisation est le suivant:
1. Dénudez x- et data- de l'avant de l'élément/attributs.
2. Convertissez le nom :, -, ou_- en nom de fichier camelCase.

Par exemple
les formes suivantes sont toutes équivalentes et correspondent à la directive 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>
13
Eddy

Vous pouvez utiliser data-ng-, au lieu de ng-, si vous souhaitez rendre votre page HTML valide.

2
NNaseet

si vous souhaitez manipuler des fragments html ou html sur votre serveur avant de le transmettre au navigateur, vous souhaitez sans aucun doute utiliser des attributs data-ng-xxx au lieu de simplement des attributs ng-xxx.

  1. Cela rend votre code HTML valide, ce qui signifie qu'il peut être utilisé par des analyseurs syntaxiques HTML (basés sur le serveur) tels que domdocument (php) ou autres. Ces analyseurs échouent souvent sur du HTML mal formé.
  2. Angular normalise l'attribut, mais rappelez-vous que c'est sur le client, pas sur le serveur.
1
Kees Hessels