"Inside The AngularJS Directive Compiler" by Tero Parviainen

Inside The AngularJS
Directive Compiler
Tero Parviainen
@teropa

Directives
“Angular attempts to minimize the impedance
mismatch between document centric HTML
and what an application needs by creating
new HTML constructs.
Angular teaches the browser new syntax
through a construct we call directives.”
https://docs.angularjs.org/guide/introduction

{
priority: 0,
terminal: false,
template: '<div></div>',
templateNamespace: 'html',
replace: false,
multiElement: false,
transclude: false,
restrict: 'A',
scope: false,
controller: 'MyCtrl',
controllerAs: 'myCtrl',
bindToController: true,
require: '^parentCtrl',
compile: function(el) {
return {
pre: function(scope, el, attrs) { },
post: function(scope, el, attrs) { }
}
}
}

src/ng/compile.js
•  1307 lines of code
•  84 functions
•  Compilation & linking
•  Attribute management
•  Controllers
•  Isolate bindings
•  Templates & transclusion
https://github.com/es-analysis/plato

1.  Compilation
2.  Linking
3.  Inheritance
4.  Isolation

The Directive Compiler
$compile
Directives
+
DOM
Compiled
DOM

$compileProvider.directive('myClass', function() {
return {
compile: function(element) {
element.addClass('decorated');
}
};
});
Directive Registration

<div id="root">
<div my-class></div>
</div>
Directive Usage

var root = document.querySelector('#root');
var $root = angular.element(root);
$compile($root);
Compilation

The Compile Provider
function $CompileProvider() {
this.directive = function(name, factory) {
};
}

Directive Registration
var directives = {};
directives[name] = directives[name] || [];
directives[name].push(factory());
};
}

Constructing $compile
var directives = {};
directives[name] = directives[name] || [];
directives[name].push(factory());
};
this.$get = function() {
return function $compile(element) {
};
};
}

The compileNode helper function
function compileNode(element) {
}
compileNode(element);
};
};

Collecting Directives
function collectDirectives(element) {
}
var directives = collectDirectives(element);
}
};
};

Three Collection Strategies
function collectDirectives(element) {
return
collectElementDirectives(element)
.concat(collectAttrDirectives(element))
.concat(collectClassDirectives(element));
}
}
};
};

Element Directives
function collectElementDirectives(element) {
var elName = element[0].nodeName;
var directiveName = _.camelCase(elName);
return directives[directiveName] || [];
}

Attribute Directives
function collectAttrDirectives(element) {
var result = [];
_.each(element[0].attributes, function(attr) {
var dirName = _.camelCase(attr.name);
result = result.concat(directives[dirName] || []);
});
return result;
}

Class Directives
function collectClassDirectives(element) {
var result = [];
_.each(element[0].classList, function(cName) {
var dirName = _.camelCase(cName);
result = result.concat(directives[dirName] || []);
});
return result;
}

Applying The Directives
directives.forEach(function(directive) {
directive.compile(element);
});
}

Recursing to Child Nodes
});
element.children().forEach(compileNode);
}

Scopes
• Application data + behavior
• Change detection
• Events

The Directive Compiler And Linker
$compile
Directives
+
DOM
Compiled DOM
+
Linker
Linker
Linked
DOM
Compiled DOM
+
Scope

return {
return function link(scope, element) {
element.addClass(scope.theClass);
};
}
};
});
Directive with a Link Function

var root = document.querySelector('#root');
var $root = angular.element(root);
var linkFunction = $compile($root);
$rootScope.theClass = 'decorated';
linkFunction($rootScope);
Linking

The Node Link Function
});
return function nodeLinkFn(scope) {
};
}
return compileNode(element);
};

Collect Link Functions
var directives = collectDirectives(element),
linkFns = [];
var linkFn = directive.compile(element);
linkFns.push(linkFn);
});
};
}

Apply Link Functions
linkFns = [];
});
linkFns.forEach(function(linkFn) {
linkFn(scope, element);
});
};
}

Collect Child Link Functions
linkFns = [];
});
var childLinkFns =
element.children().map(compileNode);
});
};
}

Apply Child Link Functions
linkFns = [];
});
var childLinkFns =
element.children().map(compileNode);
childLinkFns.forEach(function(childLinkFn) {
childLinkFn(scope);
});
});
};
}

Scope Hierarchy
$rootScope
$scope $scope
$scope

