Ready to get started?

Learn more about CData Cloud Hub or sign up for a free trial:

Learn More

Using AngularJS to Build Dynamic Web Pages with Magento Data

Use the CData Cloud Hub to create Magento OData feeds and build single-page applications with live Magento data.

AngularJS (Angular) is a structural framework for dynamic web apps and can be paired with the CData Cloud Hub to build single-page applications (SPAs) with access to live data from Magento. The CData Cloud Hub creates a virtual database for Magento and can be used to generate an OData API (natively consumable from Angular) for Magento. This article will walk through setting up the CData Cloud Hub and creating a simple SPA that has live access to Magento data. The SPA will dynamically build and populate an HTML table.

Configuring Cloud Hub

To work with live Magento data in our Angular app, we need to connect to Magento from Cloud Hub, provide user access to the new virtual database, and create OData endpoints for the Magento data.

Add a Cloud Hub User

Create a User to connect to Magento from Reveal through Cloud Hub.

  1. Click Users -> Add
  2. Configure a User
  3. Click Save Changes and make note of the Authtoken for the new user

Connect to Magento from Cloud Hub

CData Cloud Hub uses a straightforward, point-and-click interface to connect to data sources and generate APIs.

  1. Open Cloud Hub and click Databases
  2. Select "Magento" from Available Data Sources
  3. Enter the necessary authentication properties to connect to Magento.

    Magento uses the OAuth 1 authentication standard. To connect to the Magento REST API, you will need to obtain values for the OAuthClientId, OAuthClientSecret, and CallbackURL connection properties by registering an app with your Magento system. See the "Getting Started" section in the help documentation for a guide to obtaining the OAuth values and connecting.

    You will also need to provide the URL to your Magento system. The URL depends on whether you are using the Magento REST API as a customer or administrator.

    • Customer: To use Magento as a customer, make sure you have created a customer account in the Magento homepage. To do so, click Account -> Register. You can then set the URL connection property to the endpoint of your Magento system.

    • Administrator: To access Magento as an administrator, set CustomAdminPath instead. This value can be obtained in the Advanced settings in the Admin menu, which can be accessed by selecting System -> Configuration -> Advanced -> Admin -> Admin Base URL.

      If the Use Custom Admin Path setting on this page is set to YES, the value is inside the Custom Admin Path text box; otherwise, set the CustomAdminPath connection property to the default value, which is "admin".

  4. Click Test Database
  5. Click Privileges -> Add and add the new user (or an existing user) with the appropriate permissions (SELECT is all that is required for Reveal).

Add Magento OData Endpoints in Cloud Hub

After connecting to Magento, create OData Endpoints for the desired table(s).

  1. Click OData -> Tables -> Add Tables
  2. Select the Magento database
  3. Select the table(s) you wish to work with and click Next
  4. (Optional) Edit the resource to select specific fields and more
  5. Save the settings

(Optional) Configure Cross-Origin Resource Sharing (CORS)

When accessing and connecting to multiple domains from an application such as Ajax, there is a possibility of violating the limitations of cross-site scripting. In that case, configure the CORS settings in OData -> Settings.

  • Enable cross-origin resource sharing (CORS): ON
  • Allow all domains without '*': ON
  • Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS
  • Access-Control-Allow-Headers: Authorization

Save the changes to the settings.

Sample URLs for OData Feeds

Once you have configured a connection to Magento, created a user, and created OData endpoints in the Cloud Hub, you can access OData feeds for Magento data. Below, you will see the URLs to access tables and the list of tables. For information on accessing the tables, you can navigate to the API page for the Cloud Hub (click the API link on the top right of the Cloud Hub Web page). For the URLs, you will need the URL of the Cloud Hub, likely in the form: https://www.cdatacloud.net/myinstance/. Since we are working with Angular, we will append the @json parameter to the end of URLs that do not return JSON data by default.

