SlideShare uma empresa Scribd logo
1 de 18
ANGULARJS OVERVIEW
What is ANGULARJS?
AngularJS is a JavaScript framework created
by Google to build properly architectured and
maintainable web applications.
What is ANGULARJS?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myCtrl">
<h2>{{message}}</h2>
</div>
<script>
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.message = "Hello World"
});
</script>
</body>
Key Features of ANGULARJS
• Template and Expressions
• Model
• Data Binding
• Controller and $scope
• Filters
• Services
• Directives
Template and Expressions
Template are JavaScript-like code snippets that are usually placed in bindings such as {{
expression }}
<body>
1+2={{1+2}}
</body>
Model
Binding the view into the model, which other directives such as input, textarea or select
require.
Setting related CSS classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-
touched, ng-untouched, ng-empty, ng-not-empty) including animations.
Data Binding
Controller and $Scope
Filters
Using Filters
Built-in Filters
• uppercase
• lowercase
• number
• currency
• date
• json
• orderBy
• limitTo
• filter
Services
Services are JavaScript functions and are responsible to do a specific tasks only.
Services
Lazily instantiated Singletons
Built-in Services
• $http
• $resource
• $anchorScroll
• $cacheFactory
• $compile
• $parse
• $locale
• $timeout
• $exceptionHandler
• $filter
• $cookieStore
• $interpolate
• $log
• $rootScope
• $ window
• $ document
• $ rootElement
• $ route
• $ routeParams
• $ location
• $ controller
Directive
The directives can be placed in element names, attributes, class names, as well as
comments. Directives are a way to teach HTML new tricks.
A directive is just a function which executes when the compiler encounters it in the DOM.
Event Directives
• ngClick
• ngDblClick
• ngMousedown
• ngMouseenter
• ngMouseleave
• ngMousemove
• ngMouseover
• ngMouseup
• ngChange
Other Directive
• ngApp
• ngBind
• ngBindTemplate
• ngBindHtml
• ngBindHtmlUnsafe
• ngHide
• ngShow
ngCloak
ngStyle
ngClass
ngClassEven
ngClassOdd
ngDisabled
ngChecked
ngMultiple
ngReadonly
ngSelected
ngForm
ngSubmit
ngHref
ngSrc
Example
Resources
Documentation
• AngularJS Developer Guide
• AngularJS API
• AngularJS Tutorial

Mais conteúdo relacionado

Mais procurados

Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at Datacom
David Xi Peng Yang
 

Mais procurados (20)

Angular js
Angular jsAngular js
Angular js
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Angular pres
Angular presAngular pres
Angular pres
 
Angularjs tutorial
Angularjs tutorialAngularjs tutorial
Angularjs tutorial
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
Angularjs 5,6,7
Angularjs 5,6,7Angularjs 5,6,7
Angularjs 5,6,7
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Angular js presentation at Datacom
Angular js presentation at DatacomAngular js presentation at Datacom
Angular js presentation at Datacom
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Directives
DirectivesDirectives
Directives
 
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
 
ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)
 
Valentine with AngularJS
Valentine with AngularJSValentine with AngularJS
Valentine with AngularJS
 
UI5CN Live Webinar for FAQ and Q&A on 08th June
UI5CN Live Webinar for FAQ and Q&A on 08th JuneUI5CN Live Webinar for FAQ and Q&A on 08th June
UI5CN Live Webinar for FAQ and Q&A on 08th June
 

Semelhante a Angular workshop

AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
jobinThomas54
 

Semelhante a Angular workshop (20)

AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
Angular js slides
Angular js slidesAngular js slides
Angular js slides
 
Angular tutorial
Angular tutorialAngular tutorial
Angular tutorial
 
Custom directive and scopes
Custom directive and scopesCustom directive and scopes
Custom directive and scopes
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
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 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic Concept
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS
AngularJS AngularJS
AngularJS
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
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
 

Último

notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
MsecMca
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
MayuraD1
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
HenryBriggs2
 

Último (20)

notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
Bridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptxBridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptx
 
Learn the concepts of Thermodynamics on Magic Marks
Learn the concepts of Thermodynamics on Magic MarksLearn the concepts of Thermodynamics on Magic Marks
Learn the concepts of Thermodynamics on Magic Marks
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network Devices
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech students
 
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptxA CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
 
2016EF22_0 solar project report rooftop projects
2016EF22_0 solar project report rooftop projects2016EF22_0 solar project report rooftop projects
2016EF22_0 solar project report rooftop projects
 
Computer Lecture 01.pptxIntroduction to Computers
Computer Lecture 01.pptxIntroduction to ComputersComputer Lecture 01.pptxIntroduction to Computers
Computer Lecture 01.pptxIntroduction to Computers
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
 
Rums floating Omkareshwar FSPV IM_16112021.pdf
Rums floating Omkareshwar FSPV IM_16112021.pdfRums floating Omkareshwar FSPV IM_16112021.pdf
Rums floating Omkareshwar FSPV IM_16112021.pdf
 
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
 
kiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal loadkiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal load
 

Angular workshop

  • 2. What is ANGULARJS? AngularJS is a JavaScript framework created by Google to build properly architectured and maintainable web applications.
  • 3. What is ANGULARJS? <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="myCtrl"> <h2>{{message}}</h2> </div> <script> angular.module("app", []) .controller("myCtrl", function($scope) { $scope.message = "Hello World" }); </script> </body>
  • 4. Key Features of ANGULARJS • Template and Expressions • Model • Data Binding • Controller and $scope • Filters • Services • Directives
  • 5. Template and Expressions Template are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} <body> 1+2={{1+2}} </body>
  • 6. Model Binding the view into the model, which other directives such as input, textarea or select require. Setting related CSS classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng- touched, ng-untouched, ng-empty, ng-not-empty) including animations.
  • 11. Built-in Filters • uppercase • lowercase • number • currency • date • json • orderBy • limitTo • filter
  • 12. Services Services are JavaScript functions and are responsible to do a specific tasks only. Services Lazily instantiated Singletons
  • 13. Built-in Services • $http • $resource • $anchorScroll • $cacheFactory • $compile • $parse • $locale • $timeout • $exceptionHandler • $filter • $cookieStore • $interpolate • $log • $rootScope • $ window • $ document • $ rootElement • $ route • $ routeParams • $ location • $ controller
  • 14. Directive The directives can be placed in element names, attributes, class names, as well as comments. Directives are a way to teach HTML new tricks. A directive is just a function which executes when the compiler encounters it in the DOM.
  • 15. Event Directives • ngClick • ngDblClick • ngMousedown • ngMouseenter • ngMouseleave • ngMousemove • ngMouseover • ngMouseup • ngChange
  • 16. Other Directive • ngApp • ngBind • ngBindTemplate • ngBindHtml • ngBindHtmlUnsafe • ngHide • ngShow ngCloak ngStyle ngClass ngClassEven ngClassOdd ngDisabled ngChecked ngMultiple ngReadonly ngSelected ngForm ngSubmit ngHref ngSrc
  • 18. Resources Documentation • AngularJS Developer Guide • AngularJS API • AngularJS Tutorial

Notas do Editor

  1. Lazily instantiated – Angular only instantiates a service when an application component depends on it. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.