The SAP HANA Cloud Platform is a development platform based on open standards. The platform provides developers with the flexibility to use frameworks/tools of their choice for application development. Let's take the case of developing the user interface. While SAP UI5 is SAP's recommended client side framework for developing business applications, HCP provides the flexibility of using any HTML5/JavaScript based framework like ReactJS, AngularJS, Bootstrap.
In this blog, we will develop an HTML5 application on HCP using:
neo-app.json
{
"welcomeFile": "index.html"
}
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Hello World from HCP</h1>
</body>
</html>
Step 2: Hello HCP from AngularJS!
Next we will add some AngularJS code into the application.
index.html
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
index.html
<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<body>
<div ng-app="nwApp">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Next step is to fetch data from the back-end by making an HTTP GET call to the Northwind OData service. This will be done using HTTP destinations in HCP.
northwind
Description=Northwind OData Services
Type=HTTP
Authentication=NoAuthentication
WebIDEUsage=odata_gen
Name=northwind
WebIDEEnabled=true
CloudConnectorVersion=2
URL=http://services.odata.org
ProxyType=Internet
WebIDESystem=Northwind
neo-app.json
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/destinations/northwind",
"target": {
"type": "destination",
"name": "northwind"
},
"description": "northwind"
}
]
}
main.js
angular.module("myapp", []).controller('NorthwindController',['$scope','$http', function($scope,$http) {
var northwindURL='/destinations/northwind/V4/Northwind/Northwind.svc/Invoices?$top=15';
$http({
method: 'GET',
url:northwindURL
}).then(function successCallback(response) {
var results = response.data.value;
var invoices=[];
_.each(results,function(result){
var invoice={};
invoice.product = result.ProductName;
invoice.unitprice = result.UnitPrice;
invoice.quantity= result.Quantity;
invoice.totalcost = invoice.unitprice*invoice.quantity;
invoices.push(invoice);
});
$scope.invoices=invoices;
}, function errorCallback(response) {
alert("Error while fetching invoices"+ response);
});
}]);
index.html
<script src="main.js"></script>
index.html
<body ng-app = "myapp">
<div ng-controller = "NorthwindController" >
<div class="container">
<h3>Invoices</h3>
<div ng-repeat="invoice in invoices">
<h3>{{invoice.quantity}} X {{invoice.product}}</h3>
<h3>{{invoice.unitprice}}</h3>
<h3>{{invoice.totalcost}}</h3>
</div>
</div>
</div>
</body>
index.html
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
index.html
<div ng-controller = "NorthwindController" >
<div class="container" style="margin-top:80px;">
<h3><strong>Invoices</strong></h3>
<table class="table table-hover table-bordered" style="margin-top:30px">
<thead>
<tr>
<th>Product</th>
<th>Unit Price</th>
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in invoices">
<td>{{invoice.quantity}} X {{invoice.product}}</td>
<td>{{invoice.unitprice}}</td>
<td>{{invoice.totalcost}}</td>
</tr>
</tbody>
</table>
</div>
</div>
https://angularnorthwindapp-pXXXXXtrial.dispatcher.hanatrial.ondemand.com.
Note: Replace pXXXX with the SCN User ID that you provided during registration.
And you're done! You have a basic AngularJS application running on HCP.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
13 | |
10 | |
10 | |
7 | |
6 | |
5 | |
5 | |
5 | |
5 | |
4 |