AngularJS

FromWikipedia,thefreeencyclopedia

Insoftwaredevelopment,AngularJS(commonlyreferredto
as"Angular")isanopensourcewebapplicationframework
maintainedbyGoogleandbyacommunityofindividual
developersandcorporationstoaddressmanyofthe
challengesencounteredindevelopingsinglepage
applications.Itaimstosimplifyboththedevelopmentandthe
testingofsuchapplicationsbyprovidingaframeworkfor
clientsidemodelviewcontroller(MVC)andmodelview
viewmodel(MVVM)architectures,alongwithcomponents
commonlyusedinrichInternetapplications.
TheAngularJSlibraryworksbyfirstreadingtheHTML
page,whichhasembeddedintoitadditionalcustomtag
attributes.Angularinterpretsthoseattributesasdirectivesto
bindinputoroutputpartsofthepagetoamodelthatis
representedbystandardJavaScriptvariables.Thevaluesof
thoseJavaScriptvariablescanbemanuallysetwithinthe
code,orretrievedfromstaticordynamicJSONresources.
AccordingtoJavaScriptanalyticsserviceLibscore,
AngularJSisusedonthewebsitesofNBC,Walgreens,Intel,
Sprint,ABCNews,andapproximately8,400othersitesout
of1milliontestedinJuly2015.[1]

Contents
1Philosophy
2Scope
3Bootstrapper
4Twowaydatabinding
5Developmenthistory
5.1Releases
5.2Legacybrowsersupport
6Chromeplugin
7Seealso
8References
9Furtherreading
10Externallinks

Philosophy

AngularJS

Developer(s)

BratTechLLC,Googleand
community.

Initialrelease

2009

Stablerelease

1.4.3/July15,2015

Developmentstatus Active
Writtenin

JavaScript

Platform

Crossplatform,seeLegacy
browsersupport

Size

142KiBproduction
1014KiBdevelopment

Type

JavaScriptlibrary

License

MITLicense

Website

