AngularJSMV*FrameworkforSinglePageWebApps

YoustartLabs.in(YoustartLabs) 1

•  UnderstandingMV*structureofAngularJS•  UnderstandingTwo-waydynamicbinding•  UnderstandingSingle-Page-ApplicaHons•  UnderstandingDeclaraHveApproachofAngularJs•  AdvantagesofusingAngularJS•  ComparingAngularJSwithsimilarframeworks

ObjecHves

YoustartLabs.in(YoustartLabs) 2

AngularJSisanopen-sourceJavascriptMVC(orbePerMV*)frameworkcreatedbyGoogletobuilddynamicwebapplicaHonswithaproperarchitecture.ItenhancesthecapabiliHesofHTMLandletsyoucreateSinglePagedynamicwebapps.

TheotherpopularJavaScriptwebframeworksareBackbone.js,Ember.jsetc.

WhatisAngularJS?

YoustartLabs.in(YoustartLabs) 3

SinglePageApplicaHons

Asingle-pageapplicaHon(SPA),isawebapplicaHonorwebsitethatfitsonasinglewebpagewiththegoalofprovidingamorefluiduserexperienceakintoadesktopapplicaHon.

YoustartLabs.in(YoustartLabs) 4

ProblemwithMVCFrameworks

InatypicalMVCframework,developerhastocodetheupdatemechanismforviewormodel.HoweverAngularJSframeworkautomaHcallyupdatesmodel(data)orviewaccordingtochangesmadeinanyoneofthem.

YoustartLabs.in(YoustartLabs) 5

MVCframeworksgenerallycombinesmodelwithtemplateandgenerateview.ThisapproachhasamajordrawbackwhenitcomestoupdaHng.ThisisOne-wayBinding

JavaScriptMVCs:Howtheydo

YoustartLabs.in(YoustartLabs) 6

AngularJSdealswiththeproblembyconHnuouslyupdaHngmodelandviewonitsown.Thisistwo-waydatabinding

AngularJSMVC:HowitDoes

YoustartLabs.in(YoustartLabs) 7

AngularWayofThingsProperseparaHonofconcerns

YoustartLabs.in(YoustartLabs) 8

HTMLenhancedforwebapps

DOMmanipulaHoninAngularJSiscontrolledbydirecHveswhichareidenHcaltoHTMLtagsandaPributesindeclaraHon.ThisDeclara8veApproachhelpsdevelopertounderstandthebehaviorofappeasily.

Hence,Controllersonlydealwithdataupdates.NOSpaghe=code!!

YoustartLabs.in(YoustartLabs) 9

WriteLess.DoMore

AcasestudycomparingBackboneJSvsAngularJSappintermsofLinesofcode.

YoustartLabs.in(YoustartLabs) 10

CompleteSetoftoolsforSPADevelopment

AngularToolset

YoustartLabs.in(YoustartLabs) 11

JobTrends

YoustartLabs.in(YoustartLabs) 12

PopularityTrend

YoustartLabs.in(YoustartLabs) 13

AndMoreAdvantages

•  HTMLTemplaHng(Notemplateenginerequired)•  MoreMarkup,LessJavaScriptCode•  ExcellentTesHngframeworkssupport•  PlainOldJavaScriptObjectsforDataModels•  FormValidaHonfuncHonaliHes•  AsynchronoustaskhandlingusingPromises•  YoucanalsouseAngularJSforMobileapps•  ExcellentdevelopercommunitySupport

YoustartLabs.in(YoustartLabs) 14

CompaniesusingAngularJS

VEVOGeneralMotorsisusingAngularintheircarsHBOmobilesiteforiPadVirginAmericawholesiteasanAngularappSonyinthePS3youtubeappGoogle

YoustartLabs.in(YoustartLabs) 15