Shulou(Shulou.com)06/01 Report--

This article to share with you is about how to SAP UI5 and Angular Controller implementation logic comparison, Xiaobian think quite practical, so share to everyone to learn, I hope you can read this article after harvest, not much to say, follow Xiaobian to see it.

Let's first refresh the memory on the SAPUI5 controller. I have a simple xml view that contains only one button:

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

Because attribute controllerName="buttontutorial". View simple"In XML view, create controller instances through UI5 framework and connect with XML view instances:

We can use JavaScript code in the console to list a number of properties belonging to the created controller instance:

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

Or you can simply type "this" In the console, you can see that there are many methods available for controller instances:

For example, the byId method of a controller instance is widely used if you type this. In the console, you can see that its implementation simply delegates calls to this. Ovie. Bayed.

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

Angular Controller

You can use the sample Angular application from this url.

It consists of 31 lines of source code:

Angular.js Example 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 = ''; }; } {{name}}

When you type a new language in the input field and click the Add button, that language is added to the list above:

Let me first briefly introduce the concept of source code, and then I'll go through each point in detail.

(1) Controller instance initialization

During the Angular boot phase, Angular creates a new controller instance at line 5327 due to this line of html source code. You can think of the $controller as a factory function.

Let's look at the contents of the parameter local variables of the factory function:

The most important attribute is $scope, which is passed into the NameCtrl function we define:

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

(2) How to call addFunction available in scope object when calling add button

Based on the findings in step 1, the addName function is located in the scope object. My question is, when I press the add button, why is it called?

Actually, I've changed the angle. js, add more tracking so you can easily find where Angular implements event registration under the hood:

Thus, as expected, it is called:

UI5 controller instances have a number of useful functions available, but for Angular, the controller instance is just a virtual instance: the data model and event handler functions reside in the scope object.

The above is how to make a logical comparison between SAP UI5 and Angular Controller implementation. Xiaobian believes that some knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.