AngularJS Compile Process
•Download as PPTX, PDF•
10 likes•11,234 views
AngularJS Compile Process
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to AngularJS Compile Process
Similar to AngularJS Compile Process (20)
More from Eyal Vardi
More from Eyal Vardi (19)
Recently uploaded
Recently uploaded (20)
AngularJS Compile Process
- 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