Over a million developers have joined DZone.

AngularJS and CoffeeScript Resources

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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. The Post 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 updated 5 months ago. AngularFun is actively maintained, with a Grunt.js build; I recommend checking out its Gruntfile.coffee.


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.

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


Published at DZone with permission of Chris Smith , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}