AngularJS Architecture

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

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

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

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

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

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

$injector Instance Cache Provider Injector instantiate instantiate Provider Cache

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.

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

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

<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

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

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]

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

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

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

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

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

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

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

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

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

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

In this document

More Related Content

What's hot

Similar to AngularJS Architecture

More from Eyal Vardi

Recently uploaded

AngularJS Architecture