4

No AngularJS, temos dois métodos que executam os $watchers sincronamente: $digest e $apply.

Eu gostaria de tirar umas dúvidas:

  • Qual é a diferença entre eles?

  • Quando devo usar um ou outro?

1
  • Essa pergunta é útil. Linkei ela em outra pergunta, para o assunto não ficar muito amplo e fora do foco da resposta. Commented 8/11/2018 às 15:47

1 Resposta 1

7

Olá, vou tentar responder essa pergunta usando os conceitos apresentados no livro: AngularJS Up & Running(Shyam Seshadri & Brad Green) e na própria documentação do AngularJS encontrada aqui.

AngularJS LifeCycle


Primeiramente precisamos entender o que acontece em uma aplicação angularjs quando a mesma é iniciada.

Vamos abstrair toda a parte que navegador ler o que está escrito, assets, html em sua página e vamos pular direto pra parte onde é disparado o evento document.ready onde, em uma inicialização não manual, o angularjs irá buscar através da DOM a diretiva ng-app, ou utilizando o angular.bootstrap, é especificado manualmente onde a(s) aplicação(ões) irá(ão) executar.

Após encontrar o ng-app, o angularjs irá iniciar sua "mágica" que é o passo onde o que está no contexto atual é compilado, nesse processo o código definido nas diretivas encontradas é executado, e no final de cada execução é gerado a função link das respectivas diretivas.

Com as funções link geradas o angularjs as combina com o nosso conhecido escopo, no qual contem as variáveis e conteúdos que é preciso pra gerar nossa UI, com a combinação é gerado a view, que é o que o usuário irá ver e interagir. Nesse passo também é instanciado o escopo de cada controller e subcontroller, e agora que entra a parte que queremos... "É ele que a gente quer...", aqui é onde aparece os nossos amigos: watcher e listener, o angularjs irá criar um para cada diretiva que ele encontrou e compilou, assim o nosso querido framework sabe onde encontrar cada coisa e que dado vincular à aquela diretiva.

Beleza, até ai tudo bem... Mas como ele atualiza tudo dinamicamente??

The Digest Cycle


Bom para manter tudo atualizado o angularjs usa uma estratégia bem inteligente. Como sabemos o model da aplicação não atualiza randomicamente, ele irá mudar em resposta a eventos (requisições, cliques, focos...), logo o angularjs adicionar watchers a todos binds e ng-models e o mesmo pode verificar se os valores contidos naquele escopo difere do que está na UI, e assim pode atualizá-la,

Mas ele não fica em um loop verificando a cada segundo se está tudo atualizado.

Provavelmente qualquer pessoa "normal" se inclinaria para essa ideia, porém obviamente isso é bastante ineficiente.

Como foi falado, o nosso model não atualiza randomicamente, porém há certas ações que provavelmente irão modificar ele, logo cada ng-model que pode mudar tem o seu respectivo watcher e sempre que um evento é disparado o angularjs verifica os watchers e bidings procurando por alterações e fazendo as devidas atualizações necessárias, e essa operação é chamada de

Digest Cyle.

O digest cycle é o que mantém a UI da nossa aplicação atualizada, e o trabalho que ele faz pode ser explicado nos seguintes passos:

  • Sempre que um evento que pode mudar o model dispara, o angularjs executa o digest cycle.

  • O digest cycle começa pelo $rootScope e vai verificando cada escopo procurando se existe alguma diference com o que está na UI.

  • Se estiver tudo ok no escopo atual ele vai recursivamente até o seu escopo pai verificando todos adjacentes até o fim.

  • Se por acaso o AngularJs verificar que um watcher reportou uma diferença ele é reiniciado.

  • Ele reinicia pois uma alteração pode modificar um o estado de um watcher previamente verificado, e assim desencadear varias outras, ele somente para quando todos os watchers não reportarem modificação.

Para prevenir um loop infinito o angularjs reinicia o digest apenas 10 vezes.

  • Todas as atualizações da UI são acumuladas e assim que o ciclo é estabilizado, todas as atualizações são aplicadas.

Imagem para entender melhor todo esse ciclo:

AngularJS Digest Cycle

FONTE: https://stackoverflow.com/questions/50594246/is-there-a-config-option-to-lower-the-amount-of-angularjs-1-x-digest-cycles

$scope.$apply() e $scope.$digest()

A similaridade entre estes dois métodos é basicamente chamar o que foi explicado anteriormente, o digest cycle, a diferença entre eles está baseada nos escopos.

Enquanto o $scope.$apply() força a execução do digest cycle direto do $rootScope (Basicamente toda a aplicação atual) o $scope.$digest() força a execução do digest apenas em o escopo atual.

Com isso em mente é possível imaginar em quais casos é bom ou não utilizar o $scope.$apply() e $scope.$digest(), a dica é: Em certos casos não precisamos verificar todos os watchers de nossa aplicação, apenas o escopo atual.

É preciso tomar cuidado ao utilizar componentes de terceiros que utilizam um life cycle diferente da sua aplicação, e nesse caso o mais indicado é utilizar o $scope.$apply() pois a atualização deve ser feita através do $rootScope, e não apenas no escopo atual com o $scope.$digest().

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .