AngularJS - introduction & how it works?

What is Angular?
client-side MVC framework for dynamic web apps;
perfect for building CRUD application: data-binding,
templating, form validation, routing, dependency injection,
reusable components;
designed to be testable: unit-testing, end-to-end testing, mocks.

Why Angular?
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

Key features
Declarative HTML approach
2 way data binding
reusable components - directives
MVC / MVVM design pattern
dependency injection
routing
templating
animations
form validation
E2E integration testing / unit testing
I18n & I10n

How it works?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular app</title>
<script src="bower_components/angular/angular.js">
{{name}}
angular
.module('myApp', [])
.controller('MyCtrl', function($scope){
$scope.name = 'World';
});
Plunker Example

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.

Data Binding
automatic propagation of data changes;
model it's the single-source-of-truth;
digest cycle;
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
binding:
$watch;
$apply;
$digest;
dirty-checking;
Implement your own data binding mechanism

$watch
Angular extends the browser events-loop and creates the
angular-context;
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
happened.
the last value returned by the watch function;

$watch
* 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" />
<ul>
<li ng-repeat="user in userList">
{{user.firstName}} {{user.lastName}}
</li>
</ul>

$digest loop
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:
$evalAsync queue;
$watch list;

$digest loop
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.

$apply
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
manually;
when you use 3rd party code that will change the $scope;

$apply
app.directive('click', function() {
return {
scope: {
name: '='
},
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(function() {
scope.name = 'new name';
});
});
}
}
});
Plunker Example

AngularJS - introduction & how it works?

More Related Content

What's hot

Viewers also liked

Similar to AngularJS - introduction & how it works?

More from Alexe Bogdan

Recently uploaded

AngularJS - introduction & how it works?