Table         URL
Entity (table) List https://www.cdatacloud.net/myinstance/api.rsc/
Metadata for table Products http://www.cdatacloud.net/myinstance/api.rsc/Products/$metadata?@json
Products http://www.cdatacloud.net/myinstance/api.rsc/Magento_Products

As with standard OData feeds, if you wish to limit the fields returned, you can add a $select parameter to the query, along with other standard OData URL parameters, such as $filter, $orderby, $skip, and $top. See the help documentation for more information on supported OData queries.

Building a Single Page Application

With the Cloud Hub setup completed, we are ready to build our SPA. Since this is a simple demonstration, we will include all of our CSS, scripting, and Angular controllers in a single file, deliberately not engaging the functionality provided by AngularJS services, factories, and custom directives.

CSS Definitions & Importing AngularJS Libraries

To start, create some CSS rulesets to modify the table, th, td, and tr elements to format the tables of data. We also need to import the AngularJS libraries for use in our SPA.


  <style>
  table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

Creating & Referencing the Angular App and Controller Objects

Next, add the ng-app and ng-controller directives in the HTML body tag, since the body is the only place we will be using Angular. Then, at the end of the HTML body, we will create the script tag, in which we will create and define the Angular app and controller.


<body ng-app="DataApp" ng-controller="SimpleController">
...
<script>
var app = angular.module('DataApp', []);
app.controller('SimpleController', function($scope, $http) {
    //we will add code here
    });
</script>
</body>

Defining Our Controller

Our controller for this example will consist of three functions: init to initialize our Angular objects and set up the SPA, getTableColumns to retrieve the columns for a selected table, and getTableData to retrieve data for the selected fields from the selected column. The first action we take when creating the controller is to call the init function. All other functions will be called as needed and it is in these function calls that we make the required HTTP GET calls to the Cloud Hub to retrieve Magento data.


init();

/*
 * Initialize the data object, which will be used with Angular to
 * build the different parts of our SPA and to retrieve data from
 * the Cloud Hub.
 */
function init() {
  $scope.data = {
  availableTables: [],
                 availableColumns: [],
                 selectedTable: {},
                 tableData: []
  };

  /*
   * Call to the Cloud Hub to get the list of Tables, select the
   * first table by default, and retrieve the available columns.
   * 
   * The call to the Cloud Hub returns standard OData, so the 
   * data we need is in the value object in the JSON returned.
   */
  $http.get("http://www.cdatacloud.net/myinstance/api.rsc",{headers: {"x-cdata-authtoken": "MyAuthtoken"}})
    .then(function (response) {
        $scope.data.availableTables = response.data.value;
        $scope.data.selectedTable = $scope.data.availableTables[0];
        $scope.getTableColumns();
        });
}

/*
 * Call to the Cloud Hub to get the list of columns for the 
 * selected table.
 *
 * The data returned here is not standard OData, so we drill 
 * down into the response to extract exactly the data we need
 * (an array of column names).
 *
 * With the column names retrieved, we will transform the array
 * of column names into an array of objects with a name and Id 
 * field, to be used when we build an HTML select.
 */
$scope.getTableColumns = function () {
  $scope.data.tableData = [];
  $scope.data.selectedColumns = [];
  table = $scope.data.selectedTable.url;
  if (table != "") {
    $http.get("http://www.cdatacloud.net/myinstance/api.rsc/" + table + "/$metadata?@json", {headers: {"x-cdata-authtoken": "MyAuthtoken"}})
      .then(function (response) {
          $scope.data.availableColumns = response.data.items[0]["odata:cname"];
          for (i = 0; i < $scope.data.availableColumns.length; i++) {
            $scope.data.availableColumns[i] = { id: i, name: $scope.data.availableColumns[i] };
          }
          });
  }
} 

/*
 * Call to the Cloud Hub to get the requested data. We get the data 
 * based on the table selected in the associated HTML select. 
 * Then we create a comma-separated string of the selected columns.
 * 
 * With the table and columns known, we can make the appropriate call
 * to the Cloud Hub. Because the driver returns standard OData, the 
 * table data is found in the value field of the response.
 */ 
