HTML enhanced for web apps!

Back in time ...

Websites instead of webappsClient seen as an interfaceAll the workload handled by the serverNo client-side logicJavascript coder seen as web designer

when dinosaurs rule the Earth

Getting into the present day...

AJAX HTML5 CSS3Web 2.0Client splitted from serverLots of new Javascript librariesWebapp

Javascript: the answer!

Javascript frameworksMVC ArchitectureBig webapp

No more comparison with web designers!

A current problem

Too much timeToo much codeToo much stressBuilding client-side webapp is still hardDOM ManipulationData validation

Angular for the life!

Data-bindingBasic templating directivesForm validationRoutingReusable componentsDependency injectionUnit-testing

Bootstrap

Load HTML DOMLoad the module associated with the directiveCreate the application injectorCompile the DOM treating the ng-app directive as the root of the compilation

Conceptual Overview

1. The browser loads the HTML and parses it into a DOM2. The browser loads angular.js script3. Angular waits for DOMContentLoaded event4. Angular looks for ng-app directive, which designates the application boundary5. The Module specified in ng-app (if any) is used to configure the $injector6. The $injector is used to create the $compile service as well as $rootScope7. The $compile service is used to compile the DOM and link it with $rootScope

HTML Compiler

Compile: traverse the DOM and collect all of the directives. The result is a linking function.

Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.

Compiler is an angular service which traverses the DOM looking for attributes

Data-binding

Also known as MVVM

Runtime

1. The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event, or network event (response from a server)2. The event's callback gets executed. This enters the JavaScript context. The callback can modify the DOM structure3. Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes.

Runtime in detail

1. Enter Angular execution context by calling scope.$apply(stimulusFn)2. Angular executes the stimulusFn(), which typically modifies application state3. Angular enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes.4. The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render5. The $watch list is a set of expressions which may have changed since last iteration. If a change is detected then the $watch function is called which typically updates the DOM with the new value7. Once the Angular $digest loop finishes the execution leaves the Angular and JavaScript context. This is followed by the browser re-rendering the DOM to reflect any changes

Scope & View

The browser parses the HTML into the DOM, and the DOM becomes the input to the template engine known as the compiler. The compiler looks for directives which in turn set up watches on the model. The result is a continuously updating view which does not need template model re-merging. Your model becomes the single source-of-truth for your view.

The scope is responsible for detecting changes to the model section and provides the execution context for expressions.

Directives & Filters

A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion.

Filters perform data transformation. Typically they are used in conjunction with the locale to format the data in locale specific output. They follow the spirit of UNIX filters and use similar syntax | (pipe).

Negative number: {{val | number:2}}Your name (in lowercase): {{user.name | lowercase}}

Modules & Injectors

The injector is a service locator. There is a single injector per Angular application. The injector provides a way to look up an object instance by its name. The injector keeps an internal cache of all objects so that repeated calls to get the same object name result in the same instance. If the object does not exist, then the injector asks the instance factory to create a new instance.

A module is a way to configure the injector's instance factory, known as a provider.

What's next?

Formsi18n & l10nModulesDependenciesMVCE2E TestingAngular Services

etc etc etc

The End