AngularJS: what is underneath the hood

- the less routine code the happier developers
- good application structure
two-way data binding
- directives
- testability
- active community / cool documentation, etc...

var btn = document.getElementById("myBtn");
btn.addEventListener("click", onClick);
function onClick(evt) {
// some code
}

<button ng-click=”onClick($event)”></button>
element.on(‘click’, function(event){
var callback = function(){
fn(scope, {$event: event});
}
scope.$apply(callback);
})

<span>{{myModel}}</span>
function myController($scope, $timeout) {
$scope.myModel = ‘value1’;
setTimeout(function(){
}, 500);
$timeout(function(){
}, 500);
}

scope.$watch(‘someModel2’,
callback);
{{someModel}}, ng-bind
ng-repeat, ng-model..
$timeout(fn) с нулевой
задержкой
scope.$evalAsync(fn)
$watch list $evalAsync list

step 1:
function Scope() {
}
step 2:
function Scope() {
this.$$watchers = [];
}
step 3:
Scope.prototype.$watch = function(watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn
};
this.$$watchers.push(watcher);
};
$watchList implementation

step 4:
Scope.prototype.$digest = function() {
_.forEach(this.$$watchers, function(watch) {
watch.listenerFn();
});
};
step 5:
var self = this;
var newValue = watch.watchFn(self);
var oldValue = watch.last;
if (newValue !== oldValue) {
watch.listenerFn(newValue, oldValue, self);
}
watch.last = newValue;
});
};

...
$scope.$watch(‘myModel’, function(){
alert(‘My model was changed’);
});
$scope.$watch(‘yourModel’, function(){
scope.myModel = ‘someValue’;
});
...
<input type=”text” ng-model=”yourModel” />

var self = this;
var dirty;
do {
dirty = false;
var newValue = watch.watchFn(self);
var oldValue = watch.last;
if (newValue !== oldValue) {
watch.listenerFn(newValue, oldValue, self);
dirty = true;
}
watch.last = newValue;
});
} while (dirty);
};
DIRTY CHECK

step 1:
function Scope() {
this.$$watchers = [];
this.$$asyncQueue = [];
}
step 2:
Scope.prototype.$evalAsync = function(expr) {
var obj = {scope: this, expression: expr};
this.$$asyncQueue.push(obj);
};
step 3:
while (this.$$asyncQueue.length) {
var asyncTask = this.$$asyncQueue.shift();
this.$eval(asyncTask.expression);
}
...
};
$watchList implementation$evalAsync implementation
function myCtrl($scope, $rootScope) {
$scope.$evalAsync(function()
{
console.log($scope.myModel);
});
}

$scope.$apply vs $scope.$digest
<body ng-app=”myApp”>{{rootMessage}}
<div ng-controller=”myCtrl”>{{childMessage}}</div>
</body>
function myCtrl($scope, $rootScope) {
$rootScope.rootMessage = ‘root message’;
$scope.childMessage = ‘child message’;
$rootScope.rootMessage = ‘new root message’;
$scope.childMessage = ‘new child message’;
$scope.apply(); // both model are re-rendered
$scope.digest(); // only childMessage
}, 5000); }

$scope.apply(function(){//some code});
}, 5000); }
$apply: function(expr) {
try {
return this.$eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
try {
$rootScope.$digest();
} catch (e) {
$exceptionHandler(e);
throw e;
}
}}

SOME OPTIMIZATION TIPS
- minimize watchers:
- limit DOM filters
- use onetime binding when possible ng-bind=”::myModel” ng-
repeat=”item in ::items” or bindonce if Angular < 1.3
- lightweight watch-functions and callbacks in watchers
- ng-repeat=”item in items track by item.id”
- $watchCollection instead of $watch with 3rd parameter equaled true
- debounce ng-model <input ng-model=”myModel” ng-model-
options=”{debounce: 500}” />
- use native JS or lodash (for example, simple ‘for’ loop instead of
angular.forEach )
- use directive ng-bind instead of {{}};

$parse
$scope.$watch(function() {
return $scope.myModel;
}, callback);
$scope.$watch(‘myModel’, callback);
$watch: function(watchExp, listener, objectEquality){
var get = $parse(watchExp);...
}
$eval: function(expr, locals) {
return $parse(expr)(this, locals);
},

DEPENDENCY INJECTION IN ANGULAR
Dependency Injection is a software design pattern in which an object is given its
dependencies, rather than the object creating them itself.
angular.module(‘myApp’, []);
angular.module(‘myApp’)
.controller(‘myController’, myController);
function myController($scope, $timeout, myService) {
// some code goes here
}
function myController($timeout, $scope, myService) {
}

ISSUES WITH IMPLICIT DEPENDENCES
Before minification:
angular.module(‘myApp’, []);
.controller(‘myController’, myController);
function myController($scope, $timeout, myService) {
}
After:
angular.module(‘myApp’,[]);angular.module(‘myApp’).controller(‘myContro
ller’,myController);function myController(l,o,p){...}

SOLUTIONS
Inline array annotation
$inject property annotation
.controller(‘myController’, [‘$scope’, ‘myService’, myController]);
function myController($scope, myService) {
...
}
angular.module(‘myApp’).controller(‘myController’, myController);
myController.$inject = [‘$scope’, ‘myService’];
function myController($scope, myService) {
...
}

AngularJS: what is underneath the hood

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to AngularJS: what is underneath the hood (20)

More from DA-14 (12)

Recently uploaded (20)

AngularJS: what is underneath the hood