AngularJS em HEAD vs BODY

Em todos os exemplos do AngularJS, a biblioteca Angular é colocada nas tags HEAD do documento. Eu tenho um projeto existente que foi criado no layout HTML5 Boilerplate. Isso define que as bibliotecas JS devem ser colocadas na parte inferior do DOM antes da tag .

O AngularJS precisa ser colocado no HEAD?

O AngularJS não precisa ser colocado no HEAD, e na verdade você normalmente não deveria, já que isso iria bloquear o carregamento do HTML.

Entretanto, quando você carregar o AngularJS na parte inferior da página, você precisará usar ng-cloak ou ng-bind para evitar o “flash de conteúdo não compilado”. Note que você só precisa usar o ng-cloak / ng-bind em sua página “index.html”. Quando ng-include ou ng-view ou outras construções angulares são usadas para extrair conteúdo adicional após o carregamento inicial da página, esse conteúdo será compilado pelo Angular antes de ser exibido.

Veja também https://stackoverflow.com/a/14076004/215945

Essa resposta no Google Groups me deu uma visão perfeita (encurtada):

Isso realmente depende do conteúdo da sua página de destino. Se a maior parte é estática com apenas algumas ligações AngularJS do que sim, eu concordo, a parte inferior da página é a melhor. Mas, no caso de um conteúdo totalmente dynamic, você gostaria de carregar o AngularJS ASAP [na cabeça].

Portanto, se seu conteúdo for gerado em grande parte por meio do Angular, você poderá salvar as diretivas extras de CSS e ng-cloak incluindo apenas Angular na cabeça.

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

Não necessariamente.

Por favor, dê uma olhada neste http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview . Onde o js angular é colocado na parte inferior da página, e ainda renderiza a mesma saída se ela for colocada no topo.

Carregar o Angular JS na parte inferior da página resulta em um flash de {{algo}} html feio. Usar a diretiva ng-cloak na tag body cria um flash vazio até que o JS seja carregado, por isso não agrega nenhum benefício sobre o carregamento do AngularJS no elemento head. Você pode adicionar ng-cloak a todos os elementos com ng diretivas, mas acabará com um flash de elementos vazios. Soooo, basta carregar Angular e seus arquivos app.js no elemento head como a documentação Angular recomenda nesta citação de sua documentação: “Para obter o melhor resultado, o script angular.js deve ser carregado na seção head do documento html”