14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

CompareEventhandlingmechanism:SAPUI5andAngular
PostedbyJerryWanginSAPUI5DeveloperCenteron09Jun201604:52:12
Share

UI5eventhandling
Angulareventhandling

RecentlyIamstudyingAngularinmysparetime.AndIwouldliketowritedownherewhatI
havelearnedaboutAngular,comparingitsdesignwithUI5.InthisblogIwillonlyfocuson
eventhandlingtopic.

IhavealreadyexplainedhowIdoselfstudyonUI5eventhandlingstuffinthis blog,
and AndreasKunzhasgivenverythoroughcommentsonthedesignideabehindthe
nativeeventandsemanticevent,youshouldNOTmissthosecomment

UI5eventhandling
Let'squicklyreviewwhatUI5developersshoulddoiftheyneedtolistentoanevent.Still
usebuttonasexample:

JustcallfunctionattachPressandpassinoureventhandlingfunctionasargument:

ThebuttoninstanceitselfdoesnotownthefunctionattachPress:

Instead,itisprovidedbythenodeinthebuttoninstance'sprototypechain,EventProvider.

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

1/6

14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

WhenattachPressiscalled:

WhenweclickbuttoninUI:

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

2/6

14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

Thisisveryclear.Nowlet'smovetoAngular.
Angulareventhandling
YoucanfindasampleAngularapplicationfromthisurl.ItiswrittenbasedonAngular
1.2.18.

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

3/6

14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

WhenIfirststudythisapplication,theattribute"ngclick="sortField='name'""seemstome
acompletemagic:howcouldafragmentofcodeinhtmlnodeattributeexecuted?

Iamsureitis"ngclick"whichachievesAngular'sspecificwayofeventhandling,soItried
tofigureitoutbydebugging.

Angularframeworkhasitsowninitializationandbootstrapphase,justthesameideaas
UI5.Duringitsbootstrap,AngularwilltraversethehtmlDOMtree(line964,compile
function)andparsethehtmlelementnoderecursively.IfanattributewithAngular
namespace"ng"isdetectedwithinanelementnode,thedetectedattributeiscalled
"directive"inAngularandsomespeciallogicwillbeappliedonthatnode,infunction
"applyDirectivesToNode".

HerebelowishoweventregistrationisdonebyAngularforus:

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

4/6

14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

Let'sconfirmourassumption.IclickhyperlinkinUI:thenativeevent"click"ispassedtothe
wrapperfunctionfninline15330.

Thewrapperfunctioncontainsthelogictoexecute"sortField='name'"specifiedinhtml
sourcecode.
Itscoreisimplementedviatheassignfunction:

Finally,scopeobj(youcanconsiderscopeas"Model"inUI5atthismoment)hasattribute
sortFieldwhichhasbeenassignedwithanewvalue"name",thisishow"sortField=
'name'"isexecuted.

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

5/6

14/06/2016

CompareEventhandlingmechanism:SAPUI5andAn...| SCN

HopethisblogcanhelpyougainaverybasicunderstandingaboutAngularevent
handling

http://scn.sap.com/community/developercenter/frontend/blog/2016/06/09/compareeventhandlingmechanismsapui5andangular

6/6