SAP UI5和Angular的事件处理机制比较

简介: SAP UI5和Angular的事件处理机制比较

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:

image.pngimage.pngimage.pngimage.pngimage.pngWhen 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”.

image.pngimage.pngimage.png

相关文章
|
26天前
|
存储 数据库 容器
深入介绍 SAP CRM 附件存储的底层实现机制
深入介绍 SAP CRM 附件存储的底层实现机制
21 0
|
4月前
|
存储 应用服务中间件 调度
关于 SAP ABAP 锁机制的一些疑问和解答
关于 SAP ABAP 锁机制的一些疑问和解答
29 0
|
4月前
|
调度 数据库
什么是 SAP Lock 机制中的 Lock Table
什么是 SAP Lock 机制中的 Lock Table
21 0
|
4月前
SAP ABAP Lock 的 Collision Check 机制介绍
SAP ABAP Lock 的 Collision Check 机制介绍
17 0
|
4月前
|
应用服务中间件 API 数据库
SAP ABAP 应用程序中的锁机制和工作原理介绍试读版
SAP ABAP 应用程序中的锁机制和工作原理介绍试读版
35 0
|
4月前
|
缓存 Java C++
SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
Spartacus 在技术和架构( library 发布方式 vs 模板发布方式,headless vs embedded,Angular vs JSP 技术栈)等各方面,都是一种全面的从 Accelerator 的完整范式转变。因此,对于 Commerce Cloud 已经使用 Accelerator 的客户来说,并没有直接的方法可以从基于 Accelerator 的 Storefront 迁移到使用 Spartacus library 的店面。
40 0
|
4月前
|
中间件
Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
43 0
|
4月前
|
前端开发 API
Angular HTTPClient API 在 SAP 电商云中的使用
Angular HTTPClient API 在 SAP 电商云中的使用
36 0
|
5月前
|
存储 机器学习/深度学习 架构师
SAP 软件的精髓之一:各种各样的决定机制 - Determination Logic
SAP 软件的精髓之一:各种各样的决定机制 - Determination Logic
53 0
|
5月前
|
Web App开发 自然语言处理 前端开发
SAP UI5 应用开发教程之一百零一 - SAP UI5 应用的 Locale 决定机制试读版
SAP UI5 应用开发教程之一百零一 - SAP UI5 应用的 Locale 决定机制试读版
34 0