Ng-app vs. data-ng-app, в чем разница?

В настоящее время я смотрю этот учебник для начинающих для angular.js

В какой-то момент (после 12'40 ") динамик заявляет, что атрибуты ng-app и data-ng-app="" более или менее эквивалентны внутри тега <html>, а также ng-model="my_data_binding и data-ng-model="my_data_binding". Однако говорящий говорит, что html будет проверяться с помощью различных валидаторов, в зависимости от того, какой атрибут используется.

Не могли бы вы объяснить разницу между двумя способами, префикс ng- от префикса data-ng-?

Ответы

Ответ 1

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

Итак, чтобы ответить на ваш вопрос, используйте data-ng-app, если вы хотите упростить проверку своего HTML.

Забавный факт: вы также можете использовать x-ng-app для того же эффекта.

Ответ 2

Из Документация Angularjs

Angular нормализует тег элемента и имя атрибута для определения какие элементы соответствуют этим директивам. Обычно мы ссылаемся на директивы по их регистрозаменному имени camelCase с учетом регистра (например, ngModel). Однако, поскольку HTML нечувствителен к регистру, мы ссылаемся на директивы в DOM по нижним регистрам, обычно используя атрибуты с разделителями тире на элементах DOM (например, ng-model).

Процесс нормализации выглядит следующим образом:

Разделить x- и данные - с передней стороны элемента/атрибутов. Преобразуйте имя:, - или _-delimited в camelCase. Вот несколько эквивалентов примеры элементов, которые соответствуют ngBind:

основанный на приведенном выше описании ниже, являются действительными директивами

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

Ответ 3

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

Ответ 4

Краткий ответ:

ng-model и data-ng-model являются одинаковыми и эквивалентными!

Почему?

  • причина для: data- префикса
    Спецификация HTML5 ожидает, что любой пользовательский атрибут будет префикс data-.

  • причина для: как ng-model, так и data-ng-model одинаковы и эквивалентны.

Документ AngularJS - нормализация

Angular нормализует тег элемента и имя атрибута, чтобы определить, какие элементы соответствуют этим директивам. Обычно мы ссылаемся на директивы с учетом нормального имени camelCase своего регистра, например (ngModel). Однако, поскольку HTML не чувствителен к регистру, мы ссылаемся на директивы в DOM по строчным формам, как правило, используя атрибуты тире с разделителями на элементах DOM (например, ng-model).

Процесс нормализации выглядит следующим образом:
1. Разделите x- и data- с передней стороны элемента/атрибутов.
2. Преобразуйте :, - или _ -delimited name в camelCase.

Например
следующие формы эквивалентны и соответствуют директиве 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>

Ответ 5

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

Ответ 6

если вы хотите манипулировать html или html-фрагментами на своем сервере перед его службой в браузер, вы определенно хотите использовать атрибуты data-ng-xxx вместо атрибутов ng-xxx.

  • Это делает ваш html действительным, то есть он может использоваться анализаторами html (на сервере), такими как domdocument (php) или другими. Эти парсеры часто терпят неудачу на плохо сформированном html.
  • Angular нормализует атрибут, но помните, что на клиенте, а не на сервере.