SlideShare a Scribd company logo
1 of 14
 AngularJS is a JavaScript framework. It can be added to an
HTML page with a <script> tag.
 AngularJS extends HTML attributes with Directives, and
binds data to HTML with Expressions.
 AngularJS is distributed as a JavaScript file, and can be
added to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angular
js/1.6.9/angular.min.js"></script>
 AngularJS directives are used to extend HTML. They are
special attributes starting with ng- prefix.
 The following are directives:
 ng-app: Starts an AngularJS application.
 ng-init: Initializes application data.
 ng-model: Binds the value of HTML controls (input, select,
textarea) to application data.
 ng-repeat: Repeats HTML elements for each item in a collection.
 AngularJS will resolve the expression, and return
the result exactly where the expression is written.
 AngularJS expressions can be written inside
double braces: {{ expression }} or inside a
directive: ng-bind="expression".
 An AngularJS module defines an application.
 The module is a container for the different parts of
an application.
 The module is a container for the application
controllers.
 A module is created by using the AngularJS
function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
 The scope is the binding part between the HTML
(view) and the JavaScript (controller).
 The scope is an object with the available properties
and methods.
 All applications have a $rootScope which is the scope
created on the HTML element that contains the ng-
app directive. The rootScope is available in the entire
application.
 AngularJS application mainly relies on controllers to
control the flow of data in the application. A
controller is defined using ng-controller directive.
 A controller is a JavaScript object that contains
attributes/properties, and functions.
 Each controller accepts $scope as a parameter, which
refers to the application/module that the controller
needs to handle.
 Filters can be added in AngularJS to format data. They can be
clubbed in expression or directives using pipe (|) character.
 AngularJS provides filters to transform data:
1. currency Format a number to a currency format.
2. date Format a date to a specified format.
3. filter Select a subset of items from an array.
4. lowercase Format a string to lower case.
5. orderBy Orders an array by an expression.
6. uppercase Format a string to upper case.
 Forms in AngularJS provides data-binding and
validation of input controls.
 Input controls are the HTML input elements:
 input elements
 select elements
 button elements
 textarea elements
 Angularjs monitors the state of the form and input fields (input,
textarea, select), and lets you notify the user about the current
state.
 Input fields have the following states:
 $untouched The field has not been touched yet
 $touched The field has been touched
 $pristine The field has not been modified yet
 $dirty The field has been modified
 $invalid The field content is not valid
 $valid The field content is valid
 Forms have the following states:
 $pristine No fields have been modified yet
 $dirty One or more have been modified
 $invalid The form content is not valid
 $valid The form content is valid
 $submitted The form is submitted
Angular.pptx

More Related Content

Similar to Angular.pptx

Angular JS training institute in Jaipur
           Angular JS training institute in Jaipur           Angular JS training institute in Jaipur
Angular JS training institute in JaipurHEMANT SAXENA
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJSYashobanta Bai
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development GuideNitin Giri
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs WorkshopRan Wahle
 
Angular tutorial
Angular tutorialAngular tutorial
Angular tutorialRohit Gupta
 
Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaBharat Makwana
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014Ran Wahle
 
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
 
Introduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarIntroduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarAppfinz Technologies
 
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
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIEric Wise
 
Angular js getting started
Angular js getting startedAngular js getting started
Angular js getting startedHemant Mali
 

Similar to Angular.pptx (20)

Angular JS training institute in Jaipur
           Angular JS training institute in Jaipur           Angular JS training institute in Jaipur
Angular JS training institute in Jaipur
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
AngularJS
AngularJSAngularJS
AngularJS
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
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 tutorial
Angular tutorialAngular tutorial
Angular tutorial
 
Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat Makwana
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
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
 
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 introduction basic
Angular introduction basicAngular introduction basic
Angular introduction basic
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
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
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
 
Angular Basics.pptx
Angular Basics.pptxAngular Basics.pptx
Angular Basics.pptx
 
Angular js getting started
Angular js getting startedAngular js getting started
Angular js getting started
 

More from Govardhan Bhavani (17)

Angular Application Setup.pptx
Angular Application Setup.pptxAngular Application Setup.pptx
Angular Application Setup.pptx
 
