AngularJS Tutorial Day #2

BYGeorge

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 prefix ng-.

Ng-app Directive

• The ng-app directive is the entry point of an AngularJS application.

Ng-controller Directive

• AngularJS controllers control AngularJS applications.

• And, ng-controller directive 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

• The ng-init directive 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:

• The ng-bind directive 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 Directive

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 won’t

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• The ng-switch directive is used - if you want to add or remove HTML elements from the DOM

based on data in the model.

Syntax:ng-switch – onng-switch-whenng-switch-default

Example:

ng-if Directive• The ng-if directive can include / remove HTML

elements from the DOM• This is just like the ng-switch directive, but it has a

simpler syntax. Here is an example:

ng-include Directive• The ng-include directive can be used to include piece of HTML template from other files into

the view‘s.

Here is an example:

Include HTML with some condition:

ng-repeat Directive

• The ng-repeat directive 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• The ng-repeat directive 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