Setup AngularJS with Rails

Ademar Tutor | Jan 10, 2015




There tons of tutorials out there that teaches you how to integrate angular.js with rails. This post will teach how integrate angular.js with rails using Bower.

Step 1

Assuming that you have already installed rails, create a new rails app:

rails new app_name

Make sure rails works. Try running rails and check your browser. Make sure you find this:

Step 2

Add the necessary gems on your gemfile.

gem 'bower-rails'  
gem 'angular-rails-templates'  
gem 'responders', '~> 2.0'  

Make sure you remove gem 'turbolinks' on Gemfile to avoid conflict later.

Don't forget to bundle install.

On your app/views/layouts/application.html.erb edit the following:

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

To this:

  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>

Step 3

Create a file named Bowerfile on the root directory of your app. The file should contain these:

asset 'angular'  
asset 'angular-route'  
asset 'angular-resource'

# vim: ft=ruby

Now install the packages you require in Bowerfile on your rails app by doing a: rake bower:install.

Learn more about the bower-rails here: https://github.com/42dev/bower-rails

Step 4

Now, tell rails to add the packages you installed as assets. On you config/application.rb file, add the following:

config.assets.paths << Rails.root.join("vendor", "assets", "bower_components")

Step 5

Edit your /app/assets/application.js to require the packages you installed earlier.

Your application.js should look similar to this:

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-rails-templates

//= require app_name/app.js
//= require_tree ./app_name

Step 6

The last two lines on the application.js file calls your angular.js codes.

Now let's start a simple angular.js app which shows a landing page on the root url of your app.

On app/javascripts/app_name/app.js:

( function() {
  'use strict';

  angular.module('app_name', [
    // Libraries
    'templates',
    'ngRoute' 
  ])
  .config(['$routeProvider', 
    function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'app_name/landing.html'
        });
    }
  ]);
})();


Add an html file on app/assets/javascript/app_name. Then name of the html file should be landing.html. Add this to you landing.html file:

<h1>This should work if 2 + 2 = {{ 2 + 2}}</h2>  

Step 7

To integrate the angular.js code above into the rails application, we first add a specific route:

Rails.application.routes.draw do  
  resources :home, only: [:index]
  root 'home#index'  
end  

The create the controller and method:

class HomeController < ApplicationController  
  def index
  end
end  

Now create the view:

<body ng-app="app_name">  
  <div ng-view class="view-frame"></div> 
</body> 

Now, startup your rails app and access the root url. You should find an h2 element saying: "This should work if 2 + 2 = 2"

Congratulations! You have successfully integrated angular.js and rails.

You can find the code here: https://github.com/iamademar/angular_rails

You can find a demo app here: http://ademar-angular-rails.herokuapp.com/#/

Note: If you are deploying to heroku, don't forget to add the "rails_12factor" gem.