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

Más contenido relacionado

Ä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
 
TIMETABLE GENERATOR PPT - 1.pptx
TIMETABLE GENERATOR PPT - 1.pptxTIMETABLE GENERATOR PPT - 1.pptx
TIMETABLE GENERATOR PPT - 1.pptxbhavyag24
 

Mehr von bhavyag24 (8)

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
 
TIMETABLE GENERATOR PPT - 1.pptx
TIMETABLE GENERATOR PPT - 1.pptxTIMETABLE GENERATOR PPT - 1.pptx
TIMETABLE GENERATOR PPT - 1.pptx
 

Último

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 

Último (20)

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 

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