Recently I am studying Angular in my spare time. And I would like to write down here what I have learned about Angular, comparing its design with UI5. In this blog I will only focus on event handling topic.
I have already explained how I do self study on UI5 event handling stuff in this blog , and Andreas Kunz has given very thorough comments on the design idea behind the native event and semantic event, you should NOT miss those comment
UI5 event handling
Let’s quickly review what UI5 developers should do if they need to listen to an event. Still use button as example:
Just call function attachPress and pass in our event handling function as argument:
The button instance itself does not own the function attachPress:
Instead, it is provided by the node in the button instance’s prototype chain, EventProvider.
When attachPress is called:
When we click button in UI:
This is very clear. Now let’s move to Angular.
Angular event handling
You can find a sample Angular application from this url. It is written based on Angular 1.2.18.
When I first study this application, the attribute “ng-click=”sortField = ‘name'”” seems to me a complete magic: how could a fragment of code in html node attribute executed?
I am sure it is “ng-click” which achieves Angular’s specific way of event handling, so I tried to figure it out by debugging.
Angular framework has its own initialization and bootstrap phase, just the same idea as UI5. During its bootstrap, Angular will traverse the html DOM tree ( line 964, compile function ) and parse the html element node recursively. If an attribute with Angular namespace “ng” is detected within an element node, the detected attribute is called “directive” in Angular and some special logic will be applied on that node, in function “applyDirectivesToNode”.
Here below is how event registration is done by Angular for us:
Let’s confirm our assumption. I click hyperlink in UI: the native event “click” is passed to the wrapper function fn in line 15330.
The wrapper function contains the logic to execute “sortField = ‘name'” specified in html source code. Its core is implemented via the assign function:
Finally, scope obj ( you can consider scope as “Model” in UI5 at this moment ) has attribute sortField which has been assigned with a new value “name”, this is how “sortField = ‘name’” is executed.
Hope this blog can help you gain a very basic understanding about Angular event handling.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关推荐
UI5 Web组件Angular示例应用程序 示例应用程序演示了的用法。 它显示了如何使用嵌套的组件和自举的Angular构建来绑定属性,订阅事件。 该项目是使用引导的。 先决条件 ( 8.5或更高版本 :warning: ) 入门 使用,...
UI5 Web组件什么是? 由轻量级框架(压缩约20K)驱动的一组丰富的企业级可重用UI元素。 适用于构建从静态网站到复杂Web应用程序的所有内容。 可用于任何当前或将来的Web开发框架(React,Angular,Vue等)。 实施并...
SAP Fundamentals是一个轻量级的表示层,可以与您选择的UI框架(例如Angular,React,Vue等)一起使用。 借助Fundamentals的样式表和HTML标签库,开发人员可以在任何基于Web的技术中构建一致的Fiori应用程序。 ...
用于UI5 Web组件 伺服器 SAP Cloud平台 Koa,express,Spark,Jooby,Sanic,Django,Pyramid,Flask,Tornado ... 应用框架:electronic,NW.js ... 博客: 内容 NodeJS和Python 先决条件 ABAP后端:从最新版本降...
荣誉低级前锋:Angular,Vue和Ember。 高级框架。 $ mol具有许多可定制的ui组件。 荣誉高级固件:Ext,OpenUI5。 平台。 $ mol还不适合。 荣誉平台:Drupal,SAP,1C。产品特点。 只需结帐并使用即可。 。 在所有...
图形用户界面:今天,它将是一个使用SAPUI5,OpenUI5,Angular,React或纯HTML5的Web应用程序。 后端:Web应用程序调用后端服务,该服务将操作转换为数据库命令。 示例:订单类型的列表控件应填充所有允许的订单...
为中小型和大型组织构建ERP应用为现有ERP重新编写/构建新的CRM GUI应用在不更改数据库的情况下将旧软件转换为新的App / UI(桌面和移动) 将现有的ERP迁移到新平台为现有的Oracle,PeopleSoft,SAP或Siebel CRM或...
只是一个非常简单的vue / w3css TODO-List(第一次使用vue.js-前端通常为Angular / SAPUI5)
但是,我们仍在开发和增强它。 :rocket: 实际观看 :sparkles: 产品特点 我们的实施支持所有Spartacus B2C店面功能,包括:购物车,结帐,收藏,搜索,产品页面,类别页面等。 我们还在提供了样式指南。 :busts_...
基本库样式是一个轻量级的表示层,可以与您选择的UI框架(例如Angular,React,Vue等)一起使用。 借助基本库样式,样式表库和HTML标签,开发人员可以在任何基于Web的技术中构建一致的Fiori应用程序。 进一步了解 ...
用SAPUI5编写的现有Call Tool与使用Angular JS编写的较新版本之间的比较。 结果 节省大量内存 用法 您可以放到文件夹上,然后使用Notepad ++或更好的Brackets或Visual Studio进行浏览 额外的 根本无法保证使用