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

More Related Content

What's hot (20)

Similar to AngularJS Architecture (20)

More from Eyal Vardi (20)

Recently uploaded (20)

AngularJS Architecture