Post on 04-Aug-2018
• 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
HTMLenhancedforwebapps
DOMmanipulaHoninAngularJSiscontrolledbydirecHveswhichareidenHcaltoHTMLtagsandaPributesindeclaraHon.ThisDeclara8veApproachhelpsdevelopertounderstandthebehaviorofappeasily.
Hence,Controllersonlydealwithdataupdates.NOSpaghe=code!!
YoustartLabs.in(YoustartLabs) 9
WriteLess.DoMore
AcasestudycomparingBackboneJSvsAngularJSappintermsofLinesofcode.
YoustartLabs.in(YoustartLabs) 10
AndMoreAdvantages
• HTMLTemplaHng(Notemplateenginerequired)• MoreMarkup,LessJavaScriptCode• ExcellentTesHngframeworkssupport• PlainOldJavaScriptObjectsforDataModels• FormValidaHonfuncHonaliHes• AsynchronoustaskhandlingusingPromises• YoucanalsouseAngularJSforMobileapps• ExcellentdevelopercommunitySupport
YoustartLabs.in(YoustartLabs) 14