Le Placement de la ng-app directive (html vs corps)

J'ai récemment revu le code pour une webapp construit angulaire et a constaté qu'il a été écrit avec la ng-app="myModule" directive placé sur le <body> tag. Lors de l'apprentissage angulaire, je ne l'ai jamais vu utilisé sur la <html> tag, comme recommandé par l'angle de docs ici, ici, et dans leur tutoriel.

J'ai exploré un peu sur mon propre et a trouvé TELLEMENT de questions, notamment cette une et de même cette une, que de discuter le chargement de plusieurs modules pour une page. Cependant, cette technique différente de mon cas, car il consiste à placer ng-app sur les éléments dans le corps et l'utilisation manuelle d'amorçage pour exécuter deux angulaire applications en même temps.

Aussi loin que je peux dire, il n'y a pas de différence lors de l'exécution entre une application avec ng-app sur <html> ou <body>. Comme je le comprends, ng-app désigne la racine de l'angulaire de l'application, de sorte que le placement de la <body> permettrait de réduire l' <head> de angulaire du champ d'application, mais je ne peux pas penser de tout façon cela aurait un impact sur les choses. Donc ma question est: Quelle est la différence technique entre la mise en place ng-app sur l'une de ces étiquettes à la place de l'autre?

InformationsquelleAutor MattDavis | 2013-04-03
  1. 144

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

    Si vous le mettez sur <body> alors vous avez un petit portée par AngularJS qui est légèrement plus rapide.

    Mais j'ai utilisé ng-app sur le <html> pour la manipulation de la <title>.

    • Merci pour la réponse! C'est en gros la conclusion que je venais de la, il est bon d'entendre que les autres pensent de la même manière. Je suis intéressé par exactement pourquoi il est plus rapide, et comment beaucoup plus rapide, il pourrait être, êtes-vous en mesure d'expliquer que plus ou avez-vous des références qui peuvent illustrer cela?
    • Je veux vraiment dire un peu le plus rapide. Il est minime. Juste moins signifie moins d'éléments dans lesquels AngularJS pour chercher des directives. Si vous avez une tonne d'éléments meta Open Graph pour exemple, il pourrait avoir un impact faible.
    • titre. c'est la vraie raison.
    • En aparté, en plaçant le ng-app dans le corps de la balise n'est pas conforme aux normes W3C MOINS, vous pouvez ajouter un élément personnalisé. Par exemple data-ng-app="MyModule".
    • Je voudrais juste utiliser du javascript pour modifier le titre.
    • si vous avez toutefois l'ensemble de la page gérée par AngularJS, il est plus logique d'utiliser Angulaire pour que. C'est plus cohérente, ce qui augmente la facilité de maintenance et il est possible de réutiliser le titre de modèle dans la page de corps aussi bien.

    InformationsquelleAutor Haralan Dobrev
  2. 21

    J'ai été sur une équipe travaillant sur une application héritée et trouvé qu'il est préférable d'utiliser le ng-app tag dans une div qui est utilisé comme un wrapper pour isoler nouveau code à partir de l'ancien code.

    Nous avons découvert cela tout en travaillant sur l'application qui a été fortement en s'appuyant sur jqGrid et Dojo.

    Lorsque nous avons ajouté ng-app pour la balise head, il a fait exploser le site, mais lorsque nous avons utilisé un wrapper nous pourrions utiliser Angulaire sans problèmes.

    • C'est un bon exemple de l'endroit où j'différencier les trois cas d'utilisation Angulaire: "single page application", "autonome" (c'est à dire qui prend le dessus de la page, mais utilise des liens vers d'autres pages), et "mixin" (c'est à dire juste un petit peu sur la page). Vous avez décrit exactement le mixin d'utilisation et dans ce cas, tout à fait d'accord ng-app devrait être seulement sur la div où le mixin s'applique. Cependant, pour gérer de façon autonome ou SPA usages, je pense qu'il devrait être sur le <html>.
    • Savez-vous que les articles sur les différentes options d'utilisation Angulaire? Bien sûr, il y a une tonne sur recommandé SPA version, mais récemment, j'ai dû ajouter Angulaire de jQuery-lourds de la base de code et je me demandais quelle est la meilleure option ici pour les utiliser avec succès et ne pas devenir fou.
    • Cela peut être une question délicate @Senthe. Comme vous l'avez découvert aucun doute, angulaire aime être en charge de son propre Domaine. Je pense que c'est de moins en moins sur les zones de chevauchement de la page et plus sur le contrôle de cette zone. Qui est, vous pouvez toujours utiliser le jquery dans l'angle de domaines, mais commencer avec l'angle de code - pas facile quand la page existe déjà! En d'autres termes, ce n'est pas le jquery, les appels qui ont à y aller, autant que les choses entre les <script> balises de se déplacer dans angulaire des constructions - les contrôleurs et les directives. Est-ce que cela a du sens?
    InformationsquelleAutor Peter Drinnan
  3. 4

    AngularJS aura pour effet de démarrer la première ng-app il trouve! C'est tout. Si vous avez plus d'un ng-app, il ne traite que la première. Si vous voulez amorcer n'importe quel autre élément angulaire.bootstrap()

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

    angular.module("module_name", [])

    Un module définit comment angulaire sera démarré parce que nous n'avons pas de méthode main() contrairement à d'autres langages de programmation. Si ng-app de la valeur est vide, la valeur par défaut est d'utiliser "ng", le module par défaut.

    Il a été dit d'être un peu plus rapide car angulaire traitera tous les éléments à l'intérieur de l'élément où ng-app a été. Mais je doute légèrement en partie parce que la différence est à peine perceptible, à moins que vous avez une très très encombrant DOM.

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

    InformationsquelleAutor Noypi Gilas