<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Name Your App</title>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{ "sap.ui.namespace": "./"}'>
</script>
<script>
new sap.ui.core.ComponentContainer({
name : "sap.ui.namespace"
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
The UI5 application, gets initialized from it index.html file. Here in this blog I would like to highlight the main function of each field.
The first line which gets executed here is called bootstraping, it initializes the sap.ui core libraries.
data-sap-ui-libs - The required libraries has be declared here like sap.m, sap.ui.commons, sap.ui.layout and so on
data-sap-ui-theme - This is the place where you can mention the look and feel of your application. By default the theme is Blue Crystal. We have few other theme like Gold Reflection and High Contrast
data-sap-ui-xx-bindingSyntax - If you need to bind the values within your application like formatter.js, then you need to mention it.
data-sap-ui-resourceroots - The namespace of the application needs to be mentioned
sap.ui.core.ComponentContainer - This part navigates your application to the Component.JS file to get more information