Colocação da diretiva ng-app (html vs body)

103

Recentemente, revisei o código de um webapp construído com angular e descobri que foi escrito com a ng-app="myModule"diretiva colocada na <body>tag. Quando aprendi angular, eu só o vi usado na <html>tag, conforme recomendado pelos documentos do angular aqui , aqui e em seu tutorial .

Eu explorei isso um pouco por conta própria e encontrei perguntas do SO, notavelmente esta e da mesma forma esta , que discute o carregamento de vários módulos para uma página. No entanto, essa técnica é diferente do meu caso, pois envolve colocar o ng-app em elementos dentro do corpo e usar bootstrap manual para executar dois aplicativos angulares ao mesmo tempo.

Tanto quanto eu posso dizer, não há diferença no tempo de execução entre um aplicativo com ng-appon <html>ou <body>. Pelo que entendi, ng-appdesigna a raiz de um aplicativo angular, portanto, sua colocação no <body>cortaria <head>fora do escopo do angular, mas não consigo pensar em nenhuma maneira importante de como isso afetaria as coisas. Portanto, minha pergunta é: Quais são as diferenças técnicas entre colocar ng-appem uma dessas tags em vez da outra?

angularjs

— MattDavis
fonte

Respostas:

144

Não há grande diferença onde você coloca ng-app.

Se você colocá- <body>lo, terá um escopo menor para o AngularJS, que é um pouco mais rápido.

Mas eu usei ng-appno <html>para manipular o <title>.

— Haralan Dobrev
fonte

Obrigado pela resposta! Essa é basicamente a conclusão a que cheguei, então é bom saber que outras pessoas estão pensando da mesma forma. Estou interessado em saber exatamente por que é mais rápido e quão mais rápido poderia ser, você pode explicar melhor ou você tem alguma referência que possa ilustrar isso?

— MattDavis

Eu realmente quero dizer um pouco mais rápido. É mínimo. Apenas um escopo menor significa menos elementos nos quais o AngularJS deve procurar por diretivas. Se você tem uma tonelada de metaelementos para Open Graph, por exemplo, pode ter um pequeno impacto.

— Haralan Dobrev

título. esse é o verdadeiro motivo.

— ahnbizcad de

Gostaria apenas de usar javascript simples para alterar o título.

— Sean_A91

@ Sean_A91, entretanto, se você tem toda a página executada pelo AngularJS, faz mais sentido usar o Angular para isso. É mais consistente, o que aumenta a capacidade de manutenção e você também pode reutilizar o modelo de título no corpo da página.

— Haralan Dobrev

Eu estava em uma equipe que trabalhava em um aplicativo legado e achei melhor usar a tag ng-app em um div que é usado como um wrapper para isolar o novo código do código legado.

Descobrimos isso ao trabalhar no aplicativo que dependia muito do jqGrid e do Dojo.

Quando adicionamos ng-app à tag head, o site explodiu, mas quando usamos um wrapper pudemos usar o Angular sem problemas.

— Peter Drinnan
fonte

Este é um bom exemplo de onde eu diferencio entre três casos de uso para Angular: "aplicativo de página única", "autônomo" (ou seja, assume o controle da página, mas usa links normais para outras páginas) e "mixin" (ou seja, apenas um pouco em a página). Você descreveu exatamente o uso do mixin e, nesse caso, o ng-app totalmente aceito deve ser apenas no div onde o mixin se aplica. No entanto, para uso autônomo ou SPA, acho que deveria estar no <html>.

— silly4jesus

@ fool4jesus Por acaso você conhece algum artigo sobre as diferentes opções de uso do Angular? Claro que há uma tonelada sobre a versão SPA recomendada, mas recentemente eu tive que adicionar Angular à base de código jQuery pesada e queria saber qual é a melhor opção aqui para usá-lo com sucesso e não enlouquecer.

— Senthe

Isso pode ser complicado @Senthe. Como você já descobriu, o angular gosta de estar no comando de seu próprio DOMain. Acho que se trata menos de sobrepor áreas da página e mais de controle dessa área. Ou seja, você ainda pode usar o jquery nas áreas angulares, mas comece com o código angular - não é fácil quando a página já existe! Em outras palavras, não são as chamadas jquery que precisam ser eliminadas, tanto quanto o material entre as tags <script> tem que se mover para construções angulares - controladores e diretivas. Isso faz algum sentido?

— silly4jesus

O AngularJS inicializará o primeiro ng-app que encontrar! É isso aí. Se você tiver mais de um ng-app, ele processará apenas o primeiro. Se você quiser inicializar qualquer outro elemento, use angular.bootstrap ()

O valor do atributo ng-app é um módulo que foi criado usando:

angular.module("module_name", [])

Um módulo define como o angular será inicializado porque não temos um método main () diferente de outras linguagens de programação. Se o valor de ng-app estiver vazio, o padrão é usar 'ng', o módulo padrão.

Foi dito que era um pouco mais rápido porque o angular processará todos os elementos dentro do elemento onde o ng-app estava. Mas eu duvido um pouco porque a diferença dificilmente será notada, a menos que você tenha um DOM muito volumoso.

Se você quiser exemplos aqui: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Noypi Gilas
fonte