AngularJS Architecture

2. HTML Browser Static DOM Dynamic DOM (View) AngularJS DOM Content Loaded Event ng-app=“module” $injector $compile $rootScope $compile (dom, $rootScope)

3. (function (window, document, undefined) { 'use strict'; // Functions declerations jqLite(document).ready(function () { angularInit(document, bootstrap); }); })(window, document); angularInit bootstrap doBootstrap

4. <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>

8. // 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');

9. // 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) { }]);

10. // 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)

11. $injector Instance Cache Provider Injector instantiate instantiate Provider Cache

13. 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.

14. 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

16. <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);

17. 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; });

18. <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

19. 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

20. 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]

21. 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

23.  Factory func  Template  Compile  Controller  preLink  postLink <ul> <li ng-repeat="x in [1,2,3,4]" directive-name> {{x}} </li> </ul>

24. var parseFn = $parse(' expression '); var resultValue = parseFn($scope); // Set value to expression var setter = parseFn.assign; setter(context,value); Do in compile

25. var temp = $interpolate( "{{a}}+{{b}}=<b>{{ result }}</b>" ); var result = temp( {a: '2', b: '3', result: '5'} ); Do in compile $parse $parse $parse

26. $compile $interpolate $parse

27.  Please type your name : {{name}}  Name: <input ng-model="name" value="..." /> Template name : Scope value elm.bind('keydown', … ) $scope.$watch('name', … ) Directive

28. Native Event Queue (wait) DOM Render JavaScript AngularJS Event Loop $eval Async queue $watch list

29. // Pseudo-Code of $apply() function $apply(expr) { try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); } }

30. ... var dereg = $scope.$watch('Model.Property', callbackOnChange()); … // de-register $watch dereg();

33. 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();

35. Root Scope Scope Scope Scope

37. 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)

AngularJS Architecture

AngularJS Architecture

Recommended

More Related Content

What's hot

What's hot(20)

Similar to AngularJS Architecture

Similar to AngularJS Architecture(20)

More from Eyal Vardi

More from Eyal Vardi(20)

Recently uploaded

Recently uploaded(20)

AngularJS Architecture