HTML5 Zone is brought to you in partnership with:

Nicolas Frankel is an IT consultant with 10 years experience in Java / JEE environments. He likes his job so much he writes technical articles on his blog and reviews technical books in his spare time. He also tries to find other geeks like him in universities, as a part-time lecturer. Nicolas is a DZone MVB and is not an employee of DZone and has posted 221 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS meets Marvel Comics

  • submit to reddit

Let’s face it: despite us having very serious titles like Principal Consultant, Senior Software Architect or Team Leader, most of us are geeks through and through. Each shows it in a different way; some fiddle with machines, some like cosplay, me I like comic books.

When I learned that Marvel Comics provided a developers REST API, I couldn’t resist playing with it. I’m more of a backend guy, and though I love Vaadin, using it to call REST services would be like proxying with no added value. Though I’ve no prior experience with AngularJS, this is a much more relevant option in this case. This article is by no mean a how-to article, on the contrary, it contains many questions and some answers I’ve come across. In no particular order, those are the following:

Using webjars with Maven

Front-end is front-end, period. I used Maven with webjars to get AngularJS and Bootstrap dependencies, but it doesn’t add anything. Worse, it adds an unnecessary build process. It would have been to better to use a relevant tool like Bower. Lesson learned: use tools tailored to your language.

Using Tomcat inside IntelliJ IDEA

Likewise, using a back-end tool means no added value value but instead added complexity. It only slows down the development process. A simple web server would have been good enough.

Knowing about $resource

After using $http for a few hours, I learned about $resource. It is much better and more usable than $http. However, this requires an optional AngularJS module, ngResource, which in turn needs an additional <script> include in the HTML page.

AngularJS and Bootstrap integration
I’ve used Bootstrap for styling, because I suck at doing style sheets myself. Fortunately, there’s an dedicated Bootstrap directive for AngularJS, but I didn’t use it.

Fragment cache
I used ngView to create a Single-Page Interface application. However, AngularJS has some powerful caching features, that prevents the rendered page to be updated. In order to bypass caching, I used Firefox’s private window.

Paging synchronization
The Characters list REST service has paging capabilities. Using $index in ngRepeat for numbering with $resource fetching, I get some de-synchronization between the renumbering that occurs nearly instantly and the resource fetching.

Variable columns
I have tried multiple combinations of ngClass, ngSwitch and ngIf directives to have div columns spanning different Bootstrap units… to no avail. Any suggestion?

The project has been published on Github. Pull-requests are welcome, as well as advices, so I can improve. In all cases, please provide the reason behind, I’m an engineer after all.

Published at DZone with permission of Nicolas Frankel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)