В чем разница между ng-app и data-ng-app?

147

Я начал , чтобы узнать о AngularJS и смущает о том, что различия между ng-appи data-ng-appдирективами.

angularjs angularjs-directive user1876508
источник
7
Возможный дубликат ng-app против data-ng-app, в чем разница?
Ченруи
8
@chenrui - этот вопрос появился первым. (24 апреля против 16 мая)
ошибочный философ
1
Это не повлияет на ваше приложение, и Angular будет работать должным образом, даже если вы используете ng-app или data-ng-app, но, как упоминалось @ user2289659, использование data- * представляет стандарт пользовательских атрибутов начиная с HTML5
Shujaath Khan

Ответы:

125

Большинство из этих ответов просто говорят о том, что делает шаблон допустимым HTML или HTML Validator Compliant , без объяснения того, что означают эти термины.

Я не знаю наверняка, но я предполагаю, что эти термины применяются к программам проверки HTML, которые сканируют ваш код на соответствие стандартам - вроде как lint. Они не распознаются ng-appкак действительный атрибут. Они ожидают, что атрибуты HTML не по умолчанию будут предварены

data-attribute_name_here,

Таким образом, создатели AngularJSсоздали альтернативные имена для своих директив, которые включают data-перед ними так, чтобы программы валидатора HTML «полюбили» их.

Кирби Л. Уоллес
источник
4
+1 за «Хорошо. Так что же означает« в соответствии с валидатором »?» подходить. Если бы вы провели исследование, вы бы обнаружили, что вы в основном угадываете. =)
slacktracer
22
Допустимый HTML не для валидаторов HTML. Браузеры разбирают HTML. Если вы начинаете отклоняться от спецификации HTML, нет гарантии, что ваш HTML будет проанализирован правильно.
Блендер
1
Да, валидаторы - это средство для достижения цели. Цель состоит в том, чтобы сделать ваши веб-страницы максимально приближенными к спецификациям, что максимально увеличивает количество браузеров - старых, настоящих и будущих, - в которых ваше приложение будет работать так, как ожидается. В случае «data- *», есть также риск, что браузеры могут вводить тот же атрибут, что и стандарт, что противоречит атрибуту вашего приложения. Кроме того, соблюдение таких стандартов поможет инструментам (например, редакторам) понять это и сделать их более полезными для вас.
mahemoff
2
@Blender «нет гарантии, что ваш HTML будет проанализирован правильно», то же самое можно сказать и о действительном HTML.
Твит
1
@ Чак Я не предлагаю вам делать это так или иначе, просто проблема не особенно важна. Мы можем также обсуждать пробелы против вкладок, пока мы на нем. хаха
твиз
41

Ни с точки зрения поведения во время выполнения, это просто разные стили директив именования, как описано здесь: http://docs.angularjs.org/guide/directive

Директивы имеют названия в верблюжьих клетках, такие как ngBind. Директива может быть вызвана путем перевода имени дела верблюда в дело змеи с помощью специальных символов:, - или _. При желании директива может иметь префикс x- или data-, чтобы сделать ее совместимой с валидатором HTML. Вот список некоторых из возможных имен директив: ng: bind, ng-bind, ng_bind, x-ng-bind и data-ng-bind.

Как вы можете видеть из этого, он data-может быть использован для того, чтобы ваши HTML проходили тесты валидатора HTML /

pkozlowski.opensource
источник
2
Где в спецификации HTML это разрешено?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/…
pkozlowski.opensource
6

Вы можете объявить угловое пространство имен <html xmlns:ng="http://angularjs.org" ng-app>

Мунир
источник
2
По-видимому, это применимо только к устаревшим приложениям: «Если вы решите использовать синтаксис директивы старого стиля ng:, включите пространство имен xml в html, чтобы сделать IE счастливым. (Это здесь по историческим причинам, и мы больше не рекомендуем использовать нг :.)». Источник: docs.angularjs.org/guide/bootstrap
Чак Ле Батт
5

В современных браузерах нет никакой разницы, но в старых IE они не будут работать, если вы не объявите пространство имен XML, определяющее его.

Существует также разница в проверке в том, что ng-appэто недопустимый XHTML, и это приведет к тому, что ваша веб-страница не пройдет проверку HTML. Angular позволяет ставить перед директивами префикс data-или x-разрешать его проверку.

abject_error
источник
Похоже, что это правда только если вы используете «ng:». Я считаю, что «data-ng-» должен подтвердить.
Чак Ле Бат
4

Вы можете использовать data-ng- вместо ng-, если хотите сделать HTML-код вашей страницы корректным.
Это выдаст ошибку

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

Это не выдаст ошибку

<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>
Вахап Генчдал
источник
Не могли бы вы объяснить, почему в первом сценарии возникла ошибка?
Авани
Это ссылка на валидацию w3c.
Грэм П Хит
3

Основное различие между этими двумя терминами заключается в том, что data-ng-app проверяет HTML, а последний - нет. Функциональность остается прежней. Для получения дополнительной информации вы можете попробовать w3Validator.

Абхишек Гахар
источник
-2

Абсолютно нет никакой разницы между ними, за исключением того, что некоторые валидаторы HTML5 будут выдавать ошибку для свойства, такого как ng-app, но они не выдают ошибку для чего-либо с префиксом data-, например data-ng-app. Поэтому использование префикса данных с нашими угловыми директивами - это хорошо.

Даже вы можете использовать угловые директивы следующими способами: ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

Король радж
источник