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

103

Недавно я просмотрел код веб-приложения, созданного с помощью angular, и обнаружил, что он был написан с ng-app="myModule"директивой, помещенной в <body>тег. Изучая angular, я видел только его использование в <html>теге, как рекомендовано в документации по angular здесь , здесь и в их учебнике .

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

Насколько я могу судить, во время выполнения нет разницы между приложениями с ng-appon <html>или <body>. Как я понимаю, ng-appобозначает корень углового приложения, поэтому размещение его на <body>сократят <head>из сферы угловых, но я не могу думать о каких - либо серьезных образом это будет влиять на вещи. Итак, мой вопрос: в чем техническая разница между размещением ng-appодного из этих тегов вместо другого?

angularjs

— Мэтт Дэвис
источник

Ответы:

144

Нет большой разницы куда ставить ng-app.

Если вы наденете его, у <body>вас будет меньшая область действия для AngularJS, которая немного быстрее.

Но я использовал ng-appна <html>для манипулирования <title>.

— Харалан Добрев
источник

Спасибо за ответ! По сути, это тот вывод, к которому я пришел, поэтому приятно слышать, что другие думают в том же духе. Меня интересует, почему это быстрее и насколько это может быть быстрее, можете ли вы объяснить это подробнее или у вас есть ссылки, которые могут это проиллюстрировать?

— MattDavis

Я действительно имею в виду немного быстрее. Это минимально. Просто меньший объем означает меньшее количество элементов, в которых AngularJS искать директивы. Если у вас есть тонна метаэлементов, например, для Open Graph, это может иметь небольшое влияние.

— Харалан Добрев

заглавие. это настоящая причина.

— ahnbizcad

Я бы просто использовал простой javascript, чтобы изменить заголовок.

— Sean_A91 03

@ Sean_A91, однако, если у вас есть вся страница, управляемая AngularJS, для этого имеет смысл использовать Angular. Он более согласован, что увеличивает ремонтопригодность, и вы также можете повторно использовать модель заголовка в теле страницы.

— Харалан Добрев,

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

Мы обнаружили это во время работы над приложением, которое сильно полагалось на jqGrid и Dojo.

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

— Питер Дриннан
источник

Это хороший пример того, где я различаю три варианта использования Angular: «одностраничное приложение», «автономное» (т.е. занимает страницу, но использует обычные ссылки на другие страницы) и «миксин» (т.е. страница). Вы точно описали использование миксина, и в этом случае полностью согласованное ng-app должно быть только в том div, где применяется миксин. Однако для автономного использования или использования SPA, я думаю, он должен быть в <html>.

— fool4jesus 05

@ fool4jesus Знаете ли вы статьи о различных вариантах использования Angular? Конечно, есть масса рекомендуемых версий SPA, но недавно мне пришлось добавить Angular в кодовую базу, насыщенную jQuery, и мне было интересно, какой здесь лучший вариант, чтобы использовать ее с успехом и не сходить с ума.

— Senthe,

Это может быть непросто, @Senthe. Как вы без сомнения обнаружили, angular любит отвечать за собственный DOMain. Я думаю, что дело не столько в перекрытии областей страницы, сколько в контроле над этой областью. То есть вы все еще можете использовать jquery в областях angular, но начните с кода angular - это непросто, когда страница уже существует! Другими словами, это не вызовы jquery, которые должны выполняться, поскольку содержимое между тегами <script> должно перемещаться в угловые конструкции - контроллеры и директивы. Это имеет какое-либо значение?

— fool4jesus

AngularJS загрузит первое найденное ng-приложение! Вот и все. Если у вас более одного ng-app, оно обработает только первое. Если вы хотите загрузить любой другой элемент, используйте angular.bootstrap ()

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

angular.module("module_name", [])

Модуль определяет, как будет загружаться angular, потому что у нас нет метода main () в отличие от других языков программирования. Если значение ng-app пусто, то по умолчанию используется «ng», модуль по умолчанию.

Было сказано, что это немного быстрее, потому что angular будет обрабатывать все элементы внутри элемента, в котором было ng-app. Но я немного сомневаюсь, что расстанемся, потому что разница будет почти незаметна, если только у вас не очень-очень громоздкий DOM.

Если вам нужны примеры здесь: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Нойпи Гилас
источник