2. Back in time ...
Websites instead of webapps
Client seen as an interface
All the workload handled by
the server
No client-side logic
Javascript coder seen as web
designer
… when dinosaurs rule the Earth
3. Getting into the present day...
AJAX – HTML5 – CSS3
Web 2.0
Client splitted from server
Lots of new Javascript libraries
Webapp
5. A current problem
Too much time
Too much code
Too much stress
Building client-side
webapp is still hard
DOM Manipulation
Data validation
6. Angular for the life!
Data-binding
Basic templating directives
Form validation
Routing
Reusable components
Dependency injection
Unit-testing
7. Bootstrap
Load HTML DOM
Load the module associated with
the directive
Create the application injector
Compile the DOM treating the ng-
app directive as the root of the
compilation
8. Conceptual Overview
1. The browser loads the HTML and parses it
into a DOM
2. The browser loads angular.js script
3. Angular waits for DOMContentLoaded event
4. Angular looks for ng-app directive, which
designates the application boundary
5. The Module specified in ng-app (if any) is
used to configure the $injector
6. The $injector is used to create the $compile
service as well as $rootScope
7. The $compile service is used to compile the
DOM and link it with $rootScope
9. 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
11. 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 structure
3. Once the callback executes,
the browser leaves the JavaScript
context and re-renders the view
based on DOM changes.
12. Runtime in detail
1. Enter Angular execution context by calling scope.
$apply(stimulusFn)
2. Angular executes the stimulusFn(), which typically modifies
application state
3. 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
render
5. 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 value
7. 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
13. 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.
14. 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.
<input type=”text” ng-model=”user.name” placeholder=”Foo”/>
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).
<div>Negative number: {{val | number:2}}</div>
<div>Your name (in lowercase): {{user.name | lowercase}}</div>
15. 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.
