Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTML
Browser

Static
DOM

AngularJS

DOM
Content
Loaded
Event

ng-app=“module”
$injector
$compile

Dynamic
DOM
(View)

$co...
Template
<!-- Expressions -->
Please type your name :

{{name}}

<!-- Directives & Data Binding -->

Directive

Name: <inp...
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefin...







Factory func
Template
Compile
Controller
preLink
postLink








Factory func
Template
Compile
Control...
function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,
previousCompileContext) {
...

var compositeLi...
function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority,
ignoreDirective, previousCompileContext) {
...
fo...
function bootstrap(element, modules) {
...
function(scope, element, compile, injector, animate) {
scope.$apply(function() ...
AngularJS Compile Process
AngularJS Compile Process
AngularJS Compile Process
Prochain SlideShare
Chargement dans…5
×

AngularJS Compile Process

AngularJS Compile Process

  • Identifiez-vous pour voir les commentaires

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

×