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?
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?
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.
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??
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.
Imagem para entender melhor todo esse ciclo:
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()
.