Розміщення директиви ng-app (html vs body)


103

Нещодавно я переглянув код для веб-сторінки, побудованої з кутовим і виявив, що він написаний з ng-app="myModule"директивою, розміщеною на <body>тегу. Під час навчання кутових я бачив лише те, що він використовується на <html>тезі, як рекомендують кутові документи тут , тут та в їх навчальному посібнику .

Я трохи вивчив це самостійно і знайшов такі питання, зокрема це, а також подібне , що обговорюють завантаження декількох модулів на сторінку. Однак ця методика відрізняється від мого випадку, оскільки передбачає розміщення ng-додатків на елементах всередині тіла та використання ручного завантаження для запуску двох кутових додатків одночасно.

Наскільки я можу сказати, що немає ніякої різниці під час виконання між додатком з ng-appна <html>чи <body>. Як я розумію, ng-appпозначає корінь кутового додатка, тому розміщення його на магістралі <body>буде вирізане<head> кут, але я не можу придумати жодного основного способу, який би це вплинуло на речі. Отже, моє запитання: в чому полягає технічна різниця між розміщенням ng-appна одному з цих тегів замість іншого?

Відповіді:


144

Немає великої різниці, куди ти кладеш ng-app .

Якщо ви поставите його, <body>то у вас буде менший обсяг для AngularJS, який трохи швидший.

Але я використовував ng-appна <html>для маніпулювання <title>.


Дякую за відповідь! Це в основному висновок, до якого я б дійшов, тому добре чути, що інші думають за тими самими принципами. Мене цікавить саме, чому це швидше і наскільки швидше це могло бути, чи можете ви пояснити, що більше чи у вас є посилання, які це можуть проілюструвати?
MattDavis

10
Я справді маю на увазі трохи швидше. Він мінімальний. Просто менший обсяг означає менше елементів, в яких AngularJS шукати директиви. Якщо у вас є, наприклад, мета металевих елементів для Open Graph, це може мати незначний вплив.
Харалан Добрев

12
назва. це справжня причина.
ahnbizcad

2
Я б просто використовувати звичайний javascript, щоб змінити назву.
Sean_A91

3
@ Sean_A91, якщо у вас є ціла сторінка, якою керує AngularJS, то для цього має сенс використовувати Angular. Це більш послідовно, що збільшує ремонтопридатність, і ви можете повторно використовувати назву моделі в тілі сторінки.
Харалан Добрев

21

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

Ми виявили це під час роботи над додатком, який сильно покладався на jqGrid та Dojo.

Коли ми додали ng-додаток до тегу head, він підірвав сайт, але коли ми використовували обгортку, ми могли без проблем використовувати Angular.


14
Це хороший приклад, коли я розмежовую три випадки використання для Angular: "додаток для однієї сторінки", "окремий" (тобто займає сторінку, але використовує звичайні посилання на інші сторінки) і "mixin" (тобто лише невеликий шматочок на сторінки). Ви точно описали використання mixin, і в цьому випадку повністю узгоджена ng-програма повинна бути лише на діві, де застосовується міксин. Однак, для окремих або SPA-режимів, я думаю, це має бути на <html>.
crazy4jesus

@ Buda4jesus Чи знаєте ви які-небудь статті про різні варіанти використання для Angular? Звичайно, є багато про рекомендовану версію SPA, але нещодавно мені довелося додати Angular до jQuery-важкої кодової бази, і мені було цікаво, що тут найкращий варіант, щоб використовувати його з успіхом, а не зійти з розуму.
Сенте

Це може бути хитрому @Senthe. Як ви виявили, без сумніву, кутовий любить відповідати за свій власний DOMain. Я думаю, що це менше про перекриття областей сторінки, а більше про контроль над цією областю. Тобто ви ще можете використовувати jquery у кутових областях, але почніть з кутового коду - непросто, коли сторінка вже існує! Іншими словами, це не виклики jquery, які повинні йти, стільки, як вміст між тегами <script> повинен переходити в кутові конструкції - контролери та директиви. Це має сенс?
crazy4jesus

4

AngularJS запустить перший ng-додаток, який він знайде! Це воно. Якщо у вас є більше ng-додатків, він обробить лише перший. Якщо ви хочете завантажувати будь-який інший елемент, використовуйте angular.bootstrap ()

Значення атрибута ng-app - це модуль, створений за допомогою:

angular.module("module_name", [])

Модуль визначає, як буде кутовий завантажуватися, оскільки у нас немає головного () методу на відміну від інших мов програмування. Якщо значення ng-app порожнє, воно за замовчуванням використовує 'ng', модуль за замовчуванням.

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

Якщо ви хочете приклади тут: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.