AIT SEMINAR.pptx

An Autonomous college of University of Mysuru, Re-Accredited by NAAC with ‘A’ Grade
Recognised by UGC as college with potential for Excellence
Ooty Road, Mysuru=570025, Karnataka, India
SEMINAR TOPICS:
 ANGULAR-
DIRECTIVES
EXPRESSION
FILTERS
TEAM ASSOCIATES
• HARSHITHA K L JPC21052
• SUPRIYA JPC21057
• BHAVYA G JPC21007
• POOJA B N JPC21053

1. DIRECTIVES
Directives are markers in the Document Object Model(DOM).
Directives can be used with any of controller or HTML tag which will tell the
compiler what exact operation or behavior is expected.
There are some directives present which is predefined but if a developer wants he
can create new directives (custom-directive).
The following table lists the important built-in AngularJS directives.
Directives Description
ng-app Start of AngularJS application.
ng-init Used to initialise a variable
ng-model ng-model is used to bind to the HTML controls
ng-controller Attaches a controller to the view
ng-bind Binds the value with HTML element
ng-repeat Repeats HTML template once per each item in the specified collection.
ng-show Shows or hides the associated HTML element
ng-readonly Makes HTML element read-only
ng-disabled Use to disable or enable a button dynamically
ng-if Removes or recreates HTML element
ng-click Custom step on click

a. ng-app
The ng-app Directive in AngularJS is used to define the root element of
an AngularJS application.
This directive automatically initializes the AngularJS application on page
load.
It can be used to load various modules in AngularJS Application.
b. ng-init:
The ng-init directive is used to initialize an AngularJS Application data.
It defines the initial value for an AngularJS application and assigns values
to the variables.
The ng-init directive defines initial values and variables for an AngularJS
application.
c. ng-model:
ng-model is a directive which binds input, select and text area, and stores
the required user value in a variable and we can use that variable
whenever we require that value.
It also is used during validations in a form.

d. ng-controller:
The ng-controller Directive in AngularJS is used to add controller to
the application.
It can be used to add methods, functions and variables that can be
called on some event like click, etc. to perform certain action.
e. ng-bind:
The ng-bind directive in AngularJS is used to bind/replace the text
content of any particular HTML element with the value that is entered
in the given expression.
The value of specified HTML content updates whenever the value of
the expression changes in ng-bind directive.

f. ng-click:
The ng-click Directive in AngluarJS is used to apply custom behavior
when an element is clicked.
It can be used to show/hide some element or it can popup alert when
button is clicked.
g. ng-show:
The ng-show Directive in AngluarJS is used to show or hide the
specified HTML element.
If the given expression in ng-show attribute is true then the HTML
element will display otherwise it hides the HTML element.
It is supported by all HTML elements.
j. ng-if:
The ng-if Directive in AngularJS is used to remove or recreate a
portion of HTML element based on an expression.
The ng-if is different from ng-hide because it completely removes the
element in the DOM rather than just hiding the display of the element.
If the expression inside it is false then the element is removed and if it
is true then the element is added to the DOM.

h. ng-readonly:
The ng-readonly Directive in AngularJS is used to specify the
readonly attribute of an HTML element.
The HTML element will be readonly only if the expression inside ng-
readonly directive returns true.
i. ng-disabled:
The ng-disabled Directive in AngularJS is used to enable or disable
HTML elements.
If the expression inside the ng-disabled attribute returns true then the
form field will be disabled or vice versa.
It is usually applied on form field (input, select, button, etc.).

<!DOCTYPE html>
<html>
<head>
<title>ng-controller Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">JSS COLLEGE</h1>
<h2>ng-controller Directive</h2><br>
<div ng-controller=“JSS">
Name: <input class="form-control" type="text"
ng-model="name">
<br><br>
You entered: <b><span>{{name}}</span></b>
</div>
<script>
var app = angular.module('app', []);
app.controller(‘JSS', function ($scope) {
$scope.name = “JSS COLLEGE";
});
</script>
</body>
</html>
EXAMPLE PROGRAM Output:
JSS COLLEGE
ng-controller Directive
Name:
You entered: JSS COLLEGE
JSS COLLEGE

2. EXPRESSION
Angular JS expression are much like JavaScript Expressions:
They can contain literals, operators and variables.
Example: {(5+5)} or {{firstName+” “+lastName}}
Expressions in AngularJS are used to bind application data to HTML. The
expressions are resolved by AngularJS and the result is returned back to where
the expression is written.
The expressions in AngularJS are written in double braces:
{{ expression }}.
They behave similar to ng-bind directives: ng-bind=”expression”.
Syntax:
{{ expression }}
AngularJS expressions can be written inside double braces:
{{ expression }}.
AngularJS expressions can also be written inside a directive:
ng-bind="expression".
AngularJS will resolve the expression, and return the result exactly where
the expression is written.

Example 1
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/li
bs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
OUTPUT:
My first expression: 10

Example 2
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs
/1.6.9/angular.min.js"></script>
<body>
<div >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
OUTPUT:
My first expression: {{ 5 + 5 }}

3. FILTERS
• AngularJS filters are used to process data and format values to present
to the user.
• They are applied on expressions in our HTML, or directly on data in our
controllers and services.
• Filters can be applied to expressions in view templates using the
following syntax:
 {{expression | filter}}
Example: the markup {{12 | currency}}
 {{expression | filter1 | filter2 | ..}}
 {{expression | filter:argument1:argument2..}}
• Filters are only executed when their inputs have changed.
• AngularJS has some built-in filters to work with dates, numbers, strings
and arrays

AngularJS Filters: AngularJS provides filters to transform data of different data
types. The following table shows the significant filters:
• currency: It is used to convert a number into a currency format.
• date: It is used to convert a date into a specified format.
• filter: It is used to filter the array and object elements and return the filtered
items.
• json: To convert a JavaScript object into JSON.
• limitTo: It is used to return an array or a string that contains a specified
number of elements.
• lowercase: It is used to convert a string into lowercase letters.
• uppercase: It is used to convert a string into uppercase letters.
• number: It is used to convert a number into a string or text.
• orderBy: It sorts an array based on specified predicate expressions.

EXAMPLE PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.
6.9/angular.min.js">
</script>
</head>
<body>
<h1 style="color: green">
JSS COLLEGE
</h1>
<h3>AngularJS lowercase Filter</h3>
<div ng-app="app1" ng-controller="lowCtrl">
<strong>Input:</strong>
<input type="text" ng-model="string" />
<br><br>
<strong>Output:</strong>
{{string|lowercase}}
</div>
<script>
var app = angular.module("app1", []);
app.controller("lowCtrl", function($scope) {
$scope.string = "";
});
</script>
</body>
</html>
OUTPUT:
JSS COLLEGE
Angular JS Lowercase
Input:
Output: jss college
JSS COLLEGE

AIT SEMINAR.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a AIT SEMINAR.pptx

Semelhante a AIT SEMINAR.pptx (20)

Mais de bhavyag24

Mais de bhavyag24 (7)

Último

Último (20)

AIT SEMINAR.pptx