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 Architecture

58,674 views

Published on

AngularJS Architecture

Published in: Technology, Education

AngularJS Architecture

  1. 1. HTML Browser Static DOM Dynamic DOM (View) AngularJS DOM Content Loaded Event ng-app=“module” $injector $compile $rootScope $compile (dom, $rootScope)
  2. 2. (function (window, document, undefined) { 'use strict'; // Functions declerations jqLite(document).ready(function () { angularInit(document, bootstrap); }); })(window, document); angularInit bootstrap doBootstrap
  3. 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. 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. 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. 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. 7. $injector Instance Cache Provider Injector instantiate instantiate Provider Cache
  8. 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. 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. 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. 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. 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. 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. 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. 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. 16.  Factory func  Template  Compile  Controller  preLink  postLink <ul> <li ng-repeat="x in [1,2,3,4]" directive-name> {{x}} </li> </ul>
  17. 17. var parseFn = $parse(' expression '); var resultValue = parseFn($scope); // Set value to expression var setter = parseFn.assign; setter(context,value); Do in compile
  18. 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. 19. $compile $interpolate $parse
  20. 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. 21. Native Event Queue (wait) DOM Render JavaScript AngularJS Event Loop $eval Async queue $watch list
  22. 22. // Pseudo-Code of $apply() function $apply(expr) { try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); } }
  23. 23. ... var dereg = $scope.$watch('Model.Property', callbackOnChange()); … // de-register $watch dereg();
  24. 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. 25. Root Scope Scope Scope Scope
  26. 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)

×