disabledhtmldisabled

IAngularJSiAbouttheTutorialAngularJSisaverypowerfulJavaScriptlibrary.
ItisusedinSinglePageApplication(SPA)projects.
ItextendsHTMLDOMwithadditionalattributesandmakesitmoreresponsivetouseractions.
AngularJSisopensource,completelyfree,andusedbythousandsofdevelopersaroundtheworld.
ItislicensedundertheApachelicenseversion2.
0.
AudienceThistutorialisdesignedforsoftwareprofessionalswhowanttolearnthebasicsofAngularJSanditsprogrammingconceptsinsimpleandeasysteps.
ItdescribesthecomponentsofAngularJSwithsuitableexamples.
PrerequisitesYoushouldhaveabasicunderstandingofJavaScriptandanytexteditor.
Aswearegoingtodevelopweb-basedapplicationsusingAngularJS,itwillbegoodifyouhaveanunderstandingofotherwebtechnologiessuchasHTML,CSS,AJAX,etc.
Disclaimer&CopyrightCopyright2014byTutorialsPoint(I)Pvt.
Ltd.
Allthecontentandgraphicspublishedinthise-bookarethepropertyofTutorialsPoint(I)Pvt.
Ltd.
Theuserofthise-bookisprohibitedtoreuse,retain,copy,distributeorrepublishanycontentsorapartofcontentsofthise-bookinanymannerwithoutwrittenconsentofthepublisher.
Westrivetoupdatethecontentsofourwebsiteandtutorialsastimelyandaspreciselyaspossible,however,thecontentsmaycontaininaccuraciesorerrors.
TutorialsPoint(I)Pvt.
Ltd.
providesnoguaranteeregardingtheaccuracy,timelinessorcompletenessofourwebsiteoritscontentsincludingthistutorial.
Ifyoudiscoveranyerrorsonourwebsiteorinthistutorial,pleasenotifyusatcontact@tutorialspoint.
comAngularJSiiTableofContentsAbouttheTutorialiAudienceiPrerequisitesiDisclaimer&CopyrightiTableofContentsii1.
OVERVIEW1GeneralFeatures1CoreFeatures1Concepts2AdvantagesofAngularJS3DisadvantagesofAngularJS4AngularJSDirectives42.
ENVIRONMENT53.
MVCARCHITECTURE9TheModel10TheView10TheController104.
FIRSTAPPLICATION11CreatingAngularJSApplication11ExecutingAngularJSApplication11HowAngularJSIntegrateswithHTML135.
DIRECTIVES14ng-appdirective14ng-initdirective14ng-modeldirective15AngularJSiiing-repeatdirective156.
EXPRESSIONS177.
CONTROLLERS198.
FILTERS22UppercaseFilter22LowercaseFilter22CurrencyFilter22Filter23OrderByFilter239.
TABLES2710.
HTMLDOM31ng-disabledDirective31ng-showDirective31ng-hideDirective31ng-clickDirective3211.
MODULES34ApplicationModule34ControllerModule34UseModules3512.
FORMS39Events39ng-click39ValidateData4013.
INCLUDES4414.
AJAX48AngularJSiv15.
VIEWS52ng-viewDirective52ng-templateDirective52$routeProviderService5316.
SCOPES57ScopeInheritance5717.
SERVICES61UsingFactoryMethod61UsingServiceMethod6118.
DEPENDENCYINJECTION64Value64Factory65Service65Provider66Constant6719.
DIRECTIVES70ng-appdirective70ng-initdirective70ng-modeldirective71ng-repeatdirective7120.
INTERNALIZATION73ExampleUsingDanishLocale73ExampleUsingBrowserLocale74AngularJSvAngularJSisanopen-sourcewebapplicationframework.
Itwasoriginallydevelopedin2009byMiskoHeveryandAdamAbrons.
ItisnowmaintainedbyGoogle.
Itslatestversionis1.
2.
21.
DefinitionofAngularJSasputbyitsofficialdocumentationisasfollows:AngularJSisastructuralframeworkfordynamicwebapplications.
ItletsyouuseHTMLasyourtemplatelanguageandletsyouextendHTML'ssyntaxtoexpressyourapplicationcomponentsclearlyandsuccinctly.
Itsdatabindinganddependencyinjectioneliminatemuchofthecodeyoucurrentlyhavetowrite.
Anditallhappenswithinthebrowser,makingitanidealpartnerwithanyservertechnology.
GeneralFeaturesThegeneralfeaturesofAngularJSareasfollows:AngularJSisaefficientframeworkthatcancreateRichInternetApplications(RIA).
AngularJSprovidesdevelopersanoptionstowriteclientsideapplicationsusingJavaScriptinacleanModelViewController(MVC)way.
ApplicationswritteninAngularJSarecross-browsercompliant.
AngularJSautomaticallyhandlesJavaScriptcodesuitableforeachbrowser.
AngularJSisopensource,completelyfree,andusedbythousandsofdevelopersaroundtheworld.
ItislicensedundertheApachelicenseversion2.
0.
Overall,AngularJSisaframeworktobuildlargescale,high-performance,andeasy-to-maintainwebapplications.
CoreFeaturesThecorefeaturesofAngularJSareasfollows:Data-binding:Itistheautomaticsynchronizationofdatabetweenmodelandviewcomponents.
1.
OVERVIEWAngularJSviScope:Theseareobjectsthatrefertothemodel.
Theyactasagluebetweencontrollerandview.
Controller:TheseareJavaScriptfunctionsboundtoaparticularscope.
Services:AngularJScomeswithseveralbuilt-inservicessuchas$httptomakeaXMLHttpRequests.
Thesearesingletonobjectswhichareinstantiatedonlyonceinapp.
Filters:Theseselectasubsetofitemsfromanarrayandreturnsanewarray.
Directives:DirectivesaremarkersonDOMelementssuchaselements,attributes,css,andmore.
ThesecanbeusedtocreatecustomHTMLtagsthatserveasnew,customwidgets.
AngularJShasbuilt-indirectivessuchasngBind,ngModel,etc.
Templates:Thesearetherenderedviewwithinformationfromthecontrollerandmodel.
Thesecanbeasinglefile(suchasindex.
html)ormultipleviewsinonepageusingpartials.
Routing:Itisconceptofswitchingviews.
ModelViewWhatever:MVWisadesignpatternfordividinganapplicationintodifferentpartscalledModel,View,andController,eachwithdistinctresponsibilities.
AngularJSdoesnotimplementMVCinthetraditionalsense,butrathersomethingclosertoMVVM(Model-View-ViewModel).
TheAngularJSteamrefersithumorouslyasModelViewWhatever.
DeepLinking:DeeplinkingallowstoencodethestateofapplicationintheURLsothatitcanbebookmarked.
TheapplicationcanthenberestoredfromtheURLtothesamestate.
DependencyInjection:AngularJShasabuilt-independencyinjectionsubsystemthathelpsthedevelopertocreate,understand,andtesttheapplicationseasily.
ConceptsThefollowingdiagramdepictssomeimportantpartsofAngularJSwhichwewilldiscussindetailinthesubsequentchapters.
AngularJSviiAdvantagesofAngularJSTheadvantagesofAngularJSare:ItprovidesthecapabilitytocreateSinglePageApplicationinaverycleanandmaintainableway.
ItprovidesdatabindingcapabilitytoHTML.
Thus,itgivesuserarichandresponsiveexperience.
AngularJScodeisunittestable.
AngularJSusesdependencyinjectionandmakeuseofseparationofconcerns.
AngularJSprovidesreusablecomponents.
AngularJSviiiWithAngularJS,thedeveloperscanachievemorefunctionalitywithshortcode.
InAngularJS,viewsarepurehtmlpages,andcontrollerswritteninJavaScriptdothebusinessprocessing.
Onthetopofeverything,AngularJSapplicationscanrunonallmajorbrowsersandsmartphones,includingAndroidandiOSbasedphones/tablets.
DisadvantagesofAngularJSThoughAngularJScomeswithalotofmerits,herearesomepointsofconcern:Notsecure:BeingJavaScriptonlyframework,applicationwritteninAngularJSarenotsafe.
Serversideauthenticationandauthorizationismusttokeepanapplicationsecure.
Notdegradable:IftheuserofyourapplicationdisablesJavaScript,thennothingwouldbevisible,exceptthebasicpage.
AngularJSDirectivesTheAngularJSframeworkcanbedividedintothreemajorparts:ng-app:ThisdirectivedefinesandlinksanAngularJSapplicationtoHTML.
ng-model:ThisdirectivebindsthevaluesofAngularJSapplicationdatatoHTMLinputcontrols.
ng-bind:ThisdirectivebindstheAngularJSapplicationdatatoHTMLtags.
AngularJSixThischapterdescribeshowtosetupAngularJSlibrarytobeusedinwebapplicationdevelopment.
Italsobrieflydescribesthedirectorystructureanditscontents.
Whenyouopenthelinkhttps://angularjs.
org/,youwillseetherearetwooptionstodownloadAngularJSlibrary:ViewonGitHub–Byclickingonthisbutton,youaredivertedtoGitHubandgetallthelatestscripts.
Download–Byclickingonthisbutton,ascreenyougettoseeadialogboxshownas:2.
ENVIRONMENTAngularJSxThisscreenoffersvariousoptionsforselectingAngularJSasfollows:DownloadingandhostingfileslocallyoTherearetwodifferentoptions:LegacyandLatest.
Thenamesthemselvesareself-descriptive.
TheLegacyhasversionlessthan1.
2.
xandtheLatestcomewithversion1.
3.
x.
oWecanalsogowiththeminimized,uncompressed,orzippedversion.
CDNaccess:YoualsohaveaccesstoaCDN.
TheCDNgivesyouaccesstoregionaldatacenters.
Inthiscase,theGooglehost.
TheCDNtransferstheresponsibilityofhostingfilesfromyourownserverstoaseriesofexternalones.
ItalsooffersanadvantagethatifthevisitorofyourwebpagehasalreadydownloadedacopyofAngularJSfromthesameCDN,thereisnoneedtore-downloadit.
WeareusingtheCDNversionsofthelibrarythroughoutthistutorial.
ExampleNowletuswriteasimpleexampleusingAngularJSlibrary.
LetuscreateanHTMLfilemyfirstexample.
htmlshownasbelow:AngularJSxiWelcome{{helloTo.
title}}totheworldofTutorialspoint!