angularjs.org
(http://angularjs.org)

AngularJSisbuiltaroundthebeliefthatdeclarativeprogrammingshouldbeusedforbuildinguserinterfacesand
connectingsoftwarecomponents,whileimperativeprogrammingisbettersuitedtodefininganapplication'sbusiness
logic.[2]TheframeworkadaptsandextendstraditionalHTMLtopresentdynamiccontentthroughtwowaydata
bindingthatallowsfortheautomaticsynchronizationofmodelsandviews.Asaresult,AngularJSdeemphasizes
explicitDOMmanipulationwiththegoalofimprovingtestabilityandperformance.
AngularJS'sdesigngoalsinclude:
todecoupleDOMmanipulationfromapplicationlogic.Thedifficultyofthisisdramaticallyaffectedbythe
waythecodeisstructured.
todecoupletheclientsideofanapplicationfromtheserverside.Thisallowsdevelopmentworktoprogress
inparallel,andallowsforreuseofbothsides.
toprovidestructureforthejourneyofbuildinganapplication:fromdesigningtheUI,throughwritingthe
businesslogic,totesting.
AngularimplementstheMVCpatterntoseparatepresentation,data,andlogiccomponents.Usingdependency
injection,Angularbringstraditionallyserversideservices,suchasviewdependentcontrollers,toclientsideweb
applications.Consequently,muchoftheburdenontheservercanbereduced.

Scope
Angularusesthetermscopeinamannerakintothefundamentalsofcomputerscience.
Scopeincomputersciencedescribeswhenintheprogramaparticularbindingisvalid.TheECMA262
specificationdefinesscopeas:alexicalenvironmentinwhichaFunctionobjectisexecutedinclientsideweb
scripts[3]akintohowscopeisdefinedinlambdacalculus.[4]
InAngular,scopeisacertainkindofobject[5]thatitselfcanbeinscopeoroutofscopeinanygivenpartofthe
program,followingtheusualrulesofvariablescopeinJavaScriptlikeanyotherobject.[6]Whenthetermscopeis
usedbelow,itreferstotheAngularscopeobjectandnotthescopeofanamebinding.

Bootstrapper
ThetasksperformedbytheAngularJSbootstrapperoccurinthreephases[7]aftertheDOMhasbeenloaded:
1. CreationofanewInjector
2. CompilationofthedirectivesthatdecoratetheDOM
3. Linkingofalldirectivestoscope
AngularJSdirectivesallowthedevelopertospecifycustomandreusableHTMLlikeelementsandattributesthat
definedatabindingsandthebehaviorofpresentationcomponents.Someofthemostcommonlyuseddirectivesare:
ngapp
DeclarestherootelementofanAngularJSapplication,underwhichdirectivescanbeusedtodeclare
bindingsanddefinebehavior.
ngbind
SetsthetextofaDOMelementtothevalueofanexpression.Forexample,<span ng-bind="name">
</span>willdisplaythevalueofnameinsidethespanelement.Anychangestothevariablenameinthe

application'sscopearereflectedinstantlyintheDOM.
ngmodel
Similartongbind,butestablishesatwowaydatabindingbetweentheviewandthescope.
ngmodeloptions
Allowstuninghowmodelupdatesaredone.
ngclass
Allowsclassattributestobedynamicallyloaded.
ngcontroller
SpecifiesaJavaScriptcontrollerclassthatevaluatesHTMLexpressions.
ngrepeat
Instantiateanelementonceperitemfromacollection.
ngshow&nghide
Conditionallyshoworhideanelement,dependingonthevalueofabooleanexpression.Showandhideis
achievedbysettingtheCSSdisplaystyle.
ngswitch
Conditionallyinstantiateonetemplatefromasetofchoices,dependingonthevalueofaselectionexpression.
ngview
ThebasedirectiveresponsibleforhandlingroutesthatresolveJSONbeforerenderingtemplatesdrivenby
specifiedcontrollers.
ngif
Basicifstatementdirectivethatallowtoshowthefollowingelementiftheconditionsaretrue.Whenthe
conditionisfalse,theelementisremovedfromtheDOM.Whentrue,acloneofthecompiledelementisre
inserted
ngaria
AmoduleforaccessibilitysupportofcommonARIAattributes.
nganimate
AmoduleprovidessupportforJavaScript,CSS3transitionandCSS3keyframeanimationhookswithin
existingcoreandcustomdirectives.

Twowaydatabinding
AngularJS'twowaydatabindingisitsmostnotablefeature,anditreducesthecomplexityofcodewithrelieftothe
serverbackendoftemplatingresponsibilities.Instead,templatesarerenderedinplainHTMLaccordingtodata
containedinascopedefinedinthemodel.The$scopeserviceinAngulardetectschangestothemodelsectionand
modifiesHTMLexpressionsintheviewviaacontroller.Likewise,anyalterationstotheviewarereflectedinthe
model.ThiscircumventstheneedtoactivelymanipulatetheDOMandencouragesbootstrappingandrapid
prototypingofwebapplications.[8]AngularJSdetectschangesinmodelsbycomparingthecurrentvalueswith
valuesstoredearlierinaprocessofdirtychecking,unlikeEmber.jsandBackbone.jsthattriggerlistenerswhenthe
modelvaluesarechanged.[9]

Developmenthistory
AngularJSwasoriginallydevelopedin2009byAdamAbrons[10]atBratTechLLC[11]asthesoftwarebehindan
onlineJSONstorageservice,thatwouldhavebeenpricedbythemegabyte,foreasytomakeapplicationsforthe
enterprise.Thisventurewaslocatedatthewebdomain"GetAngular.com",[11]andhadafewsubscribers,before
thetwodecidedtoabandonthebusinessideaandreleaseAngularasanopensourcelibrary.

Abronslefttheproject,butHevery,whoworksatGoogle,continuestodevelopandmaintainthelibrarywith
fellowGoogleemployeesIgorMinrandVojtaJna.[12]

Releases
AsofJuly15,2015,release1.4.3(codenamefoamacceleration
(https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.4.3))isthecurrentstableversion.
Thecodenamesaresuperpowerrelated,composedoftwohyphenjoinedwords,shouldsoundfun/crazy/
cool,andarepubliclysubmittedandvotedbyusers.[13]

Legacybrowsersupport
Versions1.2andlaterofAngularJSdonotsupportInternetExplorerversions6or7.[14]Versions1.3andlaterof
AngularJSdroppedsupportforInternetExplorer8.[15]

Chromeplugin
InJuly2012,theAngularteambuiltapluginfortheGoogleChromebrowsercalledBatarang
(https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk),[16]thatimprovesthedebugging
experienceforwebapplicationsbuiltwithAngular.Theextensionaimstoallowforeasydetectionofperformance
bottlenecksandoffersaGUIfordebuggingapplications.[17]Theextensionisnotcompatiblewithrecentreleases
(afterv1.2.x)ofAngular.[18]

Seealso
Backbone.js
Ember.js
Knockout.js
MEAN(softwarebundle)
React.js

References
1. http://libscore.com/?#angular
2. "WhatIsAngular?"(http://docs.angularjs.org/guide/introduction).Retrieved12February2013.
3. "AnnotatedECMAScript5.1,Section10.2LexicalEnvironments"(http://es5.github.io/#x10.2).Retrieved
20150103.
4. Barendregt,HenkBarendsen,Erik(March2000),IntroductiontoLambdaCalculus
(ftp://ftp.cs.ru.nl/pub/CompMath.Found/lambda.pdf)(PDF)
5. "AngularJS:DeveloperGuide:Scopes"(https://docs.angularjs.org/guide/scope).Retrieved20150103.
6. "ECMA2623indetail.Chapter4.Scopechain."(http://dmitrysoshnikov.com/ecmascript/chapter4scopechain/).
Retrieved20150103.
7. "WritingDirectives"(http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLJUxRYO87UWA).angularjs.org.
November28,2012.Retrieved20130721.
8. "5AwesomeAngularJSFeatures"(http://net.tutsplus.com/tutorials/javascriptajax/5awesomeangularjsfeatures/).

9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Retrieved13February2013.
MiskoHevery."Databindinginangularjs"(http://stackoverflow.com/a/9693933/146423).Retrieved20140309.
"HelloWorld,<angular/>ishere"(http://misko.hevery.com/2009/09/28/helloworldangularishere/).Retrieved
20141012.
"GetAngular"(http://web.archive.org/web/20100413141437/http://getangular.com/).Angular/BRATTech.LLC.
Retrieved20141012.
"Contributorstoangular/angular.js(GitHub)"(https://github.com/angular/angular.js/graphs/contributors).Retrieved
20141012.
"AngularJSCodeNamesGoogleModerator"(https://www.google.com/moderator/#16/e=a62cb).Google.
Retrieved20141012.
"AngularJS:DeveloperGuide:InternetExplorerCompatibility"(https://docs.angularjs.org/guide/ie).Google.
Retrieved20141012.
Minar,Igor."AngularJS1.3:anewreleaseapproaches"(http://angularjs.blogspot.com/2013/12/angularjs13new
releaseapproaches.html).AngularJSBlog.Retrieved20141012.
"angular/angularjsbatarang(GitHub)"(https://github.com/angular/angularjsbatarang).Retrieved20141012.
Ford,Brian."IntroducingtheAngularJSBatarang"(http://angularjs.blogspot.com/2012/07/introducingangularjs
batarang.html).AngularJSBlog.Retrieved20141012.
"batarangChromeextensionforAngularJSappearsbroken"
(http://stackoverflow.com/questions/23506526/batarangchromeextensionforangularjsappearsbroken).

Furtherreading
Green,BradSeshadri,Shyam(March22,2013).AngularJS(http://shop.oreilly.com/product/0636920028055.do)
(1sted.).O'ReillyMedia.p.150.ISBN9781449344856.
Kozlowski,PawelDarwin,PeterBacon(August23,2013).MasteringWebApplicationDevelopmentwith
AngularJS(http://www.packtpub.com/angularjswebapplicationdevelopment/book)(1sted.).PacktPublishing.
p.372.ISBN9781782161820.
Ruebbelke,Lukas(January1,2015).AngularJSinAction(1sted.).ManningPublications.p.325.ISBN978
1617291333.

Externallinks
Officialwebsite(http://www.angularjs.org/,%20https://angular.io)
WikimediaCommonshas
Angular2DeveloperPreview(https://angular.io/)
mediarelatedtoAngularJS.
AngularJSModulesRepository(http://ngmodules.org/)
BuiltwithAngularJS(http://builtwith.angularjs.org/)
AngularJSatGoogleGroups(https://groups.google.com/forum/?fromgroups#!forum/angular)
AngularJSatGoogle+(https://plus.google.com/+AngularJS/posts)
BatarangChromeplugin(https://github.com/angular/angularjsbatarang)
NGCONF2014VideosandSlides(http://ngconf.nglearn.org/)
NGEUROPE2014VideosandSlides(http://nglearn.org/2014/11/NGEUROPE2014/#)
NGCONF2015VideosandSlides(https://medium.com/angularjsmeetupsouthlondon/angularngconf
2015media25dbe6250154)
AngularJSDeveloperCommunity(http://angularspot.com)
ComparisonofAngularJSapplicationstarters(http://www.dancancro.com/comparisonofangularjs
applicationstarters/)
AngularJSMeetupGroups(http://www.meetup.com/find/?
allMeetups=false&keywords=angularjs&radius=Infinity&sort=member_count)
Retrievedfrom"https://en.wikipedia.org/w/index.php?title=AngularJS&oldid=673641778"

Categories: JavaScriptlibraries Ajax(programming) Googlesoftware RichInternetapplicationframeworks

SoftwareusingtheMITlicense
Thispagewaslastmodifiedon29July2015,at14:40.
TextisavailableundertheCreativeCommonsAttributionShareAlikeLicenseadditionaltermsmayapply.
Byusingthissite,youagreetotheTermsofUseandPrivacyPolicy.Wikipediaisaregisteredtrademark
oftheWikimediaFoundation,Inc.,anonprofitorganization.