Files.pptx
Files.pptxFiles.pptx
Files.pptx
 
Pandas.pptx
Pandas.pptxPandas.pptx
Pandas.pptx
 
NumPy.pptx
NumPy.pptxNumPy.pptx
NumPy.pptx
 
ExpressJS and REST API.pptx
ExpressJS and REST API.pptxExpressJS and REST API.pptx
ExpressJS and REST API.pptx
 
NodeJS.pptx
NodeJS.pptxNodeJS.pptx
NodeJS.pptx
 
JavaScript.pptx
JavaScript.pptxJavaScript.pptx
JavaScript.pptx
 
Maven.pptx
Maven.pptxMaven.pptx
Maven.pptx
 
Configure & Version Control-Git.pptx
Configure & Version Control-Git.pptxConfigure & Version Control-Git.pptx
Configure & Version Control-Git.pptx
 
DevOps.pptx
DevOps.pptxDevOps.pptx
DevOps.pptx
 
Agile XP.pptx
Agile XP.pptxAgile XP.pptx
Agile XP.pptx
 
Ajax
AjaxAjax
Ajax
 
Ruby
RubyRuby
Ruby
 
PHP
PHPPHP
PHP
 
CSS
CSSCSS
CSS
 
Unit 1part-2 forms & frames
Unit 1part-2 forms & framesUnit 1part-2 forms & frames
Unit 1part-2 forms & frames
 
Unit 1 (part-1, basic tags)
Unit 1 (part-1, basic tags)Unit 1 (part-1, basic tags)
Unit 1 (part-1, basic tags)
 

Recently uploaded

Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptx
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptxENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptx
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptxAnaBeatriceAblay2
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,Virag Sontakke
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 

Recently uploaded (20)

Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptx
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptxENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptx
ENGLISH5 QUARTER4 MODULE1 WEEK1-3 How Visual and Multimedia Elements.pptx
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 

Angular.pptx

  • 1.
  • 2.  AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.  AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.  AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src="https://ajax.googleapis.com/ajax/libs/angular js/1.6.9/angular.min.js"></script>
  • 3.  AngularJS directives are used to extend HTML. They are special attributes starting with ng- prefix.  The following are directives:  ng-app: Starts an AngularJS application.  ng-init: Initializes application data.  ng-model: Binds the value of HTML controls (input, select, textarea) to application data.  ng-repeat: Repeats HTML elements for each item in a collection.
  • 4.  AngularJS will resolve the expression, and return the result exactly where the expression is written.  AngularJS expressions can be written inside double braces: {{ expression }} or inside a directive: ng-bind="expression".
  • 5.  An AngularJS module defines an application.  The module is a container for the different parts of an application.  The module is a container for the application controllers.  A module is created by using the AngularJS function angular.module
  • 6. <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script>
  • 7.  The scope is the binding part between the HTML (view) and the JavaScript (controller).  The scope is an object with the available properties and methods.  All applications have a $rootScope which is the scope created on the HTML element that contains the ng- app directive. The rootScope is available in the entire application.
  • 8.  AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive.  A controller is a JavaScript object that contains attributes/properties, and functions.  Each controller accepts $scope as a parameter, which refers to the application/module that the controller needs to handle.
  • 9.  Filters can be added in AngularJS to format data. They can be clubbed in expression or directives using pipe (|) character.  AngularJS provides filters to transform data: 1. currency Format a number to a currency format. 2. date Format a date to a specified format. 3. filter Select a subset of items from an array. 4. lowercase Format a string to lower case. 5. orderBy Orders an array by an expression. 6. uppercase Format a string to upper case.
  • 10.
  • 11.  Forms in AngularJS provides data-binding and validation of input controls.  Input controls are the HTML input elements:  input elements  select elements  button elements  textarea elements
  • 12.  Angularjs monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.  Input fields have the following states:  $untouched The field has not been touched yet  $touched The field has been touched  $pristine The field has not been modified yet  $dirty The field has been modified  $invalid The field content is not valid  $valid The field content is valid
  • 13.  Forms have the following states:  $pristine No fields have been modified yet  $dirty One or more have been modified  $invalid The form content is not valid  $valid The form content is valid  $submitted The form is submitted