SAP UI5和Angular里控制器(Controller)实现逻辑比较 -

JerryWang_SAP

浏览: 1058037 次
性别:
来自: 成都

最近访客更多访客>>

yangguangpiaosa

lesliehanhan

meixianping

一往无前bhz

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1528)

社区版块

存档分类

2021-03 ( 50)
2021-02 ( 56)
2021-01 ( 62)
更多存档...

SAP UI5和Angular里控制器(Controller)实现逻辑比较

SAP SAP云平台 SAP Cloud Platform Cloud SAP UI5

Let’s first refresh our memory on SAPUI5 controller. I have a simple xml view which only contains a button:

<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple">
<common:Button text="Jerry" id="jerryButton"/>
</core:View>

And a simple controller:

sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
onInit : function() {
  debugger;
}
  });}
);

due to the attribute controllerName=”buttontutorial.view.simple” in XML view, the controller instance is created and connect with XML view instance by UI5 framework:

And we can use JavaScript code in console to list the larget number of attributes belonging to created controller instance:

for( var name in this ) { console.log("attribute: " + name + " value: " + this[name]);}

Or you can simply type “this.” in console, and see there are lots of methods available for controller instance:

For example, byId method of controller instance is widely used, if you type this.byId in console, you can see its implementation just delegates the call to this.oView.byId.

This makes sense since every controller instance holds a reference to its host view via oView, and the connection between controller and its view is established in function connectToView:

Angular Controller

You can play with the sample Angular application from this url.

It consists of 31 lines of source code:

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular/angular.js"></script>
    <script>
      function NameCtrl($scope){
        $scope.names = ['ABAP', 'Java'];
        $scope.addName = function() {
          if( $scope.names.indexOf($scope.enteredName) != -1){
            alert("duplicate key is not allowed in list: " + $scope.enteredName);
            $scope.enteredName = '';
            return;
          }
          $scope.names.push($scope.enteredName);
          $scope.enteredName = '';
        };
    }
    </script>
  </head>
  <body ng-controller="NameCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}
      </li>
    </ul>
    <form ng-submit="addName()">
      <input type="text" ng-model="enteredName">
      <input type="submit" value="add">
    </form>
  </body>
</html>

When you type a new language in input field and click “Add” button, the language will be added into list above:

Let me first briefly introduce the idea of source code, then I will go through with each point in detail.

(1) controller instance initialization

During Angular bootstrap phase, due to this line of source code in html, , Angular will create a new controller instance in line 5327. You can consider $controller as a factory function.

Let’s have a look at the content of argument locals for factory function:

The most important attribute is $scope, which is passed into function NameCtrl defined by us:

Once our application code is executed, controller instance is created. However, after checking it in Chrome, I found it is just a dummy instance without any important attribute. Instead, the data model and addName function are appended and available in current scope:

(2) How addFunction available in scope object will be called when add button is called

Based on study result in step1, the addName function is located in scope object. My question is, when I press add button, why is it called?

In previous blog Compare Event handling mechanism: SAPUI5 and Angular, I already introduced that Angular does event handler registration automatically for us, as long as it detects the directive like this:

.

Actually I have made modifications on angular.js, adding more trace so that you can easily find where Angular achieves event registration under the hood:

So it is called as expected:

Summary

UI5 controller instance has a large number of useful functions available to use, and for Angular, controller instance is just a dummy one: data model and event handler function are located in scope object instead.

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

0
顶

1
踩

分享到：

SAP UI5和Vue的双向绑定比较 | SAP UI5和Angular的事件处理机制比较

2020-10-23 10:39
浏览 342
评论(0)
分类:企业架构
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

SAP UI5和Angular里控制器(Controller)实现逻辑比较

Angular Controller

.

Summary

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

SAP UI5和Angular里控制器(Controller)实现逻辑比较

Angular Controller

.

Summary

评论

发表评论

相关推荐

最近访客更多访客>>