Upload
georgesoosai
View
228
Download
1
Tags:
Embed Size (px)
DESCRIPTION
tr
Citation preview
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