AngularJS Internal

  • 1,983 views
Uploaded on

AngularJS Internal

AngularJS Internal

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,983
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
94
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML Browser Static DOM Dynamic DOM (View) AngularJS DOM Content Loaded Event ng-app=“module” $injector $compile $rootScope $compile (dom, $rootScope)
  • 2. (function (window, document, undefined) { 'use strict'; // Functions declerations jqLite(document).ready(function () { angularInit(document, bootstrap); }); })(window, document); angularInit bootstrap doBootstrap
  • 3. <html > <body> Hello {{'World'}}! <script src="angular.js"></script> <script> angular.element(document).ready(function () { angular.module('myApp', []); angular.bootstrap(document, ['myApp']); }); </script> </body> </html>
  • 4. // Create a module var myModule = angular.module('myModule', []) // Configure the injector myModule.factory('serviceA', function () { return { // instead of {}, put your object creation here }; }); // create an injector and configure it from 'myModule' var $injector = angular.injector(['myModule']); // retrieve an object from the injector by name var serviceA = $injector.get('serviceA'); // always true because of instance cache $injector.get('serviceA') === $injector.get('serviceA');
  • 5. // inferred (only works if code not minified/obfuscated) $injector.invoke(function (serviceA) { }); // annotated function explicit(serviceA) { }; explicit.$inject = ['serviceA']; $injector.invoke(explicit); // inline $injector.invoke(['serviceA', function (serviceA) { }]);
  • 6. // You write functions such as this one. function doSomething(serviceA, serviceB) { // do something here. } // Angular provides the injector for your application var $injector = ...; /////////////////////////////////////////////// // the old-school way of getting dependencies. var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); // now call the function doSomething(serviceA, serviceB); /////////////////////////////////////////////// // the cool way of getting dependencies. $injector.invoke(doSomething)
  • 7. $injector Instance Cache Provider Injector instantiate instantiate Provider Cache
  • 8. Config ( function( xxxProvider ){} ) Registration - controller(name, constructor) - directive(name, directiveFn) - filter(name, filterFactory) Registration ($provide) - service(name, constructor) - factory(name, providerFn) - provider(name, providerType) - decorator(name, fn ) - constant(name, object) - value(name, object) run(initializationFn) Execute when the injector is done loading all modules.
  • 9. ngXXX angular.module('myApp', ['ngXXX', 'ngYYY']); Constant Provider ngYYY Constant Providers myApp Constant Providers Config Config Config Run Run Run $injector Instance Cache Provider Cache
  • 10. <div ng-controller="MyCtrl"> <ul> <li ng-repeat="n in names">{{n}}</li> </ul> </div> First the HTML is parsed into DOM using the standard browser API. Once all directives for a given DOM element have been identified they are sorted by priority and their the directive compile() functions are executed. DOM + link($scope) Live binding between the scope and the DOM Register any listeners on the elements and set up any watches with the scope. var $compile = ...; // injected into your code var scope = ...; var html = '<div ng-bind="exp"></div>'; // Step 1: parse HTML into DOM element var template = angular.element(html); // Step 2: compile the template var linkFn = $compile(template); // Step 3: link the compiled template with the scope. linkFn(scope);
  • 11. 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; });
  • 12. <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  Factory func  Template  Compile  Controller  preLink  postLink
  • 13. function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) { ... var compositeLinkFn = compileNodes( compileNodes, transcludeFn, $compileNodes, maxPriority, ignoreDirective, previousCompileContext); ... return function publicLinkFn(scope, cloneConnectFn, transcludeControllers) { ... }; }  Create all the DDO’s  Execute all DDO’s template property or function  Execute all DDO’s compile functions  Execute all DDO’s controllers  Execute all DDO’s preLink functions  Execute all DDO’s postLink functions
  • 14. function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective, previousCompileContext) { ... for (var i = 0; i < nodeList.length; i++) { attrs = new Attributes(); directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined, ignoreDirective); nodeLinkFn = (directives.length) ? applyDirectivesToNode(directives, nodeList[i], attrs, ...) : null; ... childLinkFn = (nodeLinkFn ...) ? null : compileNodes( childNodes , ...); ... } ... }  Scan the DOM (DFS) and find all directives  Sort the directive by priority  Execute the directive factory and store the DDO  Call to the DDO.template  Call to the DDO.compile  Execute the compileNodes on the child nodes of nodeList[i]
  • 15. function bootstrap(element, modules) { ... function(scope, element, compile, injector, animate) { scope.$apply(function() { element.data('$injector', injector); compile(element)(scope); }); ... } <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  Factory func  Template  Compile  Controller  preLink  postLink
  • 16.  Factory func  Template  Compile  Controller  preLink  postLink <ul> <li ng-repeat="x in [1,2,3,4]" directive-name> {{x}} </li> </ul>
  • 17. var parseFn = $parse(' expression '); var resultValue = parseFn($scope); // Set value to expression var setter = parseFn.assign; setter(context,value); Do in compile
  • 18. var temp = $interpolate( "{{a}}+{{b}}=<b>{{ result }}</b>" ); var result = temp( {a: '2', b: '3', result: '5'} ); Do in compile $parse $parse $parse
  • 19. $compile $interpolate $parse
  • 20. <!-- Expressions --> Please type your name : {{name}} <!-- Directives & Data Binding --> Name: <input ng-model="name" value="..." /> Template name : Scope value elm.bind('keydown', … ) $scope.$watch('name', … ) Directive
  • 21. Native Event Queue (wait) DOM Render JavaScript AngularJS Event Loop $eval Async queue $watch list
  • 22. // Pseudo-Code of $apply() function $apply(expr) { try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); } }
  • 23. ... var dereg = $scope.$watch('Model.Property', callbackOnChange()); … // de-register $watch dereg();
  • 24. Counter = 0Counter = 1 scope.name = 'misko'; scope.counter = 0; scope.$watch('name', function(newValue, oldValue) { scope.counter = scope.counter + 1; }); scope.$digest(); scope.name = 'adam'; scope.$digest();
  • 25. Root Scope Scope Scope Scope
  • 26. Scope Type Properties:  $id Events:  $destroy Lifecycle Methods  $destroy()  $new(isolate) Communication Methods:  $broadcast(name, args)  $emit(name, args)  $on(name, listener) Runtime Methods:  $watch(…)  $apply(exp)  $digest()  $eval(exp)  $evalAsync(exp)