Tech Blog

Calling Alma REST APIs from AngularJS

AngularJS

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.
If you are not familiar with Angular, I recommend reading the first page of this tutorial which will be enough to get you started, and understand the below.Here we’ll describe 2 methods for getting data using REST calls and demonstrate using Alma’s GET Partners API:
  1. Using $http.get which explicitly calls specified URL and reads the returned JSON
  2. Using ngResource which encapsulates the HTTP calls using the base URL only

Before we start with the first method, a word about the ‘same origin policy’ and how we go around it, here using a proxy.

Calling REST APIs via a proxy

AJAX requests cannot be done from one domain to another. The browsers block it for security reasons. See some more information in this blog post and this thread.
The most popular solution is to use a proxy server which will forward the requests to Alma as is, only adding the API-key, and when responding will include CORS headers.
For the demo below we created a proxy server which is hardcoded with an API-key with a read-only access to an Alma demo server: https://api-na.hosted.exlibrisgroup.com/proxy_to_gw

$http.get()

The build-in support in AngularJS for AJAX calls are done using $http.get() as follows:
$http.get("https://api-na.hosted.exlibrisgroup.com/proxy_to_gw/almaws/v1/partners?format=json").success(function (data) {
    console.log(JSON.stringify(data));
    $scope.items = data.partner;
});

Here we wrote the retrieved data into the console, and on the following line updated the $scope with an array of objects (one object per partner). To understand why with use “data.partner” have a look at the API output:

{
"partner":
  [
   {
       "link":"https://.../almaws/v1/partners/RELAIS_ILL",
       "partner_details":
            {
              "code":"RELAIS_ILL",
              "name":"Relais ILL",
              "status":"ACTIVE"
             }
   },
   {
       "link":"https://.../almaws/v1/partners/TR_INST",
       "partner_details":
            {
                 "code":"TR_INST",
                 "name":"Training Institution",
                  "status":"ACTIVE"
            }
   }
  ],
  "total_record_count":2
}

The array is named “partner” and $scope.items is expecting an array.

Now that we have an array of partners in $scope.items we can easily display it in a table:

<tr ng-repeat="item in items">
    <td>item.partner_details.name</td>
    <td>item.partner_details.code</td>
    <td>item.partner_details.status</td>
</tr>

Ng-repeat does its magic and the elements are created as the number of partners retrieved by the API call. Full source is available here.

ngResource

By including angular-resource.js we have access to a library which utilizes the classic nature of REST to create/read/update/delete using the structured URLs and the HTTP methods POST/GET/PUT/DELETE.

We only need to define the base URL once: .

var baseUrl = "https://api-na.hosted.exlibrisgroup.com/proxy_to_gw/almaws/v1/partners";
Then we defined that identifiers appear following the “/partners/” and that we always want to include “format=json” as a query parameter:
$scope.itemsResource = $resource(baseUrl + ":id", { id: "@id", format:'json' } );
Now simply saying “give me the partners” will call the defined URL:
$scope.items = $scope.itemsResource.get();
Full source including comments is available here.

 

Leave a Reply