starter start simple new example app angularjs html5boilerplate

start - AngularJS en HEAD frente a BODY



angularjs starter app (4)

En todos los ejemplos de AngularJS, la biblioteca angular se coloca en las etiquetas HEAD del documento. Tengo un proyecto existente que se ha basado en el diseño HTML5 Boilerplate. Esto define que las bibliotecas JS deben colocarse en la parte inferior del DOM antes de la etiqueta </BODY> .

¿AngularJS necesita colocarse en HEAD?

AngularJS no necesita ser colocado en HEAD, y en realidad normalmente no debería, ya que esto bloquearía la carga del HTML.

Sin embargo, cuando cargue AngularJS en la parte inferior de la página, necesitará usar ng-cloak o ng-bind para evitar el "destello del contenido no compilado". Tenga en cuenta que solo necesita usar ng-cloak / ng-bind en su página "index.html". Cuando ng-include o ng-view u otras construcciones angulares se utilizan para incorporar contenido adicional después de la carga de la página inicial, Angular compila ese contenido antes de que se muestre.

Ver también https://.com/a/14076004/215945

Cargando Angular JS en la parte inferior de la página resulta en un flash de feo {{something}} html. El uso de la directiva ng-cloak en la etiqueta del cuerpo crea un destello vacío hasta que se cargue el JS, por lo que no agrega ningún beneficio a la simple carga de AngularJS en el elemento principal. Puedes agregar ng-cloak a cada elemento con directivas ng pero terminarás con un destello de elementos vacíos. Así que solo cargue Angular y sus archivos app.js en el elemento principal ya que la documentación angular recomienda en esta cita de su documentación: "Para obtener el mejor resultado, la secuencia de comandos angular.js debe cargarse en la sección principal del documento html"

Esta única respuesta en Grupos de Google me dio una idea perfecta (abreviada):

Realmente depende del contenido de su página de destino. Si la mayor parte es estática con solo unos pocos enlaces AngularJS que sí, estoy de acuerdo, la parte inferior de la página es la mejor. Pero en el caso de un contenido totalmente dinámico, le gustaría cargar AngularJS lo antes posible [en la cabeza].

Por lo tanto, si su contenido se genera en gran parte a través de Angular, se ahorrará las directivas adicionales CSS y ng-cloak al incluir Angular en la cabeza.

https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