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

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:

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

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]);}

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

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

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

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.

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

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:

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

Angular Controller

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

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

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:

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

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

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

(1) controller instance initialization

During Angular bootstrap phase, due to this line of source code in html, <body ng-controller="”NameCtrl”">, Angular will create a new controller instance in line 5327. You can consider $controller as a factory function.

上一篇:UI5的货币显示格式的逻辑


下一篇:借助Fiddle使用不同版本的UI5库文件进行测试