Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

AngularJS Compile Process

10.478 Aufrufe

Veröffentlicht am

AngularJS Compile Process

Veröffentlicht in: Technologie
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • For AngularJS Online Course Coupons and Discounts Visit http://www.todaycourses.com
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×