溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

發(fā)布時(shí)間:2021-12-18 16:06:32 來源:億速云 閱讀:91 作者:柒染 欄目:互聯(lián)網(wǎng)科技

本篇文章給大家分享的是有關(guān)如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

讓我們首先刷新SAPUI5控制器上的內(nèi)存。我有一個(gè)簡單的xml視圖,其中只包含一個(gè)按鈕:

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

和一個(gè)簡單的控制器:

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

由于屬性controllerName=“buttonutorial”??捶╯imple“在XML視圖中,通過UI5框架創(chuàng)建控制器實(shí)例并與XML視圖實(shí)例連接:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

我們可以在控制臺(tái)中使用JavaScript代碼列出屬于已創(chuàng)建控制器實(shí)例的大量屬性:

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

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

或者您可以簡單地鍵入“this”在控制臺(tái)中,可以看到控制器實(shí)例有很多可用的方法:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

例如,控制器實(shí)例的byId方法被廣泛使用,如果您鍵入此項(xiàng)。在控制臺(tái)中,您可以看到它的實(shí)現(xiàn)只是將調(diào)用委托給這個(gè)。奧維。拜伊德。

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

這是有意義的,因?yàn)槊總€(gè)控制器實(shí)例都通過oView持有對(duì)其主機(jī)視圖的引用,并且控制器與其視圖之間的連接是在函數(shù)connectToView中建立的:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

Angular Controller

您可以從此url使用示例Angular應(yīng)用程序。

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

它由31行源代碼組成:

<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>

當(dāng)您在輸入字段中鍵入新語言并單擊“添加”按鈕時(shí),該語言將添加到上面的列表中:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

首先讓我簡單介紹一下源代碼的概念,然后我將詳細(xì)介紹每一點(diǎn)。

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

(1) 控制器實(shí)例初始化

在Angular引導(dǎo)階段,由于這一行html源代碼,Angular將在第5327行創(chuàng)建一個(gè)新的控制器實(shí)例。您可以將$控制器視為工廠函數(shù)。

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

讓我們看一下工廠函數(shù)的參數(shù)局部變量的內(nèi)容:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

最重要的屬性是$scope,它被傳遞到我們定義的函數(shù)NameCtrl中:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

一旦執(zhí)行了應(yīng)用程序代碼,就會(huì)創(chuàng)建控制器實(shí)例。然而,在Chrome中檢查后,我發(fā)現(xiàn)它只是一個(gè)虛擬實(shí)例,沒有任何重要屬性。相反,數(shù)據(jù)模型和addName函數(shù)被追加并在當(dāng)前范圍內(nèi)可用:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

(2) 調(diào)用add按鈕時(shí)如何調(diào)用作用域?qū)ο笾锌捎玫腶ddFunction

根據(jù)步驟1中的研究結(jié)果,addName函數(shù)位于scope對(duì)象中。我的問題是,當(dāng)我按下add按鈕時(shí),為什么會(huì)調(diào)用它?

實(shí)際上,我已經(jīng)對(duì)角度進(jìn)行了修改。js,添加更多跟蹤,以便您可以輕松找到Angular在引擎蓋下實(shí)現(xiàn)事件注冊(cè)的位置:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

因此,正如預(yù)期的那樣,它被稱為:

如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較

UI5控制器實(shí)例有大量有用的函數(shù)可供使用,對(duì)于Angular,控制器實(shí)例只是一個(gè)虛擬實(shí)例:數(shù)據(jù)模型和事件處理程序函數(shù)位于scope對(duì)象中。

以上就是如何進(jìn)行SAP UI5和Angular里控制器Controller實(shí)現(xiàn)邏輯比較,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI