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

Recommended

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