Setup AngularJS with Rails


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:

Rails Aboard

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'

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

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.