REST + Angular = Restangular

JQuery and REST

I have already mentioned calling REST services using JQuery¹ in my entry on REST and Error messages at my blog.

At the risk of being redundant, here it is:

Unfortunately, it requires a lot of settings and a lot of DOM manipulation to create the view and make it work as it should.

I was looking for an alternative, something that's easy to use without a lot of boilerplate.

I would prefer something like JSF, but solely on the client side, and which fully supports REST. I found something to my liking in Angular.

Angular

AngularJS is, according to their website², a Superheroic JavaScript MVW Framework.

“AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!”

As far as I can tell, you add Angular specific xml attributes to your html tags, and Angular takes care of the updating of those tags, depending on what's changed. Of course, that's just the tip of the proverbial iceberg.

Angular and REST

The Angular version of the JQuery $.ajax call is called $http³, and is about what you would expect.
Both in JQuery and in Angular, it is a wrapper around the XMLHttpRequest.

This is not really a REST-aware API, to say the least. Therefore Angular also provides a $resource service. This service creates resource objects that makes it easy to communicate with RESTful backends.

It is an optional module in Angular, called ngResource, and needs to be installed.

Restangular and REST

However, I have opted to make use of Restangular⁴. It seems to be more self-evident how it works, follows the guideline of Angular more closely and seems to abstract away a lot of the boilerplate, for example URLs.

In the example above there are numerous interesting tidbits:

• In the config call, I set the base url. All consequent calls to REST resources have this url as root.
• In the config call, I needed to set the "id" of the resource accessed, otherwise Restangular assumes that the "id" is a field called "id". In this case it was "name"^{5 6}.
• var restBase = Restangular.all("worldattributes") sets a resource (in this case for world attributes).
• restBase.getList()
          .then(function(worldattributes) 
          {
            // returns a list of worldattributes
            $scope.worldattributes = worldattributes;
            $scope.setFilter();
            $scope.isNew = false;
          });
  
  This creates a GET XMLHttpRequest for url "/karchangame/resources/administration/worldattributes" and retrieves all objects. It assumes JSON. As you see, I promptly put all info into the Angular scope, so it can be reached in the HTML file (see below).
• The objects returned by Restangular, are themselves also REST resources, therefore contain methods such as put() which updates it (causing an automatic HTTP PUT request).
• The call remove is translated to a DELETE XMLHttpRequest.
• And my update method decides on a POST or PUT depending on wether it is a new or a changed world attribute.
• The Restangular.copy call is convenient, as it makes a deep copy of the object.
• Sometimes, the backend REST urls are not standard, in which case you wish to turn from the default, and start making calls with a bit more control. An example of such is visible with the customDELETE in the disown function.

The HTML part of the Angular looks like follows:

Notice that the HTML file looks almost exactly as a simple HTML file would, besides the added Angular attributes and the references to the $scope object (by means of {{ and }}).

References

[1] JQuery.ajax() | JQuery API Documentation

http://api.jquery.com/jquery.ajax/

[2] AngularJS - Main Website

https://angularjs.org/

[3] ngbook - The Complete Book on AngularJS

Ari Lerner

[4] Github - Restangular

https://github.com/mgonto/restangular

[5] Stackoverflow - Restangular put loses part of the url

http://stackoverflow.com/questions/24262949/restangular-put-loses-part-of-the-url

[6] Restangular - GitHub : What if each of my models has a different ID name like CustomerID for Customer?

https://github.com/mgonto/restangular#what-if-each-of-my-models-has-a-different-id-name-like-customerid-for-customer

Foundation 5

http://foundation.zurb.com/