Feb 10, 2015

Angular on Rails via Databound [Part 1: Setting Up the Basics]

blogpost author photo
Mateusz Sagan
blogpost cover image
Lately, I’ve finished the awesome Angular.js course on Codeschool. Angular is a javascript framework that allows you to create your own html components customized with your desired behavior. Naturally, Angular’s magic takes place on the client side, working mostly with front-end. As a developer whose main area of interest is the applications’ ‘guts’, my immediate reaction was “How would one go about integrating Angular with Rails as easily as possible?” The answer came almost immediately in the form of this article. This article will be very similar, but shorter, and with a few differences – namely I’ll substitute Angular’s ng-resource with the Databound gem which gives your javascript access to rails variables – mainly because, well, I’m curious how it plays out.

The app we’ll be making

This series of posts will be more about setup and making it work, so it won’t be an angular tutorial. We’ll just create the app, get some basic functionality, show off some interesting features of Databound, deploy to Heroku and immediately forget about the whole thing. Since it doesn’t need to be a very complicated app, we’ll make a site where you can post Kitties with a name and cuteness level.

Bow to Bower, Terminate Turbolinks

First of all, let’s create our rails app, but skip the bundle. There are some things we’ll want to take care of first (note: we’re using PostgreSQL here, because it’s awesome, but you can use any database engine you like, even MongoDB). Next up: get rid of Turbolinks. I mean it. They can screw up your js really, really badly, and they won’t really do much in this case anyway.

Finally, since we’ll be using a lot of front-end assets, we’ll need a nice, organized way to keep track of versions and dependencies. Luckily, there’s the Bower and bower_rails gem. It will create a Bowerfile that works very similarily to the standard Rails Gemfile. In it, we’ll put all the assets like Bootstrap, the Angular framework and, of course, the reason behind this post, the Databound plugin.

A view to a fill

To confirm that Angular is indeed working and in the asset pipeline, we’ll make a single page to see if it plays along. It’s only going to respond to user input and update the dom accordingly – just to make sure everything clicks.

It’s time to d-d-d-d-d-d-d-deploy!

OK, now we need to update the Gemfile with some lines to make Heroku happy. Since the asset pipeline works a little differently in production than on localhost, it’s always a good idea to check if it behaves correctly in a production environment everytime you make some changes to it.