Чим відрізняється ng-app від data-ng-app?

147

Я почав дізнаватися про AngularJS і я збентежений у тому, які відмінності між директивами ng-appта data-ng-appдирективами.

angularjs angularjs-directive

— користувач1876508
джерело

7

можливий дублікат ng-app проти data-ng-app, в чому різниця?

— chenrui

8

@chenrui - цей Q прийшов першим btw. (24 квітня проти 16 травня)

— Філософ Блуд

1

На вашу заявку не впливатимуть, і Angular буде працювати, як очікувалося, навіть якщо ви використовуєте ng-додаток або data-ng-додаток, але, як зазначає @ user2289659, використовуючи дані, * * запроваджено спеціальний стандарт атрибутів від HTML5 і далі

— Shujaath Khan

125

Більшість із цих відповідей просто говорять про те, що шаблон робить HTML дійсним чи HTML-валідатором , не пояснюючи, що означають ТОЗІ терміни.

Я точно не знаю, але я здогадуюсь, що ці терміни застосовуються до програм перевірки HTML, які сканують ваш код на предмет дотримання стандартів - на зразок вказівки. Вони не визнаються 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.

— twiz

1

@Chuck Я не пропоную вам це робити так чи інакше, лише те, що питання не особливо важливе. Ми можемо також обговорювати пробіли проти вкладок, поки ми на цьому. haha

— twiz

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 це дозволяє?

— користувач1876508

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. Кутовий дозволяє вам префіксувати його директиви за допомогою 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-додаток перевіряє HTML, тоді як останній не працює. Функціональність залишається тією ж. Для отримання додаткової інформації ви можете спробувати w3Validator.

— Абхішек Гахар
джерело

-2

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

Навіть ви можете використовувати кутові директиви нижче згаданими способами ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

— Король Радж
джерело