Quelle est la différence entre ng-app et data-ng-app?

147

J'ai commencé à en apprendre davantage sur AngularJS et je ne sais pas quelles sont les différences entre les directives ng-appet data-ng-app.

angularjs angularjs-directive

— user1876508
source

7

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

— chenrui

8

@chenrui - ce Q est venu en premier btw. (24 avril vs 16 mai)

— Philosophe

1

Votre application ne sera pas affectée et Angular fonctionnera comme prévu même si vous utilisez ng-app ou data-ng-app, mais comme mentionné par @ user2289659 en utilisant data- * est introduit une norme d'attribut personnalisé à partir de HTML5

— Shujaath Khan

125

La plupart de ces réponses disent simplement que cela rend le modèle valide HTML ou HTML Validator Compliant , sans expliquer non plus ce que ces termes signifient.

Je ne sais pas avec certitude, mais je suppose que ces termes s'appliquent aux programmes de validation HTML qui analysent votre code pour la conformité aux normes - un peu comme de la charpie. Ils ne reconnaissent pas ng-appcomme un attribut valide. Ils s'attendent à ce que les attributs HTML non par défaut soient précédés de

data-attribute_name_here.

Ainsi, les créateurs de AngularJSont créé des noms alternatifs pour leurs directives qui incluent le data-devant eux afin que les programmes de validation HTML les "aiment".

— Kirby L. Wallace
source

4

+1 pour le "Ok. Alors, que signifie" conforme au validateur ", de toute façon?" approche. Si vous aviez fait la recherche, vous découvririez que vous avez généralement raison. =)

— slacktracer

22

Le HTML valide n'est pas destiné aux validateurs HTML. Les navigateurs analysent le HTML. Si vous commencez à vous écarter de la spécification HTML, rien ne garantit que votre HTML sera analysé correctement.

— Blender

1

Oui, les validateurs sont un moyen pour la fin. L'objectif est de rendre vos pages Web aussi proches que possible des spécifications, ce qui maximise le nombre de navigateurs - anciens, présents et futurs - dans lesquels votre application fonctionnera réellement comme prévu. Dans le cas de "data- *", les navigateurs risquent également d'introduire le même attribut qu'une norme, ce qui entrerait en conflit avec l'attribut de votre application. De plus, s'en tenir à des normes comme celle-ci aidera les outils (par exemple les éditeurs) à comprendre et à vous les rendre plus utiles.

— mahemoff

2

@Blender "il n'y a aucune garantie que votre HTML sera analysé correctement", il en va de même pour du HTML valide.

— twiz du

1

@Chuck Je ne vous suggère pas de le faire d'une manière ou d'une autre, juste que le problème n'est pas particulièrement important. Nous pouvons aussi débattre des espaces et des onglets pendant que nous y sommes. haha

— twiz du

41

Aucun en termes de comportement d'exécution, ce ne sont que des styles de directives de dénomination différents, comme décrit ici: http://docs.angularjs.org/guide/directive

Les directives ont des noms en cas de chameau tels que ngBind. La directive peut être invoquée en traduisant le nom de cas du chameau en cas de serpent avec ces caractères spéciaux:, - ou _. En option, la directive peut être préfixée avec x- ou data- pour la rendre compatible avec le validateur HTML. Voici une liste de certains des noms de directive possibles: ng: bind, ng-bind, ng_bind, x-ng-bind et data-ng-bind.

Comme vous pouvez le voir en lisant ceci, le data-peut être utilisé pour que votre HTML passe les tests de validation HTML /

— pkozlowski.opensource
source

2

Où dans la spécification de HTML permet cela?

— user1876508

3

@ user1876508: w3.org/TR/2011/WD-html5-20110525/…

— pkozlowski.opensource

6

Vous pouvez déclarer l'espace de noms angulaire <html xmlns:ng="http://angularjs.org" ng-app>

— Mounir
source

2

Cela ne semble s'appliquer qu'aux applications héritées: "Si vous choisissez d'utiliser l'ancienne syntaxe de directive de style ng: incluez alors xml-namespace dans html pour rendre IE heureux. (Ceci est ici pour des raisons historiques, et nous ne recommandons plus l'utilisation de ng :.) ". Source: docs.angularjs.org/guide/bootstrap

— Chuck Le Butt

5

Dans les navigateurs modernes, il n'y a pas de différence, mais dans les IE plus anciens, ils ne fonctionneront que si vous déclarez un espace de noms XML le définissant.

Il existe également une différence de validation en ce que le ng-appXHTML n'est pas valide et entraînera l'échec des validations HTML de votre page Web. Angular vous permet de préfixer ses directives avec data-ou x-de lui permettre de valider.

— abject_error
source

Cela semble être vrai uniquement si vous utilisez "ng:". Je crois que "data-ng-" devrait valider.

— Chuck Le Butt

4

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

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

Cela ne jettera pas d'erreur

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

Pourriez-vous s'il vous plaît expliquer pourquoi le premier scénario générerait une erreur?

— Awani

Ceci fait référence à la validation w3c.

— Graham P Heath

3

La différence fondamentale entre ces deux termes est que data-ng-app valide le HTML alors que ce dernier ne le fait pas. La fonctionnalité reste la même. Pour plus de références, vous pouvez essayer w3Validator.

— Abhishek Gakhar
source

-2

Il n'y a absolument aucune différence entre les deux, sauf que certains validateurs HTML5 lèveront une erreur sur une propriété comme ng-app, mais ils ne lèveront pas d'erreur pour tout ce qui est préfixé avec data-, comme data-ng-app. Donc, utiliser le préfixe de données avec nos directives angulaires est une bonne chose.

Même vous pouvez utiliser des directives angulaires de la manière mentionnée ci-dessous ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

— Roi Raj
source