AngularJS Compile Process

2. HTML
Browser
Static
DOM
AngularJS
DOM
Content
Loaded
Event
ng-app=“module”
$injector
$compile
Dynamic
DOM
(View)
$compile (dom,
$rootScope)
$rootScope

3. Template
<!-- Expressions -->
Please type your name :
{{name}}
<!-- Directives & Data Binding -->
Directive
Name: <input ng-model="name" value="..." />
elm.bind('keydown', … )
Scope
name : value
$scope.$watch('name', … )

4. 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;
});

5. 





Factory func
Template
Compile
Controller
preLink
postLink






Factory func
Template
Compile
Controller
preLink
postLink
<div directive1 directive2>
<div directive3>
Hello World...
</div>
</div>
$compile start
$compile end






Factory func
Template
Compile
Controller
preLink
postLink

6. function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,
previousCompileContext) {
...
var compositeLinkFn =
compileNodes( compileNodes, transcludeFn, $compileNodes,
maxPriority, ignoreDirective, previousCompileContext);
...



Create all the DDO’s
Execute all DDO’s template property or function
Execute all DDO’s compile functions
return function publicLinkFn(scope, cloneConnectFn, transcludeControllers) {
...
};
}
 Execute all DDO’s controllers
 Execute all DDO’s preLink functions
 Execute all DDO’s postLink functions

7. function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority,
ignoreDirective, previousCompileContext) {
...
for (var i = 0; i < nodeList.length; i++) {
attrs = new Attributes();


Scan the DOM (DFS) and find all directives
Sort the directive by priority
directives = collectDirectives(nodeList[i], [], attrs,
i === 0 ? maxPriority : undefined, ignoreDirective);
nodeLinkFn = (directives.length)
? applyDirectivesToNode(directives, nodeList[i], attrs, ...)
: null;
...



Execute the directive factory and store the DDO
Call to the DDO.template
Call to the DDO.compile
childLinkFn = (nodeLinkFn ...) ? null : compileNodes( childNodes , ...);
...
}
...
}

Execute the compileNodes on the child nodes of
nodeList[i]

8. function bootstrap(element, modules) {
...
function(scope, element, compile, injector, animate) {
scope.$apply(function() {
element.data('$injector', injector);
compile(element)(scope);
});
...






}






Factory func
Template
Compile
Controller
preLink
postLink
<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