$scope.getTableData = function () {
  table = $scope.data.selectedTable.url;
  columnsArray = $scope.data.selectedColumns;
  columnString = "";
  for (i = 0; i < columnsArray.length; i++) {
    if (columnString != "") {
      columnString += ",";
    }
    columnString += columnsArray[i].name;
  }

  if (table != "") {
    $http.get("http://www.cdatacloud.net/myinstance/api.rsc/" + table + "?$select=" + columnString, {headers: {"x-cdata-authtoken": "MyAuthtoken"}})
      .then(function (response) { $scope.data.tableData = response.data.value; });
  } else {
    $scope.data.tableData = [];
  }
}     

Building the Webpage

With our Controller defined, we are now ready to build our webpage using Angular. There are four major parts in our simple page: a select box to choose a table, a select (multiple) box to choose columns, a button to retrieve data, and a table to display the data. We will walk through these four parts one at a time, explaining the use of Angular as we go.

Select a Table

In the first select element, we use the ng-options directive to iterate through the available tables (retrieved from the init function mentioned earlier) and populate our select element. With the ng-model directive, we assign the value of the selected option to the data.selectedTable field. If the selected table ever changes, the getTableColumns function is called to repopulate the available columns.


  <label>Select a Table</label>
  <br />
  <select name="tableDropDown" id="tableDropDown" 
          ng-options="table.name for table in data.availableTables track by table.url"
          ng-model="data.selectedTable"
          ng-change="getTableColumns()">
  </select>

Select Columns

In the second select element, we again use the ng-options directive, but this time to iterate through the available columns (as retrieved by the getTableColumns function). For the sake of usability, the columns are sorted by name before populating the select element. Since this select contains the multiple attribute, you can select more than one column. Each selected column is added to the data.selectedColumns array. You will notice that as you select columns, a table header for each column is created (see the data table section below).


  <label>Select Columns</label>
  <br />
  <select name="columnMultiple" id="columnMultiple"
          ng-options="column.name for column in data.availableColumns | orderBy:'name' track by column.id"
          ng-model="data.selectedColumns"
          multiple>
  </select>

Get Table Data

In this button, we simply make a call to the getTableData function whenever the button is clicked. You will notice that we use the ng-disabled directive to disable the button whenever the user has not selected any columns. We also dynamically update the text of the button with the name of the selected table.


  <button name="getTableData" id="btnGetTableData" 
          ng-click="getTableData()" 
          ng-disabled="data.selectedColumns.length == 0">
  Get {{data.selectedTable.name}} Data
  </button>

Display the Table Data

This section satisfies the end goal of our SPA, to display the data from the selected table. To do so, we use several ng-repeat directives: one to iterate through the selected columns and create table headers, one to iterate through the rows of data returned, and a last one to iterate through the selected columns and display the corresponding data for a given row of data.

By using Angular, we are able to dynamically determine which columns to display. It is worth noting that only those columns selected *before* the button was clicked will contain data. But it is a simple task to select all of the available columns, click the button to get the table data, and then go back and select/deselect different columns to change the data that is displayed. If you change the selected table, then all of the data will be cleared.


  <table>
    <tr>
      <th ng-repeat="column in data.selectedColumns | orderBy:'name'">{{column.name}}</th>
    </tr>
    <tr ng-repeat="row in data.tableData">
      <td ng-repeat="column in data.selectedColumns">{{ row[column.name] }}</td>
    </tr>
  </table>

Complete App

<!DOCTYPE html>

