Fun with AngularJS + Rails + CoffeeScript + Sass: Another Cafe Townsend example

Posted on January 17, 2012

Here is an another demo of a Cafe Townsend app using AngularJS and Rails. All JavaScript code is written in CoffeeScript, the CSS code using Sass. That's just fun-fun-fun!

Screen shots

Live demo

Run the demo at http://cafetownsend-angular-rails.herokuapp.com using a modern browser.

Source code

All source code is available at GitHub.

Random notes

Here are some notes and tips based on issues I ran into:

Rails and AngularJS

• The best way to communicate between Angular and Rails is using JSON. To ensure this your Rails controllers have to declare respond_to :json. Within your AngularJS controllers you have to declare this.$xhr.defaults.headers.post['Content-Type'] = 'application/json'; and this.$xhr.defaults.headers.put['Content-Type'] = 'application/json'; for any XHR requests. The library "angle-up" will help you to simplify this.
• Angular services provide a angular.service.$resource object for using RESTful APIs. It includes almost all CRUD operations (create, read, delete) by default with the exception of update. To call an update operation your service has to define this action based on a PUT method call.
• You can use *.erb files for your client-side html templates. That can be very handy, especially if you want to use ruby code within HTML. For example to refer to the asset path just write <%= asset_path("my-template.html") %>
• It seems that there are some issues to compress AngularJS while pre-compiling on Rails. The only way to avoid it seems to be disabling compression of JavaScript config.assets.compress = false in config/environments/production.rb. Please let me know if you have another solution.

Heroku

• Deploying your rails app to Heroku is pretty easy. The only thing you should have in mind is that Heroku does not support SQLite. It provides PostgreSQL database only. Just replace within your Gemfile gem 'sqlite3' with gem 'pg'.
• Heroku recommands using a more robust webserver, e.g. Thin. In this case just add to your Gemfile gem 'thin' for using Thin (and not Webrick).

Acknowledge

• Vimeo: Angular.js + Rails: Part 1 by Daniel Nelson Vimeo: Angular.js + Rails: Part 2 by Daniel Nelson AngularJS Rails demo by Daniel Nelson
• RailsCasts: Authentication in Rails 3.1
• Heroku: Getting Started with Rails 3.0 on Heroku/Cedar
• Rails 3.1 on Heroku by Daniel Kehoe

Have fun!

-Jens

Any feedback?