Angular.js Into the digest loop Iftach Bar 

No content

We will learn - The magic behind data-binding - An inside look into the digest loop - $digest, $watch - Basic methods of scope 

Motivation HTML does not support data-binding 

Motivation HTML does not support data-binding But Angular.js does it! 

Motivation HTML does not support data-binding But Angular.js does it! Linux! 

The magic Scope (The model) scope.user.name = “Iftach” 

The magic Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; 

The magic Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; Let me know when this expression changes -> update the dom: dom.value = scope.user.name; 

There is no spoon Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; Let me know when this expression changes -> update the dom: dom.value = scope.user.name; 

Let’s dive in 

Scope function Scope() { } 

Scope.$watch function Scope() { this.$$watchers = []; } Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn }; this.$$watchers.push(watcher); }; 

Scope.$digest Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn }; this.$$watchers.push(watcher); }; Scope.prototype.$digest = function() { _.forEach(this.$$watchers, function(watch) { watch. listenerFn(); }) }; 

Checking for dirty values Scope.prototype.$digest = function() { var self = this; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch. last; if (newValue !== oldValue) { watch. last = newValue; watch. listenerFn(newValue, oldValue, self); } }); }; 

Getting notified of digest 

Getting notified of digest Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {} }; this.$$watchers.push(watcher); }; 

Problem var scope = new Scope(); scope.name = “iftach”; scope.$watch(function(scope) { return scope.nameUpper; }, function (newValue) { if (newValue) { scope. initial = newValue.substring(0, 1) + '.'; } }); scope.$watch(function(scope) { return scope.name; }, function(newValue) { if (newValue) { scope. nameUpper = newValue.toUpperCase(); } }); 

Problem name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = “IFTACH” initial = undefined Running digest After watch of nameUpper After watch of name 

Problem name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = “IFTACH” initial = undefined But we expected: name = “iftach” nameUpper = “IFTACH” initial = “I” 

Keep digesting while dirty (1) Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (newValue !== oldValue) { watch.last = newValue; watch.listenerFn(newValue, oldValue, self); dirty = true; } }); return dirty; }; 

Keep digesting while dirty (2) Scope.prototype.$digest = function() { var dirty; do { dirty = this.$$digestOnce(); } while (dirty); }; 

Problem var scope = new Scope(); scope.c1 = 0; scope.c2 = 0; scope.$watch(function(scope) { return scope.c1; }, function() { scope.c2++; }); scope.$watch(function(scope) { return scope.c2; }, function() { scope.c1++; }); 

Unstable digest Scope.prototype.$digest = function() { var ttl = 10; var dirty; do { dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); }; 

Deep equal support Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {}, valueEq: !!valueEq }; this.$$watchers.push(watcher); }; 

Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue; } }; 

Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; _.forEach(this.$$watchers, function(watch) { var newValue = watch. watchFn(self); var oldValue = watch. last; if (!self.$$areEqual(newValue, oldValue, watch. valueEq)) { watch. last = (watch.valueEq ? _.cloneDeep(newValue) : newValue; watch. listenerFn(newValue, oldValue, self); dirty = true; } }); return dirty; }; 

NaN !== NaN Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue || (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue)); } }; 

NaN !== NaN Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue || (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue)); } }; 

Performance scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$digest() 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5 

Performance Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch 

Improve performance a bit function Scope() { this.$$watchers = []; this.$$lastDirtyWatch = null; } Scope.prototype.$digest = function() { var ttl = 10; var dirty; this.$$lastDirtyWatch = null; do { dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); }; 

Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; this.$$watchers.every(function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (!self.$$areEqual(newValue, oldValue, watch.valueEq)) { watch.last = (watch.valueEq ? _.cloneDeep(newValue) : newValue; watch.listenerFn(newValue, oldValue, self); dirty = true; self.$$lastDirtyWatch = watch; } else if (self.$$lastDirtyWatch === watch) { return false; } return true; }); return dirty; }; 

$eval vs $apply Scope.prototype.$eval = function(expr, locals) { return expr(this, locals); }; Scope.prototype.$apply = function(expr) { try { return this.$eval(expr); } finally { this.$digest(); } }; 

Destroying a watch Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var self = this; var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {}, valueEq: !!valueEq }; self.$$watchers.push(watcher); return function() { var index = self.$$watchers.indexOf(watcher); if (index >= 0) { self.$$watchers.splice(index, 1); } } }; 

Questions 

Stuff we didn’t discuss $evalAsync Scope phases $$postDigest Handing Exceptions http://teropa.info/build-your-own-angular 

Me? Iftach Bar - Working on Deflect.io - Freelancing http://www.deflect.io 

Thank you