SlideShare una empresa de Scribd logo
1 de 19
• Data-binding − It is the automatic synchronization of data between
model and view components.
• Scope − These are objects that refer to the model. They act as a glue
between controller and view.
• Controller − These are JavaScript functions bound to a particular
scope.
• Services − AngularJS comes with several built-in services such as
$http to make a XMLHttpRequests. These are singleton objects which
are instantiated only once in app.
• Filters − These select a subset of items from an array and returns a
new array.
• Directives − Directives are markers on DOM elements such as
elements, attributes, css, and more. These can be used to create
custom HTML tags that serve as new, custom widgets. AngularJS has
built-in directives such as ngBind, ngModel, etc.
• Routing − It is concept of switching views.
• Model View Whatever − MVW is a design pattern for dividing an
application into different parts called Model, View, and Controller,
each with distinct responsibilities.
• Dependency Injection − AngularJS has a built-in dependency
injection subsystem that helps the developer to create, understand,
and test the applications easily.
• It provides the capability to create Single Page Application in a
very clean and maintainable way.
• It provides data binding capability to HTML. Thus, it gives user
a rich and responsive experience.
• AngularJS uses dependency injection and make use of
separation of concerns.
• With AngularJS, the developers can achieve more functionality
with short code.
• In AngularJS, views are pure html pages, and controllers written
in JavaScript do the business processing.
• 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/
angularjs/1.6.9/angular.min.js"></script>
• AngularJS directives can be applied to DOM elements in
many ways. It is not mandatory to use ng- syntax only.
• Directive can also start with x- or data-, for example ng-
model directive can be written as data-ng-model or x-ng-
model.
• Also, the - in the directive can be replaced with : or _ or
both. For example, ng-model can be written as ng_model
or ng:model. It can also be a mix with data- or x-.
Directive Description
ng-app Auto bootstrap AngularJS application.
ng-init Initializes AngularJS variables
ng-model Binds HTML control's value to a property on the $scope object.
ng-
controller
Attaches the controller of MVC to the view.
ng-bind Replaces the value of HTML control with the value of specified
AngularJS expression.
ng-repeat Repeats HTML template once per each item in the specified
collection.
Directive Description
ng-show Display HTML element based on the value of the specified
expression.
ng-
readonly
Makes HTML element read-only based on the value of the
specified expression.
ng-
disabled
Sets the disable attribute on the HTML element if specified
expression evaluates to true.
ng-if Removes or recreates HTML element based on an expression.
ng-click Specifies custom behavior when an element is clicked.
Here “ng-app” Directive starts the angular js
This link is the source of angular js( You can alos
download it and access it locally)
Directive to Hold input data
Directive binds
application data to
the HTML view.
O/P
O/P
O/P
O/P
O/P
O/P
O/P
Angular JS Indtrodution

Más contenido relacionado

La actualidad más candente

Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginnersMunir Hoque
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic ConceptHari Haran
 
Angularjs - custom directives part 05
Angularjs - custom directives part 05Angularjs - custom directives part 05
Angularjs - custom directives part 05Mohd Abdul Baquee
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJSInfragistics
 
Angular patterns
Angular patternsAngular patterns
Angular patternsPremkumar M
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
Angular.js presentation
Angular.js presentationAngular.js presentation
Angular.js presentationMoran Fine
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEcncwebworld
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияOlga Lavrentieva
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4Jon Galloway
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCSunpawet Somsin
 
Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7andrewmriley
 

La actualidad más candente (20)

AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic Concept
 
Angularjs - custom directives part 05
Angularjs - custom directives part 05Angularjs - custom directives part 05
Angularjs - custom directives part 05
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJS
 
Introducing angular
Introducing angularIntroducing angular
Introducing angular
 
Angular js
Angular jsAngular js
Angular js
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
Angular js anupama
Angular js anupamaAngular js anupama
Angular js anupama
 
Angular.js presentation
Angular.js presentationAngular.js presentation
Angular.js presentation
 
Module2
Module2Module2
Module2
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7
 

Similar a Angular JS Indtrodution

Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to AngularjsGaurav Agrawal
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSShyjal Raazi
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) PresentationRaghubir Singh
 
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
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersjobinThomas54
 
Introduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarIntroduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumarAppfinz Technologies
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
Angular js interview question answer for fresher
Angular js interview question answer for fresherAngular js interview question answer for fresher
Angular js interview question answer for fresherRavi Bhadauria
 
Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaBharat Makwana
 

Similar a Angular JS Indtrodution (20)

Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 
Angularjs
AngularjsAngularjs
Angularjs
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
AngularJS
AngularJSAngularJS
AngularJS
 
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
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
 
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
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
 
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 Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Angular js interview question answer for fresher
Angular js interview question answer for fresherAngular js interview question answer for fresher
Angular js interview question answer for fresher
 
Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat Makwana
 

Último

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...Amil baba
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxPooja Bhuva
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxDr. Ravikiran H M Gowda
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jisc
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the ClassroomPooky Knightsmith
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 

Último (20)

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 

Angular JS Indtrodution

  • 1.
  • 2. • Data-binding − It is the automatic synchronization of data between model and view components. • Scope − These are objects that refer to the model. They act as a glue between controller and view. • Controller − These are JavaScript functions bound to a particular scope. • Services − AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app. • Filters − These select a subset of items from an array and returns a new array.
  • 3. • Directives − Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, etc. • Routing − It is concept of switching views. • Model View Whatever − MVW is a design pattern for dividing an application into different parts called Model, View, and Controller, each with distinct responsibilities. • Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.
  • 4. • It provides the capability to create Single Page Application in a very clean and maintainable way. • It provides data binding capability to HTML. Thus, it gives user a rich and responsive experience. • AngularJS uses dependency injection and make use of separation of concerns. • With AngularJS, the developers can achieve more functionality with short code. • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
  • 5.
  • 6. • 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/ angularjs/1.6.9/angular.min.js"></script>
  • 7.
  • 8. • AngularJS directives can be applied to DOM elements in many ways. It is not mandatory to use ng- syntax only. • Directive can also start with x- or data-, for example ng- model directive can be written as data-ng-model or x-ng- model. • Also, the - in the directive can be replaced with : or _ or both. For example, ng-model can be written as ng_model or ng:model. It can also be a mix with data- or x-.
  • 9. Directive Description ng-app Auto bootstrap AngularJS application. ng-init Initializes AngularJS variables ng-model Binds HTML control's value to a property on the $scope object. ng- controller Attaches the controller of MVC to the view. ng-bind Replaces the value of HTML control with the value of specified AngularJS expression. ng-repeat Repeats HTML template once per each item in the specified collection.
  • 10. Directive Description ng-show Display HTML element based on the value of the specified expression. ng- readonly Makes HTML element read-only based on the value of the specified expression. ng- disabled Sets the disable attribute on the HTML element if specified expression evaluates to true. ng-if Removes or recreates HTML element based on an expression. ng-click Specifies custom behavior when an element is clicked.
  • 11. Here “ng-app” Directive starts the angular js This link is the source of angular js( You can alos download it and access it locally) Directive to Hold input data Directive binds application data to the HTML view.
  • 12. O/P
  • 13. O/P
  • 14. O/P
  • 15. O/P
  • 16. O/P
  • 17. O/P
  • 18. O/P