I’m currently in the process of learning AngularJS. I’ve definitely heard of Angular, but I haven’t actually had the opportunity to try it. It was described to me as ‘the next big thing’ and at first glance it definitely looks impressive.

Paulo Oliveira gave a very appropriate description of Angular:

Angular is so good that it accomplishes something unimaginable until its appearance: making client side programming something enjoyable.

Starting Point

If you’re completely unfamiliar with Angular a good staring point is this video by Dan Wahlin – AngularJS Fundamentals in 60-ish Minutes. This video takes you through all the basics of getting up and running with AngularJS and does an overview of all the different concepts – directives, filters, data-binding, views, controllers, scope, modules, routing and factories/services. All of this is done with a very clever little example app that the author keeps on expanding on. Definitely worth a watch.

Another good resource is TodoMVC.

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. To help solve this problem, we created TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

The TodoMVC implementation for AngularJS is pretty good, although it could probably be done in less code. For example, the implementation doesn’t use routing at the module level and implements it at the controller level instead.

Making a real example

While the TodoMVC application is great there is no interaction with a server which means the examples hide quite a bit of complexity. If you’re familiar with Rails a good tutorial is Single-Page application with Rails 3 and AngularJS. It guides you through the basics of creating a Single-Page application in Rails and integrating with AngularJS. I especially like that the tutorial tries to make changes in small, incremental steps. I used this tutorial as a guideline for creating my own Todo implementation with a Rails/Mongo backend.

One thing I did find a bit strange about most of the examples I came across is that they all seem to load the partial views directly from the server. This will require a trip to the server for every view you render on the client, which is especially bad if you’re trying support a decent mobile experience. I managed to switch over to client-side views by using EJS. (You can easily substitute EJS for your view engine of choice)

In your routes instead of specifying a templateUrl you simply specify the template string itself.

$routeProvider
  .when('/list',
    {
      controller: 'TodoController',
      template: JST['views/list']()
    })

This doesn’t tell the whole story unfortunately, since we also need to take care of CSRF tokens. Usually this is automatically handled by Rails but because we’re not doing form-posts we have to do a bit of work to make it happen. Luckily Angular already has support for this.

XSRF is a technique by which an unauthorized site can gain your user’s private data. Angular provides following mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie called XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain.

To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKENon first HTTP GET request. On subsequent non-GET requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have read the token. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript making up its own tokens). We recommend that the token is a digest of your site’s authentication cookie with salt for added security.

If you’re using Rails all you need to do is add the following line to your module.

$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');

If you’re doing everything correctly you should no longer see this line in your Rails log: WARNING: Can’t verify CSRF token authenticity.

My Todo Example

My example is up on Github. I committed fairly often so if you step through the commits you should see a pretty straighforward incremental implementation.

Next up I’m going do some more digging into ngResource as well as trying to integrate some Jasmine testing. Happy coding.

Share on: Twitter, Facebook, Google+ or use the Permalink