What is Angular?
client-side MVC framework for dynamic web apps;
perfect for building CRUD application: data-binding,
templating, form validation, routing, dependency injection,
designed to be testable: unit-testing, end-to-end testing, mocks.
1. The best Model-View-Controller Architecture
2. It works hand-in-hand with HTML
3. Power over your application
4. Testing is Easy
5. Team development it's easy
Declarative HTML approach
2 way data binding
reusable components - directives
MVC / MVVM design pattern
E2E integration testing / unit testing
I18n & I10n
How it works?
$scope.name = 'World';
How it works?
Browser loads the page and creates the DOM;
Browser triggers DOMContentLoaded event;
Angular looks into the DOM for the ng-app attribute and if
the attribute it's found Angular will:
load the module associated with the directive;
create the application injector;
compile the DOM into a Live View:
: traverse the DOM and collect all of the
directives - the result is a linking function;
: combine the directive with a scope and
produce a live view.
automatic propagation of data changes;
model it's the single-source-of-truth;
the view it's updated automatically when
the model is changed;
model is updated automatically when a
value in the View has changed.
no DOM manipulation needed.
$watch, $apply & $digest
Angular uses some main components to implement 2 way data
Implement your own data binding mechanism
Angular extends the browser events-loop and creates the
Every time something is bound in the html a watcher is inserted
in a watch list;
a watcher consist of:
a watch function that returns the current value of
the property it is watching;
a listener function that will be triggered if a change
the last value returned by the watch function;
* Doing this two watchers are registered.
* For 10 people in the list it will be (2 * 10) + 1 watchers registered.
First Name: <input type="text" ng-model="user.firstName" />
Last Name: <input type="text" ng-model="user.lastName" />
<li ng-repeat="user in userList">
Angular knows about browser events-loop;
when the browser receives an event that can be handled by
angular-context the $digest loop will be ﬁred;
the $digest loop is made from two smaller loops:
The $digest will loop trough the watchers list:
It will check the current value returned by the watch function;
It will compare the current value with the last value;
if the equality test fails, it will:
call the listener function associated with that watcher;
it will set the current value as last value;
it will set the $scope as dirty;
If the $scope is dirty, another $digest loop is triggered.
Angular calls $apply under the hood when we use framework
directives like: ngClick, ngModel, ngChange etc.
The $apply function executes expressions in angular
context and then calls the $digest;
Where to use $apply?
in most of the cases in directives where you handle events
when you use 3rd party code that will change the $scope;