Scope Hierarchy vs. DOM Hierarchy
<article ng-app="myApp">
<section ng-controller="..."></section>
<section ng-controller="...">
<div ng-controller="...">
</div>
</section>
</article> $rootScope
$scope $scope
$scope
article
section section
div

return {
scope: true,
scope.counter = 0;
element.on('click', function() {
scope.counter++;
});
};
}
};
});
Directive Requests a Scope

Remember The “New Scope Directive”
linkFns = [],
newScopeDir;
if (directive.scope) {
if (newScopeDir) {
throw 'No more than 1 new scope plz!';
}
newScopeDir = directive;
}
});
// ...
}

Make a new scope during linking
if (newScopeDir) {
scope = scope.$new();
}
childLinkFn(scope);
});
});
};

$rootScope
$scope $scope
$scope
Isolate Scopes

Isolate Bindings
$rootScope
$scope $scope
$scope
expression
attribute

Directive with Isolate Scope & Bindings
<div click-logger="'Hello!'"></div>
$compileProvider.directive('clickLogger', function() {
return {
scope: {
message: '=clickLogger'
},
scope.counter = 0;
console.log(scope.message);
});
};
}
};
});

Remember The “Iso Scope Directive”
linkFns = [],
newScopeDir, newIsoScopeDir;
if (newScopeDir || newIsoScopeDir) {
}
if (_.isObject(directive.scope)) {
newIsoScopeDir = directive;
} else {
}
}
});
// ...
}

Create Isolate Scope During Linking
var isoScope;
if (newScopeDir) {
}
if (newIsoScopeDir) {
isoScope = scope.$new(true);
}
childLinkFn(scope);
});
});
};

Remember Link Function Directives
linkFns = [],
newScopeDir, newIsoScopeDir;
linkFn.directive = directive;
if (newScopeDir || newIsoScopeDir) {
}
if (_.isObject(directive.scope)) {
newIsoScopeDir = directive;
} else {
}
}
});
// ...

Apply Isolate Scope
var isoScope;
if (newScopeDir) {
}
}
childLinkFn(scope);
});
var isIso = (linkFn.directive === newIsoScopeDir);
linkFn(isIso ? isoScope : scope, element);
});
};

Isolate Bindings
<div click-logger="'Hello!'"></div>
$compileProvider.directive('clickLogger', function() {
return {
scope: {
message: '=clickLogger'
},
scope.counter = 0;
console.log(scope.message);
});
};
}
};
});

Loop Over Isolate Bindings
var isoScope;
if (newScopeDir) {
}
_.forOwn(
newIsoScopeDir.scope,
function(spec, scopeName) {
}
);
}
// ...
};

Get Attribute Expression
_.forOwn(
var attrName = spec.match(/^=(.*)/)[1];
var denormalized = _.kebabCase(attrName);
var expr = element.attr(denormalized);
}
);
}

Watch & Bind The Expression
_.forOwn(
scope.$watch(expr, function(newValue) {
isoScope[scopeName] = newValue;
});
}
);
}

Two-Way Data Binding
$rootScope
$scope $scope
$scope
expression
attribute
Two
directions

Parse Expression String to Function
_.forOwn(
var exprFn = $parse(expr);
scope.$watch(exprFn, function(newValue) {
isoScope[scopeName] = newValue;
});
}
);
}

Refactor The Watcher
_.forOwn(
scope.$watch(function() {
var newParentValue = exprFn(scope);
var childValue = isoScope[scopeName];
if (newParentValue !== childValue) {
isoScope[scopeName] = newParentValue;
}
});
}
);
}

Track The Parent Value
_.forOwn(
var parentValue;
}
parentValue = newParentValue;
});
}
);

Check for Parent vs. Child Change
var parentValue;
if (newParentValue !== parentValue) {
} else {
}
}
});

Propagate Change Up
var parentValue;
if (newParentValue !== parentValue) {
} else {
exprFn.assign(scope, childValue);
newParentValue = childValue;
}
}
});

teropa.info
-75% off list price
with code
”FRAMEWORKSDAYS”

"Inside The AngularJS Directive Compiler" by Tero Parviainen

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to "Inside The AngularJS Directive Compiler" by Tero Parviainen (20)

More from Fwdays (20)

Recently uploaded (20)

"Inside The AngularJS Directive Compiler" by Tero Parviainen