Skip to Content

AngularJS - Connect to the OData source

By Jonathan Baker

Step #5: OData is our backend data source. Connect to the public Northwind test data site.

You will learn

In this tutorial series, we will explore another technology for Single Page Application (SPA) development - AngularJS (or just Angular). Angular is a popular web framework in North America, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.


AngularJS series

Step 5: Start to work with the $http service. This service provides a way to asynchronously get data from a server. We will be using the public Northwind test data service to provide this test data.

Change the test data to the OData source

  1. Remove the test data from the JavaScript file.

    In the main.js file, select all of the test data (starting with var testData =, and delete it.

    Don’t forget to save your file.

    delete the test data
  2. Change the line that defines the productList to start with an empty array.

    Select the line $scope.productList = testData;, and change it to

    $scope.productList = [];
    Reset the product list to an empty array
  3. Now we want to add in the HTML call to get the OData information. To do that, we will use the $http service to get the data.

    Change the helloController function to get the $http service from Angular

    function helloController($scope, $http) {
    Get the $http controller from Angular
  4. Now, add in the $get method.

    Update your helloController function and add this code at the bottom:

    var odataUrl = "//";
    $http.get(odataUrl + "Products")
    	.then( function(response) {
    			$scope.productList =;
    			alert("An error occurred");
    Make an OData request
  5. Run your application. The data on the screen should now contain 20 rows, and look like this:

    Display the live OData on the screen

Additional Information

Angular Services

Next Steps

Updated 12/08/2016

Time to Complete

15 Min.



Next Steps

Back to top