Developing a sample AngularJS application on the SAP HANA Cloud Platform
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:
- Angular JS as the client side framework that helps in development of UI applications by providing MVC/MVVM features,data binding etc.
- The Northwind OData service as the back-end service for fetching data (of course any RESTful APIs or web services can be used here, not necessarily OData services).
- Bootstrap as the client side framework for styling the application.
Pre-requisites:
- You should have an HCP developer(trial) account to execute the steps mentioned below.
- You should be familiar with basics of developing HTML5 applications,AngularJS and Bootstrap.
Note
- The source code for this application is available at Github. You can follow instructions provided at Github to import and run the application in your HCP trial account.
- While you can use the IDE of your choice(for e.g Eclipse with Angular JS plugins) for developing an HTML5 application on HCP, we will build this application using the SAP Web IDE which is available as a service on HCP.
Step 1: Create a simple HTML5 application using the SAP Web IDE
- Using the SAP Web IDE, create a new HTML5 application. Right click on the Workspace node, select the New > Folder menu. Provide the Folder Name as “angularnorthwindapp“.
- Create the app descriptor file. Right click on the angularnorthwindapp node, select the New > File menu. Provide the File Name as “neo-app.json”.
- Insert the following content into the neo-app.json file and save it.
neo-app.json
{
"welcomeFile": "index.html"
}
- Create a file by name “index.html”. Insert the following content and save.
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Hello World from HCP</h1>
</body>
</html>
- Preview the application by hitting the Run button(or press Alt+F5). You should see a “Hello World” text in the Preview page.
Step 2: Hello HCP from AngularJS!
Next we will add some AngularJS code into the application.
- Bootstrap AngularJS into the application by adding the following script tag into the index.html.
index.html
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
- Replace the content of the index.html file with the content below and save. Here the ng-model and ng-bind directives provided by AngularJS for data binding are used.
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>
- Refresh the Preview page. Enter something in the input field(For e.g. ‘Hello HCP from AngularJS’) and you should see it appear as a text below due to the data binding capabilities of AngularJS.
Step 3: Fetch data from the OData service
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.
- Create a destination file for the northwind service in the HCP cockpit.
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
- Add a route for the northwind service destination by inserting the following code into the neo-app.json file.
neo-app.json
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/destinations/northwind",
"target": {
"type": "destination",
"name": "northwind"
},
"description": "northwind"
}
]
}
- To keep the business logic separate from the UI, create a file named “main.js” under the angularnorthwindapp folder. Insert the code from below.
- This code makes an AJAX call to the northwind service using the $http service from AngularJS. Note that the northwindURL uses the /destinations/northwind/ path defined in the neo-app.json file.
- The response from the server is processed and added as an array of invoices to the $scope object (provided by AngularJS). This will be used for data binding in the UI in the next step.
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);
});
}]);
- Include the main.js file in the index.html
index.html
<script src="main.js"></script>- Bind the data to the UI by looping through the invoices object using the ng-repeat directive.
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>
- Refresh the Preview page. At this point, you should see the invoices on the page with no formatting/styling. Understandably the next step is to add some styling to the UI.
Step 4: Style the application using Bootstrap
- Firstly, bootstrap Bootstrap 🙂 by adding the script tags for Bootstrap and jQuery(Bootstrap has a dependency on jQuery).
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">
- Use the basic table CSS classes from Bootstrap to style the table.
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>
- Refresh the Preview page. You should see a page with a table of Invoices as shown below:
Step 5: Activate the application to make it accessible via a public URL
- Deploy the HTML5 application to HCP by right-clicking on the angularnorthwindapp and selecting Deploy > Deploy to HANA Cloud Platform. In the Deploy Application dialog, leave the defaults and click on the Deploy button.
- In the Successfully Deployed dialog, click on the ‘Open the active version of the application‘ link. You should see the same page as above, with a public URL(available on the internet) that can be shared.
- The deployed application would be accessible on the following URL:
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.
Wow thanks for this blog!!! Nice one!
Its great to see some non-UI5 tech used as the frontend on HCP - thanks for sharing.
Hi,
great blog! I found it necessary to inverse the order of the bootstrap and JQuery script references in index.html; the JQuery reference had to go first - otherwise I had a reference error when running the app ("Bootstrap's JavaScript requires JQuery").
Regards,
Trond
Hi Ashitha,
I am getting mixed content error when I am directly adding url.
I would be great if you can suggest me on that.
This is the code I have used.
var myApp = angular
.module("myModule", [])
.controller("myController",
function($scope, $http) {
$scope.message = "This is Angular!";
$http({
method: 'GET',
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/'
})
.then(function(response) {
$scope.data = response.data;
console.log($scope.data);
console.log($scope.data.value[6]);
});
});
The same works fine when accessed outside webide.
Error : angular.min.js:103 Mixed Content: The page at 'https://webidetesting6118850-p1941948181trial.dispatcher.hanatrial.ondemand…-componentPreload=off&origional-url=index.html&sap-ui-appCacheBuster=..%2F' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://services.odata.org/V4/Northwind/Northwind.svc/'. This request has been blocked; the content must be served over HTTPS.
Thanks,
Ashutosh
Ashitha MS, Great article. I used to work on AngularJS for a year before coming to SAP technology.
I will also share a sample AngularJS app that would communicate with SAP HANA using XSJS.
Hi Ashitha,
I am new to HCP and angular.js.
I have tried using following code, it doesnt work. Can you please check and correct the same:
Thanks in advance
Also for some reason the code snippets in the blog dont work, but when i have used the code from GIT it works perfectly fine 🙂
One question, when I copied the main.js code into Web IDE. I see some errors saying angular not recognized and _ not defined. Should I configure anything in Web IDE so that I dont see such errors ? However code runs fine even with these errors.
Thanks in Advance
Sravan kumar
Hey Sravan,
You are getting that error because "Code Checking" is enabled for your project and the "no-undef" rule is being violated (i.e. 'angular' and '_' are variables that are being used before being defined).
To get around this, open Project Settings > Code Checking > JavaScript, and expand the "Validator Configuration" part.
You will see a JSON structure appearing with a list of global variables defined. Add the following to it:
"angular": "false",
"_": "false",
It should look like this once you're done:
Once you hit "Save" and go back to your code, you will be free of those annoying errors.
Cheers!
Ravi
That helps..Thanks a lot Ravi.
Sorry for late reply
Thank You Sir 🙂
in case if you removed the Authentication=NoAuthentication from neo-app.json then it will ask you to login the SAP to view your application. by that time how we can do logout functionality ?
is angular 2.0 and fiori works? it is possible to use typescript with ui5/fiori? or JavaScript needed?
Great Blog!