To understand how Angular works on Dependency injection, Data-binding, and Virtual DOM.

1. Explaination of Angular
John

2. Outline
● Overview
● Angular’s Work Flow
● Create Injector
● Binding Scope by RootScopeProvidor
● Compile Directive by CompileProvidor
● Summary

3. Overview
Separable of Logistic part and present part Extensible and Maintanable

4. Work Flow
Package to the one file, angular.js. In angularFiles.js, there declares many files
they will be merge into a file.
'angularSrc': [
...
'src/AngularPublic.js', 'src/jqLite.js', 'src/apis.js', 'src/auto/injector.js',
'src/angular.bind.js', 'src/publishExternalApis.js',
...
],
angular.js

5. Work Flow
Wrapping
angular.prefix
(function(window, document, undefined) {
angular.suffix
jqLite(document).ready(function() {
angularInit(document, bootstrap); // 3. Initialize
});
})(window, document);
angular.js
if (window.angular.bootstrap) {
return;
}
bindJQuery(); // 1. Binding JQuery
publishExternalAPI(angular); // 2. setupModuleLoader in loader.js

6. Work Flow
Flow Chart

7. Work Flow
Binding JQuery:
● Check whether includes JQuery (window.JQuery and JQuery element).
● Combine some functions of JQLite with JQuery.
● JQLite is a lite or tiny version of JQuery.
● If no loaded JQuery Angular will delegate to JQLite.

8. Work Flow
Setup modules:
● In this step, it declares Angular’s module.
● Within module instance, there are many
functions will execute pushing declaration into
a queue.
● While bootstrap, the declarations in the queue
will be invoked.
provider
service
factory
controller
invokeQueue

9. Work Flow
Setup modules:
● Then, setup the built-in module, ‘ng’.
● Ng module is dependended by ngLocale module.
● And setup most of built-in providers and most of directives
angularModule('ng', ['ngLocale'], ['$provide',
function ngModule($provide) {
// $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
$provide.provider({
$$sanitizeUri: $$SanitizeUriProvider
});
$provide.provider('$compile', $CompileProvider).
directive({
… //a lot of …...
});
}]);

10. Work Flow
Setup modules:
● So when you use Angular and define
your controller that will not be
invoked immediately.
● All of your definations are
invoked in bootstrap stage.
● So you are able to define your controller in different annotation, ‘array’ or
‘function’.

11. Work Flow
Angular initialization
● Call ‘angularInit’ function
● First, find out the element which has Angular app attribute. (ng-app/ng:app/...)
● Bootstrap the app element (Ex: <div ng-app />)
● If no app element Angular will not execute bootstrap.
● But we can bootstrap manually.
//Bootstrap the Angular application
angular.module('app', []);
angular.bootstrap(container, ['app']);

12. Work Flow
Angular initialization
● Angular’s Bootstrap ‘bootstrap’ function
● If a module has been loaded into the browser more than once it only allow the
first loaded script to be bootstrapped.
● At the initialization, the modules prepare to be bootstrapped would be like
['ng', [$provide, function($provide){...}], 'app']
○ ng: The built-in module
○ anonymous module: for setting app element to the $rootElement
○ application module
● Finally, create InjectorProvider, then use InjectorProvider to invoke compiling
directives in the DOMs within app element.
var injector = createInjector(modules, config.strictDi);

13. Create Injector
● While creating Injector, there are two caches, ProviderCache and
InstanceCache. And two injectors, ProviderInjector and InstanceInjector.
providerCache = {
$provide: { … }
},
providerInjector = (providerCache.$injector =
createInternalInjector(providerCache, function(serviceName, caller) {
if (angular.isString(caller)) { path.push(caller); }
throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
})),
instanceCache = {},
instanceInjector = (instanceCache.$injector =
createInternalInjector(instanceCache, function(serviceName, caller) {
var provider = providerInjector.get(serviceName + providerSuffix, caller);
return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
}));

14. Create Injector
● ProviderCache has a default member:
● ProviderInejctor and InstanceInjector are member, $injector, of
ProviderCache and InstanceCache.
$provide: {
provider: supportObject(provider),
factory: supportObject(factory),
service: supportObject(service),
value: supportObject(value),
constant: supportObject(constant),
decorator: decorator
}

15. Create Injector
● Injector is responsible for getting the service from the cache and invoking the
constructor function that will be put dependancies as parameter.
● After initiate two injectors, it will load and setup each module with Injectors
recursively. (function loadModules)

