Explaination of AngularJohn

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

Overview

Separable of Logistic part and present part Extensible and Maintanable

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

Work FlowWrapping

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

Work FlowFlow Chart

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.

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 queuewill be invoked.

providerservice

factorycontroller

invokeQueue

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

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

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 applicationangular.module('app', []);angular.bootstrap(container, ['app']);

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

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

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}

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)

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

Create Injector

Injectable class: They would be saved in the cache

provider.$get would be saved in InstanceCache

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.

Binding ScopeAfter 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); }); }]);

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

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.

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

Compile Directive● In Setup Modules, see the angularModule we can register a Directive with

‘directive’ function but do later in the bootstrap.

CompileProviderregister

this.directive = function registerDirective(name, directiveFactory) { ...}

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

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

Compile DirectiveExample:

per each edge

From root recursively traverse

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