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:

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的原创文章,请关注公众号"汪子熙":

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值