HTML5 Zone is brought to you in partnership with:

Chris Smith writes coffeescriptlove.com, a fan blog dedicated to that devastatingly elegant "little language that compiles into JavaScript." He loves programming, and software development in general, with a career arc that traces the ascendance of Java, then that of Ruby on Rails, and is now aligning with the power and possibilities of today's browser technologies. He is currently writing an interactive ebook on Backbone.js and CoffeeScript (backbonecoffeescript.com). Chris is a DZone MVB and is not an employee of DZone and has posted 18 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS and CoffeeScript Resources

09.16.2013
| 4031 views |
  • submit to reddit

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!

Classes

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.

Globals

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.

Yeoman

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.
Published at DZone with permission of Chris Smith, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)