Colocación de la directiva ng-app (html vs body)

103

Recientemente revisé el código de una aplicación web construida con angular y descubrí que estaba escrito con la ng-app="myModule"directiva colocada en la <body>etiqueta. Al aprender angular, solo lo he visto usar en la <html>etiqueta, como lo recomiendan los documentos angulares aquí , aquí y en su tutorial .

He explorado esto un poco por mi cuenta y encontré SO preguntas, en particular esta y de manera similar esta , que discuten la carga de varios módulos para una página. Sin embargo, esta técnica es diferente a mi caso, ya que implica colocar ng-app en elementos dentro del cuerpo y usar bootstrapping manual para ejecutar dos aplicaciones angulares al mismo tiempo.

Por lo que yo puedo decir, no hay ninguna diferencia en tiempo de ejecución entre una aplicación con ng-appel <html>o <body>. Según tengo entendido, ng-appdesigna la raíz de una aplicación angular, por lo que su colocación en el <body>corte quedaría <head>fuera del alcance de angular, pero no puedo pensar en ninguna forma importante en que esto afectaría las cosas. Entonces, mi pregunta es: ¿Cuál es la diferencia técnica entre colocar ng-appuna de estas etiquetas en lugar de la otra?

angularjs

— MattDavis
fuente

Respuestas:

144

No hay gran diferencia donde lo pongas ng-app.

Si lo pone, <body>tiene un alcance más pequeño para AngularJS, que es un poco más rápido.

Pero he utilizado ng-appen el <html>de la manipulación de la <title>.

— Haralan Dobrev
fuente

¡Gracias por la respuesta! Esta es básicamente la conclusión a la que llegué, por lo que es bueno escuchar que otros piensan en la misma línea. Me interesa exactamente por qué es más rápido y cuánto más rápido podría ser, ¿puede explicar eso más o tiene alguna referencia que pueda ilustrar esto?

— MattDavis

Realmente me refiero a un poco más rápido. Es mínimo. Un alcance más pequeño significa menos elementos en los que AngularJS buscar directivas. Si tiene una tonelada de metaelementos para Open Graph, por ejemplo, podría tener un pequeño impacto.

— Haralan Dobrev

título. esa es la verdadera razón.

— ahnbizcad

Solo usaría javascript simple para cambiar el título.

— Sean_A91

@ Sean_A91 si, sin embargo, tiene toda la página dirigida por AngularJS, tiene más sentido usar Angular para eso. Es más consistente, lo que aumenta la capacidad de mantenimiento y también puede reutilizar el modelo de título en el cuerpo de la página.

— Haralan Dobrev

Estaba en un equipo que trabajaba en una aplicación heredada y descubrí que era mejor usar la etiqueta ng-app en un div que se usa como contenedor para aislar el nuevo código del código heredado.

Descubrimos esto mientras trabajábamos en la aplicación que dependía en gran medida de jqGrid y Dojo.

Cuando agregamos ng-app a la etiqueta head, hizo explotar el sitio, pero cuando usamos un contenedor, pudimos usar Angular sin problemas.

— Peter Drinnan
fuente

Este es un buen ejemplo de donde puedo diferenciar entre tres casos de uso para Angular: "aplicación de una sola página", "independiente" (es decir, toma el control de la página pero usa enlaces normales a otras páginas) y "mixin" (es decir, solo un poco en la página). Ha descrito exactamente el uso de mixin y, en ese caso, ng-app totalmente acordado debería estar solo en el div donde se aplica el mixin. Sin embargo, para usos independientes o SPA, creo que debería estar en <html>.

— fool4jesus

@ fool4jesus ¿Conoce algún artículo sobre diferentes opciones de uso de Angular? Por supuesto, hay un montón sobre la versión SPA recomendada, pero recientemente tuve que agregar Angular a la base de código pesada de jQuery y me preguntaba cuál es la mejor opción aquí para usarla con éxito y no volverme loco.

— Senthe

Eso puede ser complicado @Senthe. Como sin duda habrá descubierto, a angular le gusta estar a cargo de su propio DOMINIO. Creo que se trata menos de superponer áreas de la página y más sobre el control de esa área. Es decir, aún puede usar jquery en las áreas angulares, pero comience con el código angular, ¡no es fácil cuando la página ya existe! En otras palabras, no son las llamadas de jquery las que tienen que irse, sino que las cosas entre las etiquetas <script> tienen que moverse hacia construcciones angulares: controladores y directivas. ¿Eso tiene algún sentido?

— fool4jesus

¡AngularJS arrancará la primera aplicación ng que encuentre! Eso es. Si tiene más de una ng-app, solo procesará la primera. Si desea arrancar cualquier otro elemento, use angular.bootstrap ()

El valor del atributo ng-app es un módulo que se ha creado usando:

angular.module("module_name", [])

Un módulo define cuán angular se iniciará porque no tenemos un método main () a diferencia de otros lenguajes de programación. Si el valor de ng-app está vacío, por defecto usa 'ng', el módulo predeterminado.

Se dijo que era un poco más rápido porque angular procesará todos los elementos dentro del elemento donde estaba ng-app. Pero dudo ligeramente en parte porque la diferencia apenas se notará, a menos que tenga un DOM muy voluminoso.

Si quieres ejemplos aquí: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Noypi Gilas
fuente