Angular JS & Rails :: Playing Together

angularjs-rails.md

Rails & Angular :: Playing Together

0. What is this?

This is a quick writeup on how I get Rails & Angular up and running and working together, and how I set up the test environment so that I can test both back-end Rails as well as front-end JavaScript. This is a work in progress, and I make no guarantees to its accuracy or up-to-dateness.

I will walk through putting together a simple application shell running angular.js together with a Rails-based back-end authentication system.

1. Getting Started.

This is a Rails 3.2.6 application, so we begin as we do with all modern Rails apps:

rails new horizons

for a new app entitled horizons. Clever, right? I have no idea what it is going to do yet, but that hardly stops people from writing web applications these days.

Now let's add the angular.js framework

I'm using the angularjs-rails gem to inject angular into the Rails asset pipeline. There are several of these out there, but this one appears to be currently maintained and kept in line with the angular.js releases. It is easily installed. Adding:

gem 'angularjs-rails'

running bundle update and adding,

//= angular

to the application.js file is all you need to do. We now have access to angular functionality in our Rails app!

Before we move on to integrating testing frameworks, let's add the Twitter Bootstrap gem. Add the following line to the :assets group:

group :assets do
  gem 'anjlab-bootstrap-rails', '>= 2.0', :require => 'bootstrap-rails'
end

In the /app/stylesheets/application.css we add the following line:

/*
 *= require_self
 *= require app_bootstrap
*/

Now we add a file called app_bootstrap.css.scss in the stylesheets directory, which contains something like the following:

// change colors — the background of the navbar, for example.
$navbarBackground: black;
$navbarBackgroundHighlight: black;

// import original bootstrap
@import "bootstrap";
body {padding-top: 40px;} // add padding to the body to compensate for fixed navbar
@import "responsive"; // add the responsive boostrap CSS

// Now import all other stylsheets in proper order.
@import 'global';

Adding test frameworks.

We will build our application using something like Test Driven Development (TDD), and for that we will need to install test frameworks. I will use RSPEC for the Rails side, and Jasmine fo the JavaScript.