AngularJS Tutorial Day #2

BY
George

Agenda
Directive Overview
Core AngularJS directives
Ng-app
Ng-controller
Ng-model
Ng-init
Interpolation Directive
Ng-bind
Ng-bind-html-unsafe
Ng-show
Ng-hide
Ng-switch
Ng-if
Ng-include
Ng-repeat
Ng-src
Ng-view
Ng-transclude

AngularJS - Directives

AngularJS directives are extended

HTML attributes with the prefixng-.

Ng-app Directive

Theng-appdirective is the entry

point of an AngularJSapplication.

Ng-controller Directive

AngularJScontrollerscontrol
AngularJS applications.
And,ng-controllerdirective defines
the controller.

Ng-model Directive

Used to bind the value in the HTML template &

controller
This is the core directive that helps two-way
binding
Helps to get the user input and make the impact
wherever that model is used

Ng-init Directive

Theng-initdirective initialize
AngularJS application variables.

Interpolation Directive

The interpolation directive is one of the most fundamental

directives in AngujarJS
Used to inserts the result of an expression into the HTML template
Syntax :
{{expression}}

Examples:

ng-bind Directive

Theng-binddirective is an alternative to the

interpolation directive.
Use to insert the result of the model value into
the HTML views
Syntax:
ng-bind = modelName

Examples:

ng-bind-html-unsafe :
Escaping HTML From The
Model
When the input model is HTML element,
the HTML tags are escaped before inserted
into the HTML template
Syntax:
ng-bind-html-unsafe = ModelName

Examples:

ng-show - directive
Used to show html element only when
the model condition is true
If the model condition is false, then it
wont show the HTML element in the
View
Syntax:

$scope. modelName = true;

ng-show = modelName

Examples:

ng-hide Directives

This is the reverse form of ng-show

when the condition is true, it will hide
the html element. Else, show the
html element

ng-switch Directive

Theng-switchdirective is used - if you want to add or remove HTML

elements from the DOM based on data in the model.

Syntax:
ng-switch on
ng-switch-when
ng-switch-default

Example:

ng-if Directive
Theng-ifdirective can include / remove
HTML elements from the DOM
This is just like theng-switchdirective, but
it has a simpler syntax.
Here is an example:

ng-include Directive

Theng-includedirective can be used to include piece of HTML template

from other files into the views.

Here is an example:

Include HTML with some condition:

ng-repeat Directive
Theng-repeatdirective is used to
iterate over a collection of items and
generate HTML from it
Examples:
Iterate through Array:

ng-repeat Directive

Iterate through function:

Iterate through object:

Special ng-repeat
Variables
Theng-repeatdirective defines a set of
special variables which you can use when
iterating the collection.
These variables are,
$index
$first
$middle
$last

ng-repeat Directive

Repeating Multiple Elements

Ng-repeat Start & End Keyword:

Ng-src Directive

Used to bind the image url

dynamically

Any Questions so far ?

Move on to Examples

Assignments #1
Create an application with the model
name of ofsTraining. And, then define
the controller in the name of
angularJSTraining
Inject the above controller & module
name into the views
Create a model name called,
traineesList in the controller And, then
dynamically display the list in the view in
the ul li tag under the attendees list

Assignments #2
In continuation with previous example,
when the user click on any one of the
trainees name, it should show the details
of the selected person the detail must
have the following, firstname,
lastname, age, yearOfExperience,
dateOfBirth, userImage. If we click on
other user, the current detail has to hide
and start display the new user details

Assignments #3

In continuation with previous

example, create a detail section in
the separate HTML and include that
into the main View (use ng-include)

Assignments #4

In continuation with previous

example, have a text box in the main
view and allow to add new user in
the list
Also, allow to remove the users from
the list