Nous allons maintenant faire le point sur le fonctionnement interne d'AngularJS. Même si tout semble "magique" dans un premier temps, cette magie peut rapidement se retourner contre nous lors de cas particulier et on finit souvent par résoudre nos problèmes en appliquant de $scope.$apply() un peu partout dans notre code sans réellement comprendre pourquoi.
Les watchers : $watch()
Les watchers sont des composants qui permettent à angularJS de rafraichir le DOM lorsque des modifications sont détectées. Son rôle est relativement simple : comparer et indiquer lorsqu'une valeur change.
$scope.$watch('compteur', function(newValue, oldValue){
// Code à éxécuter lorsque $scope.compteur change
}); Ils peuvent être utilisé manuellement comme l'exemple ci-dessus, mais sont aussi utilisé lorsque vous utilisez des variables dans vos vues {{ compteur }} et dans certaines directives comme ng-class
$digest()
La problématique des watchers c'est qu'ils ne sont pas capable d'analyser en permanence les changements. C'est là que les $digest() interviennent. Lorsque qu'un $digest() est lancé sur un $scope il va déclencher tous les watchers qui vont alors vérifier si la valeur de leur propriété a changé. Ce $digest() est aussi transmis aux scope enfant du $scope sur lequel il a été lancé. Cette méthode n'est normalement jamais utilisée dans notre code, mais il est important de comprendre son fonctionnement pour appréhender le fonctionnement d'AngularJS.
$apply()
La fonction $apply() est la dernière pierre de l'édifice. Son rôle est plutôt simple, éxécuter un code et en informer les scopes des changements.
$scope.$apply(function(){
$scope.compteur += 1;
});Une fois le code à l'intérieur de la fonction éxécuté, la fonction $apply() fait appel au $rootScope.$digest() qui va alors lancer les watchers sur la totalité de l'application.
Cette fonction $apply() est appelée de manière automatique par les services d'angularJS tel que $http, $timeout et lors de l'utilisation des directives (ngClick, ngFocus...). On appellera manuellement un $apply lorsque l'on souhaite exécuter un code asynchrone en dehors du cadre du framework.