16. Create Injector
● In Initialization, there is a built-in module, ‘ng’, at the first element in the queue
is going to bootstrap and it must be ‘string’ type. That guarantee the ‘ng’
module to be invoked as first.
● The ‘ng’ module includes built-in services and built-in directives they will be
loaded in the cache (InstanceCache).
● If it can’t find an instance from InstanceCache it will get from ProviderCache
and invoke $get, finally save the instance to InstanceCache.
instanceInjector = (instanceCache.$injector =
createInternalInjector(instanceCache, function(serviceName, caller) {
var provider = providerInjector.get(serviceName + providerSuffix, caller);
return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
}));

17. Create Injector
Injectable class: They would be saved in the cache
provider.$get would be saved in InstanceCache

18. Binding Scope
● As Scope’s name, it is a field you can save data into it.
● Scope is like a tree node that can link to its parent, child, or sib.
● Scope contains some function to monitor and handle the data saving in
Scope.

19. Binding Scope
After creating injector InstanceInjector will be returned from function
‘createInjector’.
Then,
You can see it injects $rootScope and call $apply. What will it do?
injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
function bootstrapApply(scope, element, compile, injector) {
scope.$apply(function() {
element.data('$injector', injector);
compile(element)(scope);
});
}]
);

20. Binding Scope
● Actually, $apply can do that excutes
the expression (i.e,. {{x}} ) or function and
finally invokes $digest to scan the watchee.
● Every watchee is saved in a list, $$watchers.
with the listener.
● $digest executes to scan $$watchers
whether the watchee is changed the contains.
● While compiling, the data of a element that is
an expression it would be regarded as a
watchee and save in the watch list.
$apply: function(expr) {
try {
beginPhase('$apply');
try {
return this.$eval(expr);
} finally {
clearPhase();
}
} catch (e) {
$exceptionHandler(e);
} finally {
try {
$rootScope.$digest();
} catch (e) {
$exceptionHandler(e);
throw e;
}
}
}

21. Binding Scope
● From RootSope, we can use $new to create a child Scope.
● And access relative Scope by using $root, $parent, $childHead, $childTail,
$prevSibling, $nextSibling.
● Passing message within Tree Structure with broadcast and $emit.

22. Binding Scope
● Back to
● Here means invoking the function and using ‘compile’ service to compile root
element and bind with root scope.
● Next, going on explaining CompileProvider and its service.
injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
function bootstrapApply(scope, element, compile, injector) {
scope.$apply(function() {
element.data('$injector', injector);
compile(element)(scope);
});
}]
);

23. Compile Directive
● In Setup Modules, see the angularModule we can register a Directive with
‘directive’ function but do later in the bootstrap.
CompileProvider
register
this.directive =
function registerDirective(name, directiveFactory) {
...
}

24. Compile Directive
● $CompileProvider is a service provider and it’s
service instance is ‘compile’ will be returned
from $CompileProvider.$get.
function compile($compileNodes, transcludeFn, maxPriority,
ignoreDirective, previousCompileContext) {
...
var compositeLinkFn =
compileNodes($compileNodes, transcludeFn, $compileNodes,
maxPriority, ignoreDirective, previousCompileContext);
...
return function publicLinkFn(scope, cloneConnectFn, options) {
... };
}

25. Compile Directive
● In Binding Scope, you could see
element is $rootElement and scope is $rootScope.
● It injects ‘compile’ service and compile the root element then bind the root
scope.
● Inside ‘compile’, it compile all nodes include in the element past as parameter.
● First, collect all directive include in the root node of the element, the directive
may ‘E’(element) type, ‘A’(attribute) type, or ‘C’(class) type.
● Then, it recursively parsing child node of th element. Each run of parsing will
collect directives and apply template on directive.
● At the final, return a link function that is able to apply all nodes to bind with
Scopes duplicate from the past Scope.
compile(element)(scope);

26. Compile Directive
Example:
per each edge
From root recursively traverse

27. Summary
● First in initialization, declares Angular Module, then setup(load) built-in
module, ‘ng’ and its services, directive, factory, etc. And also setup(load)
application module.
● Create Injector that includes Caches to cache the instances. - Independency
Injection
● Second in bootstraping, initiates and injects relatived instances to loaded
module. - Inject services
● Then, compiling elements from given root element at the meanwhile collect all
directives and expressions. - Virtual DOM
● Final, binding the node with Scope. - Data binding