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的原创文章,请关注公众号"汪子熙":
相关推荐
Mobile Angular UI 是个 HTML5 移动端 UI 框架,允许使用 Angular JS 和 Bootstrap 3 来开发移动端应用。 Mobile Angular UI 在 Bootstrap 3 的基础上新增了: switches, overlays, sidebars, scrollable areas, ...
Angular.js跨controller实现参数传递的两种方法.docx
mobile-angular-ui-1.3.3,那个 mobile-angular-ui中文版 无法下载
国人开源的Angular开发界面WebUI
Angular异步加载html、Controller
WebUI4Angular是基于angularjs实现的一套UI组件,主要包括:datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview等等。组件需要使用angularjs1.3以上版本,其中拍照组件cameraScanner另需安装flash...
angular-ui-bootstrap源码与demo完整版
angular-swagger-ui, Swagger用户界面的angularJS实现 angular-swagger-uiangular-swagger-ui 是OpenAPI用户界面的angularJS实现OpenAPI ( 又名 Swagger ) 帮助你记录你的RESTful API 。OpenAPI通过提供集
Angular is a sophisticated technology that aims to create a framework with multi-platform support, including web, mobile and desktop. When I heard the news about Angular 1 being rewritten for Angular ...
Angular-ej2-angular-ui-components.zip,SyncFusion Angular UI组件库为构建现代Web应用程序提供了50多个跨浏览器、响应灵敏且轻量级的Angular UI控件。SyncFusion Angular UI组件库(Essential JS 2),Angularjs于...
前端项目-angular-block-ui,允许您阻止Ajax请求上的用户交互的AngularJS模块。
本篇文章主要介绍了angular中实现控制器之间传递参数的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
今天小编就为大家分享一篇angular中子控制器向父控制器传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
前端项目-angular-ui-sortable,此指令允许您对jqueryui排序。
onsenui-angular2-demo 具有Onsen UI和POC Angular 2.0绑定的简单计划应用程序
学习angular ui-router - 管理状态,有需要的朋友可以参考下。
总结 angular.js路由,angular.js ui-router 用法示例demo,适合初学者使用,简单易懂,无多余代码
主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
Angular-igniteui-angular.zip,Angular的IgniteUI是一个用于构建现代Web应用程序的无依赖性Angular工具包。,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...