¿Cómo funciona exactamente el AngularJS Digest Loop?
Soy nuevo en AngularJS y lo estoy estudiando en un tutorial. Tengo algunas dudas sobre el concepto relacionado con elBucle digestivo proporcionado por Angular.
Mi aplicación está compuesta por estos 2 archivos:
1)index.html:
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="mainController">
<div>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</div>
<hr />
<h1>twitter.com/{{ lowercasehandle() }}</h1>
</div>
</div>
</body>
</html>
2)app.js:
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {
// Variable that is bound to the input into the view handled by the 'mainController' controller:
$scope.handle = '';
// This variable is a function putted into the $scope and contain the lowecase content of the handle variable:
$scope.lowercasehandle = function() {
return $filter('lowercase')($scope.handle);
};
// I explicitly declare a whatche on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch('handle', function(newValue, oldValue) {
console.info('Changed!');
console.log('Old:' + oldValue);
console.log('New:' + newValue);
});
$timeout(function() {
$scope.handle = 'newtwitterhandle';
console.log('Scope changed!');
}, 3000);
}]);
Por lo que entiendo, elhandle La variable se declara en el ámbito angular, por:
$scope.handle = '';
y se vincula automáticamente a un objeto de vista específico como se declara en esta sección del DOM deindex.html:
<div>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</div>
Entonces, cualquier cambio que ocurra en estoentrada objeto implica un cambio de lahandle propiedad en el$ alcance y viceversa.
Entiendo que con Angular, no tengo que agregar manualmente un JavaScript clásico de vainillaEventListener (por eladdEventListener () en el objeto que quiero observar) pero Angular implementa esta característica para mí usando elDisgest Loop.
Entonces Angular (pero no estoy tan seguro) mantiene unlista de observadores en elContexto angular. En esta lista hay un objeto observador para cada elemento en el alcance que se ha incluido en la página (entrada, selección, etc.).
Entonces un observador contiene la información sobre elvalor antiguo y elnuevo valor del elemento relacionado y si el nuevo valor es diferente del valor anterior, Angular se actualiza automáticamente en el campo relacionado en el DOM.
Por lo que he entendido, el ciclo de resumen continuamente itera sobre estolista de observadores para verificar si el valor anterior de un observador específico es diferente del nuevo valor (si se cambia el valor del objeto observado).
Entonces, ¿qué significa exactamente? Ese Angular ejecuta continuamente un ciclo (algo así como unmientras) que comprueba continuamente si el valor de algún campo cambia? ¿Y si ocurre automáticamente realizar una operación específica?