<html>
<style>
table, th, td {
border: 1px solid grey;
        border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body ng-app="DataApp" ng-controller="SimpleController"> 
<label>Select a Table</label>
<br>
<select name="tableDropDown" id="tableDropDown" 
ng-options="table.name for table in data.availableTables track by table.url" 
ng-model="data.selectedTable" 
ng-change="getTableColumns()">
</select>
<br />
<br />
<label>Select Columns</label>
<br />
<select name="columnMultiple" id="columnMultiple"
ng-options="column.name for column in data.availableColumns | orderBy:'name' track by column.id"
ng-model="data.selectedColumns"
multiple>
</select>
<br />
<br />
<button name="getTableData" id="btnGetTableData" 
ng-click="getTableData()" 
ng-disabled="data.selectedColumns.length == 0">
Get {{data.selectedTable.name}} Data
</button>
<br />
<br />

<table>
<tr>
<th ng-repeat="column in data.selectedColumns | orderBy:'name'">{{column.name}}</th>
</tr>
<tr ng-repeat="row in data.tableData">
<td ng-repeat="column in data.selectedColumns">{{ row[column.name] }}</td>
</tr>
</table>
<script>
var app = angular.module('DataApp', []);
app.controller('SimpleController', function($scope, $http) {
    init();

    /*
     * Initialize the data object, which will be used with Angular to
     * build the different parts of our SPA and to retrieve data from
     * the Cloud Hub.
     */
    function init() {
    $scope.data = {
    availableTables: [],
    availableColumns: [],
    selectedTable: {},
    tableData: []
};

/*
 * Call to the Cloud Hub to get the list of tables, select the
 * first table by default, and retrieve the available columns.
 * 
 * The call to the Cloud Hub returns standard OData, so the 
 * data we need is in the value object in the JSON returned.
 */
$http.get("https://www.cdatacloud.net/myinstance/api.rsc",{headers: {"x-cdata-authtoken": "MyAuthtoken"}})
.then(function (response) {
    $scope.data.availableTables = response.data.value;
    $scope.data.selectedTable = $scope.data.availableTables[0];
    $scope.getTableColumns();
    });
}

/*
 * Call to the Cloud Hub to get the list of columns for the 
 * selected table.
 *
 * The data returned here is not standard OData, so we drill 
 * down into the response to extract exactly the data we need
 * (an array of column names).
 *
 * With the column names retrieved, we will transform the array
 * of column names into an array of objects with a name and Id 
 * field, to be used when we build an HTML select.
 */
$scope.getTableColumns = function () {
  $scope.data.tableData = [];
  $scope.data.selectedColumns = [];
  table = $scope.data.selectedTable.url;
  if (table != "") {
    $http.get("https://www.cdatacloud.net/myinstance/api.rsc/" + table + "/$metadata?@json", {headers: {"x-cdata-authtoken": "MyAuthtoken"}})
      .then(function (response) {
          $scope.data.availableColumns = response.data.items[0]["odata:cname"];
          for (i = 0; i < $scope.data.availableColumns.length; i++) {
          $scope.data.availableColumns[i] = { id: i, name: $scope.data.availableColumns[i] };
          }
          });
  }
} 

/*
 * Call to the Cloud Hub to get the requested data. We get the data 
 * based on the table selected in the associated HTML select. 
 * Then we create a comma-separated string of the selected columns.
 * 
 * With the table and columns known, we can make the appropriate call
 * to the Cloud Hub. Because the driver returns standard OData, the 
 * table data is found in the value field of the response.
 */ 
$scope.getTableData = function () {
  table = $scope.data.selectedTable.url;
  columnsArray = $scope.data.selectedColumns;
  columnString = "";
  for (i = 0; i < columnsArray.length; i++) {
    if (columnString != "") {
      columnString += ",";
    }
    columnString += columnsArray[i].name;
  }

  if (table != "") {
    $http.get("https://www.cdatacloud.net/myinstance/api.rsc/" + table + "?$select=" + columnString, {headers: {"x-cdata-authtoken": "MyAuthtoken"}})
      .then(function (response) { $scope.data.tableData = response.data.value; });
  } else {
    $scope.data.tableData = [];
  }
}     
});
</script>
</body>
</html>

Free Trial & More Information

If you are interested in connecting to your Magento data (or data from any of our other supported data sources) from web applications built with Angular, sign up for a free trial of the CData Cloud Hub today! For more information on Cloud Hub and to see what other data sources we support, refer to our Cloud Hub page.