Imagine we have just developed a brand new RESTful API, and we want to demostrate how easy is to use it and how quickly we can develop Single-Page Web applications. An elegant way of building a prototype aplication is by using AngularJS and jsFiddle.
I find AngularJS a very sophisticated and well made application framework. Created by Misko Hevery and now maintained by Google and community, it is based in the solid MVC architectural style. It enriches the
html directives and simplifies the connection of models with views and controllers. Its popularity nowadays is immense, and is becoming one of the frameworks of choice in the industry for developing Single-page dynamic web applications.
There are lots of good documentation and tutorials both, in the AngularJS website and in Youtube. I find this series of video tutorials very easy to follow, and here you can find up to 50 examples of code together with references to other tutorials and related frameworks.
<iframe>), share it on the social networks, etc. Your code may be shared from GitHub and displayed as new Fiddle.
And we can also sahre the isolated rendered result as a web application prototype.
Although the documentation is not great, it is enought for solving those things that are not intuitive within the user interface, that are not many by the way.
The PRIDE Archive web service
The PRIDE PRoteomics IDEntifications database is a centralized, standards compliant, public data repository for proteomics data, including protein and peptide identifications, post-translational modifications and supporting spectral evidence. There is also a web service that is publicly available.
The SPA prototype
Our prototype is pretty simple, including a small
html, and a bit of
The layout is pretty much a
<table/> with the results and an
<input/> text box where we can place the search terms. Things to mention here:
- There is a
<div/>elements tagged as the AngularJS application.
- There is another
- The results are listed in a table, filtered by an AngularJS expression using the search term, and referencing model entities withing the projects results.
Following is the
Basically, we get a reference to the AngularJS application and use it to add a controller associated with the
PrideSearchCtrl element we referenced within the
<div/> in the
html part. The controller uses JSONP to load data from the PRIDE Archive web service and assing this data the the Model object
projects. We also set
publicationDate as the default order-by field for the results. Important here to add the
?callback=JSON_CALLBACK at the end of the
JSONP to work properly.
The working prototype can be found here.