AngularJS Training - Day #5

By
George

Agenda

$scope Hierarchy
AngularJS $watch() , $observe, $digest() and $apply()
AngularJS Events

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

scope Hierarchy

The $scope object used by views in AngularJS are organized into a

hierarchy

There is a root scope, and the root scope has one or more child scopes

Each view has its own $scope (which is a child of the root scope),

so whatever variables one view controller sets on its $scope variable, those
variables are invisible to other controllers.

scope Hierarchy

AngularJS $watch() , $digest() and $apply()

A watch means that AngularJS watches changes in the variable on

the $scope object.

$scope.$digest() function iterates through all watches and checks if

any of the watched variables have changed

The $scope.$apply() function is used to execute some code, and

then call $scope.$digest() after that, so all watches are checked and
the corresponding watch listener functions are called.

The $apply() function is useful when integrating AngularJS with

other code.

$watch() & $watchCollection

Syntax:

$watch(watchExpression, listener, [objectEquality]);

watchCollection() function was added for collection-oriented change

management.

$watch using function call

$observe
Observes an interpolated attribute.
The observer is then invoked whenever
the interpolated value changes
Syntax:
$observe(key, fn);

$digest() & $apply()

The $scope.$digest() function iterates through all the watches in the

$scope object

The $scope.$apply() function takes a function as parameter which is

executed, and after that $scope.$digest() is called internally.

ng-click Directive
The ngClick directive allows you to specify
custom behavior when an element is
clicked.

ng-dbl-click
The ngDblclick directive allows you to
specify custom behavior on a dblclick
event.

ngMousedown
The ngMousedown directive allows you to
specify custom behavior on mousedown
event.

ngMouseup
Specify custom behavior on mouseup
event.

ngMouseenter
Specify custom behavior on mouseenter
event.

ngMouseleave
Specify custom behavior on mouseleave
event.

ngMousemove
Specify custom behavior on mousemove
event.

ngMouseover
Specify custom behavior on mouseover
event.

ngKeydown
Specify custom behavior on keydown
event.

ngKeyup
Specify custom behavior on keyup event.

ngKeypress
Specify custom behavior on keypress
event.

ngChange
Evaluate the given expression when the user changes the input.
The ngChange expression is only evaluated when a change in the
input value causes a new value to be committed to the model.
It will not be evaluated: if the model is changed programmatically
and not by a change to the input value
Note, this directive requires ngModel to be present.

Assignments