Monday, January 28, 2013

AngularJS rocks

Great, so now I needed to build a web GUI using pure JavaScript. What to do? There are plenty of frameworks to help you out there, among the most popular: Knockout, Batman, Backbone and Angular.

I looked around and settled for AngularJS after reading http://blog.omkarpatil.com/2012/11/selecting-javascript-web-framework.html

So here's a small but completely functional application written using Angular and Twitter bootstrap. In less that 70 lines of code I managed to access LastFM's APIs and show the list of top artists by country returned from the service. From there we can navigate to see the top albums for each artist and the top tracks. Can you do that as easily with other frameworks? Maybe, but doing it with Angular was easy and fun. I really recommend AngularJS to anyone looking to develop a web based interface.

So what does the code look like?

In angular you start off defining your modules, some factories or/and services and configuring which URLs will trigger which controllers. You also define which templates will be used when a controller is triggered.

Angular provides nice AJAX abstraction in the form of a $resource service that provides means to interact with RESTful server-side data sources. And now for the controllers:




As you can see each controller has its scope and you just inject the resources/factories/services that you have defined previously. This DI has the nice side-effect that it makes your code easy to test. Angular comes with some pretty serious testing facilities so now you can easily unit test your javascript code!

As usual here's the app in action on Heroku and the whole source code.

1 comment:

  1. Manuel,

    I'm glad you found AngularJS and my post helped you in deciding :). I believe it's the right framework choice for developing modern "Single Page" web applications and working with it for last nine months has only strengthened my belief.

    Apart from the "usual suspects" features that a web framework must support, aspects such as modularity, extensibility and testability are of utmost importance for building large web applications and Angular simply outshines all in these.

    Above all, as you have rightly pointed out, web development is fun again with Angular for me too :).

    Cheers,
    Omkar

    ReplyDelete