https://sapui5.hana.ondemand.com/#/topic/4cfa60872dca462cb87148ccd0d948ee

在這一步中，我們將所有的UI資源都封裝在component元件中，而不依賴index.html。

新建Component檔案， 完整路徑 webapp/Component.js， 程式碼如下

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
], function(UIComponent, JSONModel, ResourceModel) {
    
 
"use strict";
    return UIComponent.extend("zdemo_step1.Component", {
        //設定metadata資訊，裡面包含我們預設的檢視
        metadata: {
            "rootView": {
                "viewName": "zdemo_step1.view.App",
                "type": "XML",
                "async": true,
                "id": "app"
            }
        },
        init: 
 
function() {
            // Component元件初始化設定
            UIComponent.prototype.init.apply(this, arguments);
            // 給Component元件 設定模型jsonModel
            var oJsonData = {
                recipient: {
                    name: "World"
                }
            };
            var oJSONModel = new
 
 JSONModel(oJsonData);
            this.setModel(oJSONModel, "jsonModel");
            //給Component元件 設定模型i18n
            var i18nModel = new ResourceModel({
                bundleName: "zdemo_step1.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
    });
});

修改App.controller.js檔案，刪除裡面的onInit（其實是移動到Component.js中），程式碼如下

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
    ], function(Controller, MessageToast, JSONModel, ResourceModel){
        
    return Controller.extend("zdemo_step1.controller.App",{
        onShowHello: function(){
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name");
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);
            MessageToast.show(sMsg);
        }
    });
});

修改index.js檔案

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function(ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "zdemo_step1",
        settings: {
            id: "walkthrough"
        },
        async: true
    }).placeAt("content");
});

以前我們在index.js檔案中，建立了檢視控制元件並顯示我們的 App 檢視。現在我們只需要建立一個元件容器，他會自動載入我們的Component.js檔案，並開啟裡面rootView檢視

執行(結果和上一步一樣，只是程式碼的組織方式改變了）