Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Compile Process

10,212 views

Published on

AngularJS Compile Process

Published in: Technology

AngularJS Compile Process

  1. 1. HTML Browser Static DOM AngularJS DOM Content Loaded Event ng-app=“module” $injector $compile Dynamic DOM (View) $compile (dom, $rootScope) $rootScope
  2. 2. 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', … )
  3. 3. 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; });
  4. 4.       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
  5. 5. 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
  6. 6. 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]
  7. 7. 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

×