SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
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
THANK YOU

Weitere ähnliche Inhalte

Ähnlich wie AIT SEMINAR.pptx

Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014Sarah Hudson
 
Angular Presentation
Angular PresentationAngular Presentation
Angular PresentationAdam Moore
 
Introduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarIntroduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarAppfinz Technologies
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development GuideNitin Giri
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesMarios Fakiolas
 
Angular JS Indtrodution
Angular JS IndtrodutionAngular JS Indtrodution
Angular JS Indtrodutionadesh21
 
Everything You Need To Know About AngularJS
Everything You Need To Know About AngularJSEverything You Need To Know About AngularJS
Everything You Need To Know About AngularJSSina Mirhejazi
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schkannikadg
 

Ähnlich wie AIT SEMINAR.pptx (20)

Starting with angular js
Starting with angular js Starting with angular js
Starting with angular js
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014
 
Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
 
Angular2
Angular2Angular2
Angular2
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
 
Introduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarIntroduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumar
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
Get rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directivesGet rid of controllers in angular 1.5.x start using component directives
Get rid of controllers in angular 1.5.x start using component directives
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular JS Indtrodution
Angular JS IndtrodutionAngular JS Indtrodution
Angular JS Indtrodution
 
Angular 2
Angular 2Angular 2
Angular 2
 
Everything You Need To Know About AngularJS
Everything You Need To Know About AngularJSEverything You Need To Know About AngularJS
Everything You Need To Know About AngularJS
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
 
Angular Basics.pptx
Angular Basics.pptxAngular Basics.pptx
Angular Basics.pptx
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 

Mehr von bhavyag24

DOC-20230727-WA0006..pptx
DOC-20230727-WA0006..pptxDOC-20230727-WA0006..pptx
DOC-20230727-WA0006..pptxbhavyag24
 
carbohydrate.ppt
carbohydrate.pptcarbohydrate.ppt
carbohydrate.pptbhavyag24
 
datamarts.ppt
datamarts.pptdatamarts.ppt
datamarts.pptbhavyag24
 
metadata.pptx
metadata.pptxmetadata.pptx
metadata.pptxbhavyag24
 
SCREENLESS DISPLAY (2).pptx
SCREENLESS DISPLAY (2).pptxSCREENLESS DISPLAY (2).pptx
SCREENLESS DISPLAY (2).pptxbhavyag24
 
CRYPTOGRAPHY AND NETWORK SECURITY.pptx
CRYPTOGRAPHY AND NETWORK SECURITY.pptxCRYPTOGRAPHY AND NETWORK SECURITY.pptx
CRYPTOGRAPHY AND NETWORK SECURITY.pptxbhavyag24
 
supplychainmanagementppt-130123080351-phpapp02.pdf
supplychainmanagementppt-130123080351-phpapp02.pdfsupplychainmanagementppt-130123080351-phpapp02.pdf
supplychainmanagementppt-130123080351-phpapp02.pdfbhavyag24
 

Mehr von bhavyag24 (7)

DOC-20230727-WA0006..pptx
DOC-20230727-WA0006..pptxDOC-20230727-WA0006..pptx
DOC-20230727-WA0006..pptx
 
carbohydrate.ppt
carbohydrate.pptcarbohydrate.ppt
carbohydrate.ppt
 
datamarts.ppt
datamarts.pptdatamarts.ppt
datamarts.ppt
 
metadata.pptx
metadata.pptxmetadata.pptx
metadata.pptx
 
SCREENLESS DISPLAY (2).pptx
SCREENLESS DISPLAY (2).pptxSCREENLESS DISPLAY (2).pptx
SCREENLESS DISPLAY (2).pptx
 
CRYPTOGRAPHY AND NETWORK SECURITY.pptx
CRYPTOGRAPHY AND NETWORK SECURITY.pptxCRYPTOGRAPHY AND NETWORK SECURITY.pptx
CRYPTOGRAPHY AND NETWORK SECURITY.pptx
 
supplychainmanagementppt-130123080351-phpapp02.pdf
supplychainmanagementppt-130123080351-phpapp02.pdfsupplychainmanagementppt-130123080351-phpapp02.pdf
supplychainmanagementppt-130123080351-phpapp02.pdf
 

Kürzlich hochgeladen

Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 

Kürzlich hochgeladen (20)

Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 

AIT SEMINAR.pptx

  • 1. 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
  • 2. 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
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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.).
  • 7. <!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
  • 8. 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.
  • 9. 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
  • 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 }}
  • 11. 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
  • 12. 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.
  • 13. 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