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.
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.
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.
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.
If you’re using Rails all you need to do is add the following line to your module.
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.