Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual

C#blog: www.eVardi.com

AngularJS Compile Process

Startup

HTML

Browser

StaticDOM

DynamicDOM

(View)

AngularJS

DOM Content Loaded Event

ng-app=“module”

$injector

$compile$rootScop

e

$compile (dom,

$rootScope)

Live DOM

<!-- Expressions --> Please type your name : {{name}}

<!-- Directives & Data Binding -->

Name: <input ng-model="name" value="..." />

Template

name :

Scope valu

e

elm.bind('keydown', … )

$scope.$watch('name', … )

Directive

Binding

Directive Definition Object (DDO)var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', // or function templateUrl:'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, require: '^?ngModel' controller: function($scope, $element, $attrs, $transclude, Injectables) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs, controller) { ... } };

return directiveDefinitionObject;});

DDO Execution Order

<div directive1

directive2>

<div directive3>

Hello World...

</div>

</div>

$compile start

$compile end

Factory func

Template Compile Controller preLink postLink

Factory func

Template Compile Controller preLink postLink

Factory func

Template Compile Controller preLink postLink

The Compile Functionfunction compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,                         previousCompileContext) {    ...     

var compositeLinkFn =   compileNodes( compileNodes, transcludeFn, $compileNodes, maxPriority, ignoreDirective, previousCompileContext);

...      

return function publicLinkFn(scope, cloneConnectFn, transcludeControllers) {     ...      }; }

Create all the DDO’s Execute all DDO’s template property or

function Execute all DDO’s compile functions

Execute all DDO’s controllers Execute all DDO’s preLink

functions Execute all DDO’s postLink

functions

The compileNodes Functionfunction compileNodes(nodeList, transcludeFn, $rootElement, maxPriority,                         ignoreDirective, previousCompileContext) { ...   for (var i = 0; i < nodeList.length; i++) {         attrs = new Attributes();

        directives = collectDirectives(nodeList[i], [], attrs,  i === 0 ? maxPriority : undefined, ignoreDirective);

        nodeLinkFn = (directives.length)  ? applyDirectivesToNode(directives, nodeList[i], attrs, ...)

: null;            ...

        childLinkFn = (nodeLinkFn ...) ? null : compileNodes( childNodes , ...);           ...     }     ... }

Scan the DOM (DFS) and find all directives

Sort the directive by priority

Execute the directive factory and store the DDO

Call to the DDO.template Call to the DDO.compile

Execute the compileNodes on the child nodes of nodeList[i]

Step II : The Link Functions function bootstrap(element, modules) { ...

function(scope, element, compile, injector, animate) {     scope.$apply(function() {                   element.data('$injector', injector);                   compile(element)(scope);});...

}Execute the

compile processExecute the link process

<div directive1

directive2>

<div directive3>

Hello World...

</div>

</div>$compile start

$compile end

Factory func

Template Compile Controller preLink postLink

Factory func

Template Compile Controller preLink postLink

Factory func Template Compile Controller preLink postLink

DDO Execution Order

Thankseyalvardi.wordpress.com

Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual C#blog: www.e4d.co.il