JS View (DEPRECATED! Use "Typed View" instead: https://sdk.openui5.org/topic/e6bb33d076dc4f23be50c082c271b9f0)

<!DOCTYPE HTML>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/1.120/resources/sap-ui-core.js"
      data-sap-ui-async="true"
      data-sap-ui-compat-version="edge"
      data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
      data-sap-ui-resource-roots='{ "demo": "./" }'
      data-sap-ui-xx-component-preload="off"
      data-sap-ui-xx-wait-for-theme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{"id": "rootComponent"}'></div>
  </body>
</html>

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

  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    },

  });
});

sap.ui.jsview("demo.view.App", {
  getControllerName: function() {
    return "demo.controller.App";
  },
  createContent: function(oController) {
    return new sap.m.App(this.createId("rootApp"), {
      autoFocus: false,
    });
  }
});
// sap.ui.jsview still required for view definition.
// See https://github.com/SAP/openui5/issues/2419

sap.ui.jsview("demo.view.Home", {
  getControllerName: function() {
    return "demo.controller.Home";
  },
  createContent: function(controller) {
    return new sap.m.Page(this.createId("homepage"), {
      title: "Expression Binding in JSView",
      content: [
        new sap.m.ToggleButton(this.createId("toggleButton"), {
          text: "Toggle Visibility",
          pressed: "{/visibility}",
        }).addStyleClass("sapUiTinyMarginEnd"),
        new sap.m.Button({
          text: "Nav To Next",
          iconFirst: false,
          icon: "sap-icon://navigation-right-arrow",
          press: [controller.navToNext, controller],
        }),
      ],
      headerContent: new sap.m.ObjectStatus(this.createId("objectStatus"), {
        text: "OK",
        state: "Success",
        inverted: true,
        visible: "{= !!${/visibility}}",
      }).addStyleClass("sapMObjectStatusLarge"),
    }).addStyleClass("sapUiResponsivePadding--header sapUiResponsiveContentPadding sapUiResponsivePadding--content");
  },
});
// sap.ui.jsview still required for view definition.
// See https://github.com/SAP/openui5/issues/2419

sap.ui.jsview("demo.view.Next", {
  getControllerName: function() {
    return "demo.controller.Next";
  },
  createContent: function(controller) {
    return new sap.m.Page(this.createId("nextpage"), {
      title: "Navigated Page",
    }).addStyleClass("sapUiResponsivePadding--header");
  },
});
// sap.ui.jsview still required for view definition.
// See https://github.com/SAP/openui5/issues/2419

{
  "_version": "1.30.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.90.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "JS",
      "async": true,
      "height": "100%",
      "displayBlock": true
    },
    "routing": {
      "routes": {
        "home": {
          "pattern": "",
          "target": "home"
        },
        "next": {
          "pattern": "next",
          "target": "next"
        }
      },
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "viewLevel": 1
        },
        "next": {
          "id": "nextView",
          "name": "Next",
          "viewLevel": 2
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "viewLevel": 98
        }
      },
      "config": {
        "async": true,
        "type": "View",
        "routerClass": "sap.m.routing.Router",
        "viewType": "JS",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}

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

  return Controller.extend("demo.controller.App", {
    onInit: function() {
      // ...
    },
  });
});

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

  return Controller.extend("demo.controller.Home", {
    onInit: function() {
      // ...
    },

    navToNext: function() {
      UIComponent.getRouterFor(this).navTo("next");
    },
  });
});

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

  return Controller.extend("demo.controller.Next", {
    onInit: function() {
      // ...
    },
  });
});

Since 1.88, [Typed Views](https://sdk.openui5.org/topic/e6bb33d076dc4f23be50c082c271b9f0) should be used in place of the deprecated `JSView` and `sap.ui.jsview`.