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

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
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
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
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
 

Recently uploaded (20)

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
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
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
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
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
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...
 

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