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

230

Je regarde actuellement cette vidéo de démarrage pourangular.js

À un certain moment (après 12'40" ), les états de haut - parleurs que les attributs ng-appet data-ng-app=""sont plus ou moins équivalent à l' intérieur du <html>tag, et ainsi sont ng-model="my_data_bindinget data-ng-model="my_data_binding". Cependant , le haut - parleur dit le texte html serait validé par différents validateurs, selon lequel l' attribut est utilisé.

Pourriez-vous expliquer la différence entre les deux façons, ng-préfixe contre data-ng-préfixe?

html angularjs Stéphane Rolland
la source
2
doublon possible de Quelle est la différence entre ng-app et data-ng-app?
Bob Jarvis - Réintègre Monica

Réponses:

403

Bonne question. La différence est simple - il n'y a absolument aucune différence entre les deux sauf que certains validateurs HTML5 vont lancer une erreur sur une propriété comme ng-app, mais ils ne lancent pas d'erreur pour tout ce qui est préfixé data-, comme data-ng-app.

Donc, pour répondre à votre question, utilisez data-ng-appsi vous souhaitez valider un peu votre code HTML.

Fait amusant: vous pouvez également utiliser x-ng-apple même effet.

Code Whisperer
la source
4
Le préfixe de données empêcherait-il jamais un attribut ng de fonctionner correctement? (par exemple, "data-ng-repeat")?
tonejac
3
Il semble être un tel gaspillage de cycles CPU de retirer manuellement data-et x-. Pourquoi les règles de validation HTML ne peuvent-elles pas être modifiées pour accepter des ng-éléments?
DaveAlger
8
@DaveAlger: les data-*attributs sont le moyen d'étendre le HTML .
sampathsris
1
@DaveAlger: C'est une mauvaise idée de faire comme tu l'as dit. S'il y a beaucoup d'outils célèbres comme Angular à l'extérieur avec un préfixe différent, vous voulez que HTML les suive tous pour ajouter leur préfixe?!?! Comme Krumia l'a dit, c'est le moyen d'étendre le HTML.
Dassi Orleando
65

De la documentation Angularjs

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 nom normalisé sensible à la casse camelCase (par exemple ngModel). Cependant, comme HTML n'est pas sensible à la casse, nous faisons référence aux directives dans le DOM par des formes minuscules, en utilisant 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 / des attributs. Convertissez le nom délimité par:, - ou _ en camelCase. Voici quelques exemples équivalents d'éléments qui correspondent à ngBind:

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

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

srinu
la source
Mais il ne fait cela que pour comparer avec le nom de la directive. Cela ne change pas l'attribut réel.
RetroCoder
3
Bon à savoir sur les notations - ,: et _
Code Whisperer
29

La différence réside dans le fait que les data-*attributs personnalisés sont valides dans la spécification HTML5 . Donc, si vous avez besoin que votre balisage soit validé, vous devez les utiliser plutôt que les ngattributs.

Manu Letroll
la source
1
Je comprends de la spécification que data- * fonctionnerait car il valide simplement le html. Mais alors pourquoi x- * fonctionnerait-il? ce n'est pas une description à ce sujet dans la spécification.
Bhramar
1
x- * est réservé à l'usage du navigateur. Quant à votre question de savoir POURQUOI x fonctionne, l'un ou l'autre fonctionnera comme angulaire et s'assurera spécifiquement qu'il fonctionne pour les données / x en le codant dans leur cadre. Si vous demandez POURQUOI X fonctionne pour angulaire, c'est un autre débat. Il y a de bons arguments pour les deux. Voir cette réponse sur SO: stackoverflow.com/a/17902387/339803 L'autre réponse sur cette page semble penser que x est pour XHTML, mais je ne suis pas sûr. Voyez ce que vous pouvez en faire après avoir tout lu. Les spécifications HTML5 indiquent également l'utilisation du navigateur / fournisseur: w3.org/html/wg/drafts/html/master/single-page.html
redfox05
15

Réponse courte:

ng-modelet data-ng-modelsont identiques et équivalents!

Pourquoi?

  1. raison pour laquelle la spécification HTML5data- préfixe s'attend à ce que tout attribut personnalisé soit préfixé par .
    data-

  2. raison de: les deux ng-modelet data-ng-modelsont 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 nom normalisé sensible à la casse camelCase (par exemple ngModel). Cependant, étant donné que HTML n'est pas sensible à la casse, nous faisons référence aux directives dans le DOM par des formes minuscules, en utilisant généralement des attributs délimités 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-partir de l'avant de l'élément / des attributs.
2. Convertir le :, -ou le _nom -delimited à 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>
Tourbillon
la source
2

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

NNaseet
la source
2
l'OP comprend qu'ils peuvent être utilisés de manière interchangeable, mais souhaite savoir pourquoi les deux sont disponibles s'ils fonctionnent "de la même façon". Je crois qu'une explication sur ce qui les rend différents serait une réponse plus valable.
Charles Watson
1

si vous voulez manipuler du html ou des fragments html sur votre serveur avant de le servir au navigateur, vous voulez certainement utiliser des attributs data-ng-xxx au lieu de simplement ng-xxx.

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