Aug 27, 2013

AngularJS and CoffeeScript Tutorials

AngularJS is an insanely productive approach to developing rich front-end JavaScript applications. I'm currently writing an interactive book about AngularJS, with versions in both JavaScript and CoffeeScript, and it turns out (no surprise) that CoffeeScript is a great way to develop AngularJS applications.

Here are the top resources I've found so far on AngularJS and CoffeeScript, with publication dates. Things are moving fast with AngularJS and there are a lot of outdated questions and answers on Stack Overflow, so you should always carefully check dates and versions when researching. For example, just a few months ago you couldn't use CoffeeScript classes as AngularJS controllers, but nowadays, as shown in this jsFiddle, you can!


Probably the most highly-linked article is Alexander Hill's CoffeeScript and AngularJS (July 2013).
Alex gives the usual compelling arguments for CoffeeScript readability, and also shows an example of an AngularJS service that uses CoffeeScript classes instead of directly modifying a function's prototype. Rocky Jaiswal's short post Angular.js Hacks (May 2013) provides additional examples of using CoffeeScript classes for controllers, services, and directives. 4 Lessons Learned Doing Angular On Rails contains a section on "Angular models as Coffeescript classes" that is unrelated to Rails (the post also has good info on Rails and AngularJS). 

Of course, keep in mind that just because you can use CoffeeScript classes, you don't have to, even though it looks cool. Unless there's some reason you need object-oriented features (most likely inheritance), a simple function is usually the best approach.


The CoffeeScript wrapper function that prevents accidental global variables may also break some AngularJS examples, as explained in Working together: AngularJS and Coffeescript (July 2012).

Example applications

Both AngularFun and Angular Espresso are open-source reference applications that use CoffeeScript with AngularJS. Angular Espresso looks a bit dated, with a Cakefile build and last update 5 months ago. AngularFun is actively maintained, with a Grunt.js build; I recommend checking out its


Of course, if you want the latest and greatest Gruntfile for your AngularJS project, you should probably generate it with Yeoman.

Unfortunately, Yeoman Testing With Coffeescript is just a short post that should probably be retitled, since it's just focused on an issue related to Karma configuration.

I didn't find any tutorials demonstrating the CoffeeScript support (provided by the --coffee option) in the Yeoman generator for AngularJS, but I've used it myself and it works for me. If I don't hear of anything, I will likely write more about Yeoman, Grunt.js, AngularJS, and CoffeeScript in a future post on CoffeeScript Love.