Umieszczenie dyrektywy ng-app (html vs body)

103

Niedawno przejrzałem kod aplikacji internetowej zbudowanej za pomocą angular i odkryłem, że został napisany z ng-app="myModule"dyrektywą umieszczoną w <body>tagu. Kiedy uczyłem się angular, widziałem go tylko na <html>tagu, zgodnie z zaleceniami dokumentacji kątowej tutaj , tutaj oraz w ich samouczku .

Mam zbadać to trochę na własną rękę i znalazłem tak pytania, szczególnie ten jeden i podobnie ten jeden , które omawiają ładowanie wielu modułów na stronie. Jednak ta technika różni się od mojego przypadku, ponieważ polega na umieszczeniu ng-app na elementach w ciele i użyciu ręcznego ładowania początkowego, aby uruchomić dwie aplikacje kątowe w tym samym czasie.

O ile mi wiadomo, nie ma żadnej różnicy między czasie wykonywania aplikacji z ng-appna <html>lub <body>. Jak rozumiem, ng-appoznacza korzeń kątowym aplikacji, więc umieszczenie go na <body>obniżyłby <head>z zakresu kątowego, ale nie mogę myśleć o jakiejkolwiek poważnej sposób ten wpłynąłby rzeczy. Więc moje pytanie brzmi: jaka jest różnica techniczna między umieszczeniem ng-appna jednym z tych tagów zamiast na drugim?

angularjs MattDavis
źródło

Odpowiedzi:

144

Nie ma dużej różnicy, gdzie umieścisz ng-app.

Jeśli go <body>założysz, masz mniejszy teleskop AngularJS, który jest nieco szybszy.

Ale użyłem ng-appna <html>do manipulowania <title>.

Haralan Dobrev
źródło
Dziękuję za odpowiedź! To jest w zasadzie wniosek, do którego doszedłem, więc dobrze jest usłyszeć, że inni myślą w ten sam sposób. Interesuje mnie dokładnie, dlaczego jest szybszy i o ile szybszy może być, czy jesteś w stanie to wyjaśnić więcej lub czy masz jakieś odniesienia, które mogą to zilustrować?
MattDavis
10
Naprawdę mam na myśli trochę szybciej. To jest minimalne. Tylko mniejszy zakres oznacza mniej elementów, w których AngularJS szuka dyrektyw. Jeśli masz mnóstwo elementów meta dla Open Graph, na przykład, może to mieć niewielki wpływ.
Haralan Dobrev
12
tytuł. to jest prawdziwy powód.
ahnbizcad
2
Chciałbym po prostu użyć zwykłego javascript, aby zmienić tytuł.
Sean_A91
3
@ Sean_A91, jeśli jednak cała strona jest prowadzona przez AngularJS, bardziej sensowne jest użycie do tego Angulara. Jest bardziej spójny, co zwiększa łatwość konserwacji i możesz ponownie użyć modelu tytułowego również w treści strony.
Haralan Dobrev
21

Byłem w zespole pracującym nad starszą aplikacją i stwierdziłem, że najlepiej jest użyć tagu ng-app w elemencie div, który jest używany jako opakowanie do oddzielenia nowego kodu od starszego kodu.

Odkryliśmy to podczas pracy nad aplikacją, która w dużym stopniu opierała się na jqGrid i Dojo.

Kiedy dodaliśmy ng-app do tagu head, wysadziliśmy w powietrze stronę, ale kiedy użyliśmy wrappera, mogliśmy używać Angulara bez żadnych problemów.

Peter Drinnan
źródło
14
To jest dobry przykład, w którym rozróżniam trzy przypadki użycia Angulara: „aplikacja na jedną stronę”, „samodzielna” (tj. Przejmuje stronę, ale używa normalnych linków do innych stron) i „mieszanie” (czyli tylko trochę Strona). Dokładnie opisałeś użycie miksera iw takim przypadku całkowicie uzgodniona aplikacja ng-app powinna znajdować się tylko na div, w którym ma zastosowanie mixin. Jednak w przypadku zastosowań samodzielnych lub SPA myślę, że powinno to być w <html>.
fool4jesus
@ fool4jesus Czy znasz jakieś artykuły na temat różnych opcji użycia Angulara? Oczywiście jest mnóstwo na temat zalecanej wersji SPA, ale ostatnio musiałem dodać Angulara do ciężkiego kodu jQuery i zastanawiałem się, jaka jest najlepsza opcja tutaj, aby z powodzeniem go używać i nie zwariować.
Senthe
To może być trudne @Senthe. Jak odkryłeś bez wątpienia, angular lubi być odpowiedzialny za własną DOMainę. Myślę, że mniej chodzi o nakładanie się obszarów strony, a bardziej o kontrolę nad tym obszarem. Oznacza to, że nadal możesz używać jQuery w obszarach kątowych, ale zacznij od kodu kątowego - nie jest to łatwe, gdy strona już istnieje! Innymi słowy, to nie wywołania jquery muszą zostać usunięte, a zawartość między tagami <script> musi zostać przeniesiona do konstrukcji kątowych - kontrolerów i dyrektyw. Czy to ma sens?
fool4jesus
4

AngularJS załaduje pierwszą znalezioną aplikację ng! Otóż ​​to. Jeśli masz więcej niż jedną aplikację ng, przetworzy ona tylko pierwszą. Jeśli chcesz załadować dowolny inny element, użyj angular.bootstrap ()

Wartością atrybutu ng-app jest moduł, który został utworzony przy użyciu:

angular.module("module_name", [])

Moduł definiuje, w jaki sposób angular będzie ładowany, ponieważ nie mamy metody main () w przeciwieństwie do innych języków programowania. Jeśli wartość ng-app jest pusta, domyślnie używa „ng”, modułu domyślnego.

Mówiono, że jest nieco szybszy, ponieważ angular przetworzy wszystkie elementy wewnątrz elementu, w którym znajdowała się ng-app. Ale wątpię nieco, ponieważ różnica będzie ledwo zauważalna, chyba że masz bardzo, bardzo obszerny DOM.

Jeśli potrzebujesz przykładów tutaj: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

Noypi Gilas
źródło