Raw Syntax

The stuff programs are made of

How to Set Up Angular With Rails


originally posted on the Intridea blog here: http://www.intridea.com/blog/2014/9/25/how-to-set-up-angular-with-rails

To get started lets create a new rails app.

gem install rails -v 4.1
rails new angular_example

In this app, I chose not to use turbolinks. It's possible to use Angular with Rails and turbolinks, but the Angular app bootstrap process is more complex. I find that turbolinks and Angular serve the same purpose, which is to make the app respond faster. Adding turbolinks, in addition to Angular, adds a lot of complexity and not much benefit.

Remove Turbolinks

Removing turbolinks requires removing it from the Gemfile.

gem 'turbolinks'

Remove the require from app/assets/javascripts/application.js

//= require turbolinks

Add AngularJS to the Asset Pipeline

In order to get Angular to work with the Rails asset pipeline we need to add to the Gemfile:

gem 'angular-rails-templates'
gem 'bower-rails'

Next, we can install these gems into our bundle.

bundle install

We added bower so that we can install the AngularJS dependency.

rails g bower_rails:initialize json

When adding Angular to bower.json, I prefer to specify the most recent version rather than going with the "latest". This avoids having your app randomly break when a new version is released and your bower installs again.

"lib": {
"name": "bower-rails generated lib assets",
"dependencies": {
"angular": "v1.2.25"
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {

Now that bower.json is setup with the right dependencies, let's install them:

bundle exec rake bower:install

Organize the Angular App

At this point we'll create the following folder structure in app/assets/javascript/angular-app:


This structure is only a convention and is not enforced by Angular (unlike file naming and organization in Rails). This project structure allows for a single web app to be easily composed of multiple smaller Angular modules rather than one giant Angular app for the whole site.

In app/assets/javascripts/application.js add Angular, the template helper, and the Angular app file structure. That file should now read like this:

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-rails-templates
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers

Bootstrap the Angular App

Next, we'll setup the Angular app bootstrapping. Create app/assets/javascripts/angular-app/app.js.coffee:

@app = angular.module('app', [
# additional dependencies here, such as restangular
# for compatibility with Rails CSRF protection
'$httpProvider', ($httpProvider)->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
console.log 'angular app running'

Then, we'll create an Angular module at app/assets/javascripts/angular-app/modules/example.js.coffee.erb

@exampleApp = angular
.module('app.exampleApp', [
# additional dependencies here
console.log 'exampleApp running'

Following the Angular module, we'll create an Angular controller for this app at app/assets/javascripts/angular-app/controllers/exampleCtrl.js.coffee

angular.module('app.exampleApp').controller("ExampleCtrl", [
console.log 'ExampleCtrl running'
$scope.exampleValue = "Hello angular and rails"

Now we need to add a route to Rails to pass control over to Angular. In config/routes.rb:

Rails.application.routes.draw do
get 'example' => 'example#index'

Next, we'll generate the Rails controller to respond to that route:

rails g controller Example

In app/controllers/example_controller.rb:

class ExampleController < ApplicationController
def index

In the view we need to specify which Angular app, and which Angular controller will drive this page.

In app/views/example/index.html.erb:

<div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
<p>Value from ExampleCtrl:</p>
<p>{{ exampleValue }}</p>

To view the app, start your Rails server and visit http://localhost:3000/example

You can find the code generated here https://github.com/rawsyntax/rails-angular-example