AngularJS Compile Process

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 --> Pleasetype 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 <divdirective1 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