Placement de la directive ng-app (html vs body)

103

J'ai récemment examiné le code d'une application Web construite avec angular et j'ai trouvé qu'elle avait été écrite avec la ng-app="myModule"directive placée sur l' <body>étiquette. Lors de l'apprentissage d'angular, je ne l'ai jamais vu utilisé que sur l' <html>étiquette, comme recommandé par les documents angular ici , ici et dans leur tutoriel .

J'ai exploré cela un peu par moi-même et j'ai trouvé des questions SO, notamment celle-ci et de même celle-ci , qui traitent du chargement de plusieurs modules pour une page. Cependant, cette technique est différente de mon cas, car elle implique de placer ng-app sur des éléments dans le corps et d'utiliser le bootstrap manuel pour exécuter deux applications angulaires en même temps.

Pour autant que je sache, il n'y a aucune différence au moment de l'exécution entre une application avec ng-appon <html>ou <body>. Si je comprends bien, ng-appdésigne la racine d'une application angulaire, donc le placement de celle-ci sur le champ <body>serait coupé <head>de la portée angulaire, mais je ne peux pas penser à une manière majeure que cela affecte les choses. Ma question est donc la suivante: quelle est la différence technique entre placer ng-appsur l'une de ces balises au lieu de l'autre?

angularjs

— MattDavis
source

Réponses:

144

Il n'y a pas de grande différence où vous mettez ng-app.

Si vous le mettez, <body>vous avez une portée plus petite pour AngularJS qui est légèrement plus rapide.

Mais j'ai utilisé ng-apple <html>pour manipuler le fichier <title>.

— Haralan Dobrev
source

Merci d'avoir répondu! C'est essentiellement la conclusion à laquelle je suis arrivé, il est donc bon d'entendre que d'autres pensent dans le même sens. Je suis intéressé par exactement pourquoi c'est plus rapide et combien cela pourrait être plus rapide, pouvez-vous expliquer cela plus ou avez-vous des références qui peuvent illustrer cela?

— MattDavis

Je veux dire vraiment un peu plus vite. C'est minime. Une portée plus petite signifie moins d'éléments dans lesquels AngularJS doit rechercher des directives. Si vous avez une tonne de méta-éléments pour Open Graph par exemple, cela pourrait avoir un petit impact.

— Haralan Dobrev

Titre. c'est la vraie raison.

— ahnbizcad

J'utiliserais simplement du javascript pour changer le titre.

— Sean_A91

@ Sean_A91 si vous avez cependant la page entière exécutée par AngularJS, il est plus logique d'utiliser Angular pour cela. C'est plus cohérent, ce qui augmente la maintenabilité et vous pouvez également réutiliser le modèle de titre dans le corps de la page.

— Haralan Dobrev

Je faisais partie d'une équipe travaillant sur une application héritée et j'ai trouvé préférable d'utiliser la balise ng-app dans un div qui est utilisé comme wrapper pour isoler le nouveau code du code hérité.

Nous avons découvert cela en travaillant sur l'application qui reposait fortement sur jqGrid et Dojo.

Lorsque nous avons ajouté ng-app à la balise head, le site a explosé, mais lorsque nous avons utilisé un wrapper, nous pouvions utiliser Angular sans problème.

— Peter Drinnan
source

Ceci est un bon exemple où je différencie trois cas d'utilisation pour Angular: "application d'une seule page", "autonome" (c'est-à-dire prend le contrôle de la page mais utilise des liens normaux vers d'autres pages) et "mixin" (c'est-à-dire juste un petit peu sur la page). Vous avez décrit exactement l'utilisation de mixin et dans ce cas, ng-app totalement accepté ne devrait être que sur le div où le mixin s'applique. Cependant, pour les utilisations autonomes ou SPA, je pense que cela devrait être sur le <html>.

— fool4jesus

@ fool4jesus Connaissez-vous des articles sur les différentes options d'utilisation d'Angular? Bien sûr, il y a une tonne de versions de SPA recommandées, mais récemment, j'ai dû ajouter Angular à la base de code jQuery-lourde et je me demandais quelle est la meilleure option ici pour l'utiliser avec succès et ne pas devenir fou.

— Senthe le

Cela peut être délicat @Senthe. Comme vous l'avez sans doute découvert, angular aime être en charge de son propre DOMain. Je pense qu'il s'agit moins de chevauchements de zones de la page que de contrôle de cette zone. Autrement dit, vous pouvez toujours utiliser la jquery dans les zones angulaires, mais commencez par le code angulaire - pas facile lorsque la page existe déjà! En d'autres termes, ce ne sont pas les appels jquery qui doivent disparaître, autant que les éléments entre les balises <script> doivent se déplacer dans des constructions angulaires - contrôleurs et directives. Cela a-t-il un sens?

— fool4jesus

AngularJS démarrera la première ng-app qu'il trouve! C'est tout. Si vous possédez plusieurs ng-app, il ne traitera que la première. Si vous souhaitez amorcer un autre élément, utilisez angular.bootstrap ()

La valeur de l'attribut ng-app est un module qui a été créé à l'aide de:

angular.module("module_name", [])

Un module définit comment angular va démarrer car nous n'avons pas de méthode main () contrairement aux autres langages de programmation. Si la valeur de ng-app est vide, il utilise par défaut 'ng', le module par défaut.

On dit qu'il est légèrement plus rapide car angular traitera tous les éléments à l'intérieur de l'élément où se trouvait ng-app. Mais je doute un peu en partie car la différence sera à peine perceptible, à moins que vous n'ayez un DOM très très volumineux.

Si vous voulez des exemples ici: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Noypi Gilas
source