JQuery and REST
I have already mentioned calling REST services using JQuery
1 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
2, 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
$http3, 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
4. 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:
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/