What follows are a few examples of where Elixir could be used in a pre-existing ruby codebase.

API

Given an existing application such as an API written in Ruby, an Elixir backend can be proxied in and used for certain routes where speed or scaling is critical. An easy way to get started would be to replace a simple read only Ruby endpoint with Elixir.

Over time the entire Ruby based API could be replaced entirely with Elixir.

Background Workers

It is arguable that Rails' strength lies in its easy use of gems and wrangling the web tier with relative ease. Background workers aren't necessarily a reason to pick Rails over another framework. In some codebases background workers are separated entirely from the web tier application code.

One way to try out Elixir is having background jobs that get queued in Ruby, but then get executed by Elixir based workers. In fact, Elixir has a sidekiq compatible worker library, which would allow each worker to be ported over to Elixir one by one, while existing Ruby workers peacefully coexist along side Elixir workers.

Slides

These two use cases allow for a trial of Elixir without having to build an entire application in it. I recently gave a talk on using Elixir from a Ruby point of view. The slides are below.

Elixir with Ruby

Consider a .ruby-version file containing 2.1.3p242. This version is listed as 2.1.3 by rbenv (while RVM and others may list it differently), and it isn't recognized due to the patch version (though the version in rbenv is actually 2.1.3p242). There's a plugin called rbenv-aliases that addresses this problem.

You can install the plugin with the following commands:

mkdir -p ~/.rbenv/plugins
git clone git://github.com/tpope/rbenv-aliases.git \
  ~/.rbenv/plugins/rbenv-aliases

Then, running the command:

rbenv alias 2.1.3p242 2.1.3

will cause rbenv to recognize 2.1.3p242 and set the ruby version to 2.1.3.

However, this plugin must be used with caution. You could say rbenv alias 2.1.3 1.8.7, which is a lie! The plugin comes with a command for removing any incorrect aliases rbenv unalias 2.1.3.

Eventually I saw that there was both a .rspec file with configuration options and a few of the same configuration options repeated in the spec_helper. Once I removed the duplication (in particular the format documentation option was specified in both places), the RSpec suite output only appeared once. I did a little more digging and found that the test suite was not running twice, but rather the output was getting printed twice.

The easiest way to avoid this kind of problem is to decide on a project level to keep RSpec options in spec/spec_helper.rb or .rspec, but not both.

1. Encrypt the connection (HTTPS)
2. Encrypt the paylod (HMAC-SHA1 for example)

You could think up ways to go further but these are the basics that need to be covered.

Pitfalls to avoid

While the above two steps are pretty straight forward and easy to read about and learn, there is one problem to watch out for. When an app developer starts learning about how to secure an API or a website, there is a possibility that that developer will start to consider him or herself an expert in security. This can lead to developing your own security libraries and using them.

This is a problem because that homebrewed library is going to have more bugs than the community vetted library that is out there. And you can remain blissfully unaware of these bugs because there's no public mailing list to notify you of vulnerabilities as they are discovered and patched.

When I work with security related code, I repeat to myself:

I am not a security expert

Then I go read about libraries used by the community and choose the ones that have been well vetted and around for a while. It is not an area I choose to go with the new hotness in.

In Part 2 of Angular with Rails series, we covered creating a Rails API with tests in RSpec and setting up an AngularJS app that reads from the API.

In Part 3 we will cover:

• Adding CSS
• Adding editing functionality
• Creating a custom filter
• Setting up JavaScript tests

Setup Bootstrap Sass

In order to support editing functionality we'll add some CSS to the UI. Following the README at bootstrap-sass, we'll add to our Gemfile:

gem 'bootstrap-sass', '~> 3.3.0'

Add to our app/assets/javascripts/application.js:

//= require bootstrap-sprockets

Rename app/assets/stylesheets/application.css to application.css.sass (if you prefer sass over scss) and add:

@import "bootstrap-sprockets"
@import "bootstrap"

Then we'll add some classes to our employee index in app/views/employees/index.html.erb:

<div ng-app='app.employeeApp' ng-controller='EmployeeListCtrl' class="col-xs-8">
  <h1>Employees List</h1>
  <table ng-if="employees" class="table table-hover table-striped">
    <thead>
      <th>Name</th>
      <th>Email</th>
      <th>SSN</th>
      <th>Salary</th>
    </thead>
    <tbody>
      <tr ng-repeat="employee in employees">
        <td>{{employee.name}}</td>
        <td>{{employee.email}}</td>
        <td>{{employee.ssn}}</td>
        <td>{{employee.salary | currency}}</td>
      </tr>
    </tbody>
  </table>
</div>

Add the Edit API

Next, we'll update our Rails API to support editing of employee records. Let's start by adding some tests for the update method in spec/controllers/api/employees_controller_spec.rb:

require 'spec_helper'
 
describe Api::EmployeesController do
  before(:each) do
    @employee = create(:employee, name: 'Calhoun Tubbs', salary: 50000)
  end
 
  describe '#index' do
    it 'should return a json array of users' do
      get :index
      result = JSON.parse(response.body)
 
      expect(result[0]['name']).to eq('Calhoun Tubbs')
    end
  end
 
  describe "#update" do
    it 'should successfully respond to edits' do
      put :update, id: @employee.id, employee: {
            id: @employee.id,
            salary: 60000
          }
 
      expect(response).to be_success
    end
 
    it "should change the employee's salary" do
      @employee.update_attribute(:salary, 50000)
 
      put :update, id: @employee.id, employee: {
            id: @employee.id,
            salary: 60000
          }
 
      expect(@employee.reload.salary).to eq(60000)
    end
  end
end

At this point, these tests will fail. We need to create an update method in our API controller, but first we must specify what params are allowed on update (Rails' strong parameters) at app/controllers/api/employees_controller.rb:

class Api::EmployeesController < ApplicationController
  # section omitted
  private
 
  def employee_params
    attributes = [
      :salary,
      :name,
      :email,
      :ssn
    ]
 
    params.require(:employee).permit(attributes)
  end
end

Now, our update action is simple. The code will try to update the employee object and render the errors if there's a problem.

class Api::EmployeesController < ApplicationController
  # section omitted
  def update
    employee = Employee.find(params[:id])
 
    if employee.update(employee_params)
      render json: employee
    else
      render json: employee.errors.messages, status: :bad_request
    end
  end
  # section omitted
end

Next run the tests to make sure they pass. For a more complex application there would be more tests, but in our example these will suffice.

Add the Edit Front End

For our employee edit functionality we'll define a modal dialog containing a form and a submit button. The Angular-bootstrap package contains a modal dialog tool. We'll add the angular-bootstrap package to our bower.json:

{
  "lib": {
    "name": "bower-rails generated lib assets",
    "dependencies": {
      "angular": "v1.2.25",
      "restangular": "v1.4.0",
      "angular-bootstrap": "v0.11.0"
    }
  },
  "vendor": {
    "name": "bower-rails generated vendor assets",
    "dependencies": {
    }
  }
}

And bundle exec rake bower:install

Next, require angular-bootstrap in app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-rails-templates
//= require lodash
//= require restangular
 
//= require angular-bootstrap
//= require bootstrap-sprockets
 
//= require angular-app/app
// rest of the file omitted

Finally, we'll add it as a dependency to our angular app in app/assets/javascripts/angular-app/modules/employee.js.coffee.erb:

@employeeApp = angular
  .module('app.employeeApp', [
    'restangular',
    'ui.bootstrap'
    'templates'
  ])
  .run(->
    console.log 'employeeApp running'
  )

Now, we need to add a modal controller to our AngularJS app. This controller will handle popping up a modal editable form and submitting it to our Rails API. In app/assets/javascripts/angular-app/controllers/employee/EmployeeListCtrl.js.coffee:

angular.module('app.employeeApp').controller("EmployeeListCtrl", [
  '$scope', 'EmployeeService', '$modal',
  ($scope, EmployeeService, $modal)->
 
    $scope.editEmployee = (employee) ->
      modalInstance = $modal.open({
        templateUrl: 'employee/edit.html',
        controller: 'EmployeeEditModalCtrl'
        size: 'lg'
        resolve:
          employee: ->
            employee
      })
 
      modalInstance.result.then(->
        console.log 'edit closed'
      )
# rest of file omitted

Next, we'll create the modal controller at app/assets/javascripts/angular-app/controllers/employee/EmployeeEditModalCtrl.js.coffee:

angular.module('app.employeeApp').controller('EmployeeEditModalCtrl', [
  '$scope', '$modalInstance', 'employee', ($scope, $modalInstance, employee)->
    $scope.submitEmployee = ->
      console.log 'submit employee'
 
    $scope.cancel = ->
      $modalInstance.dismiss('cancel')
 
])

In the above code we're defining a modal controller that receives the employee object we passed in the prior controller, along with function stubs for the save / cancel buttons in the dialog. Next, we need to define the edit form template in app/assets/javascripts/angular-app/templates/employee/edit.html.erb:

<div class="modal-header">
  <h4 class="modal-title">Edit Employee</h4>
</div>
 
<div class="modal-body">
  <form name="" ng-submit="submitEmployee(employee)">
    <div class="form-group">
      <div class="row">
        <div class="col-xs-12">
          <label>Name<span class="required"> required</span></label>
          <input class="form-control" ng-model="employee.name">
        </div>
      </div>
    </div>
 
    <div class="form-group">
      <div class="row">
        <div class="col-xs-12">
          <label>Email<span class="required"> required</span></label>
          <input class="form-control" ng-model="employee.email">
        </div>
      </div>
    </div>
 
    <div class="form-group">
      <div class="row">
        <div class="col-xs-12">
          <label>SSN<span class="required"> required</span></label>
          <input class="form-control" ng-model="employee.ssn">
        </div>
      </div>
    </div>
 
    <div class="form-group">
      <div class="row">
        <div class="col-xs-12">
          <label>Salary<span class="required"> required</span></label>
          <input class="form-control" ng-model="employee.salary">
        </div>
      </div>
    </div>
 
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
      <button type="submit" class="btn btn-primary">Save Changes</button>
    </div>
  </form>
</div>

Finally, if you run the code now you'll get an error loading the template. We need to tell our angular-rails-templates gem what the base path for our templates is. This is necessary because we are using the rails asset pipeline to combine our javascript files. In config/application.rb:

require File.expand_path('../boot', FILE)
require 'rails/all'
 
Bundler.require(*Rails.groups)
 
module AngularExample
  class Application < Rails::Application
    # the path relative to app/assets/javascripts
    config.angular_templates.ignore_prefix  = 'angular-app/templates/'
  end
end

Next, we can return to our employees index and provide an ng-click attribute to launch the edit form. We'll add this link on the employee name cell in the table in app/views/employees/index.html.erb:

# rest of the file omitted
<td><a ng-click="editEmployee(employee)">{{employee.name}}</a></td>

Now, clicking an employee's name will launch a modal form with fields containing that employee's data. However, we still need to hook up the Save Changes button to our Rails API. In app/assets/javascripts/angular-app/controllers/employee/EmployeeEditModalCtrl.js.coffee:

angular.module('app.employeeApp').controller('EmployeeEditModalCtrl', [
  '$scope', '$modalInstance', 'employee', ($scope, $modalInstance, employee)->
    $scope.employee = employee
 
    $scope.submitEmployee = (employee)->
      employee.put().then(
        $modalInstance.close('saved')
      )
    # section omitted
])

We can simply say put() above because we are using Restangular to manage that object.

One problem with the above code is that while the server is applying validation to the object, the client side AngularJS portion is not. One downside of using client-side MVC is the fact that validation from the server must often be duplicated on the client. The subject of AngularJS form validation could be a blog post on its own. I'll leave that as an exercise for the reader.

Secure the UI

Though the editing functionality now works, notice the page still shows each employee's social security number. In order to mask the SSN and only reveal it in edit form, we can create an AngularJS filter. In app/assets/javascripts/angular-app/filters/employee/empMaskNumber.js.coffee

angular.module('app.employeeApp').filter('empMaskNumber', ()->
  (value, nonMaskLength) ->
    if value?
      maskLength = value.length - nonMaskLength - 1
      if maskLength > 0
        v = value.split("")
        for i in [0..maskLength] by 1
          if v[i] != '-'
            v[i] = '*'
        v = v.join('')
      else
        value
    else
      value
)

It's recommended that you name filters with an app prefix to avoid colliding with AngularJS's built-in filters. Let's edit our employee table to make use of the filter in app/views/employees/index.html.erb:

# section omitted
<tr ng-repeat="employee in employees">
  <td><a ng-click="editEmployee(employee)">{{employee.name}}</a></td>
  <td>{{employee.email}}</td>
  <td>{{employee.ssn | empMaskNumber: 4 }}</td>
  <td>{{employee.salary | currency}}</td>
</tr>
# section omitted

Viewing the employee table again you should see the SSN field being masked with asterisks except the last 4 digits. While this filter is simple and apparently works, when building more complex filters we will need javascript tests.

Setup JavaScript Tests

Next, we'll setup jasmine-rails. Add jasmine-rails to the Gemfile:

group :test, :development do
  gem 'jasmine-rails'
end

And add angular-mocks to the bower.json:

{
  "lib": {
    "name": "bower-rails generated lib assets",
    "dependencies": {
      "angular": "v1.2.25",
      "restangular": "v1.4.0",
      "angular-bootstrap": "v0.11.0",
      "angular-mocks": "v1.3.2"
    }
  },
  "vendor": {
    "name": "bower-rails generated vendor assets",
    "dependencies": {
    }
  }
}

Then run:

bundle install
rails generate jasmine_rails:install
bundle exec rake bower:install

Next, we need to setup our spec_helper. In app/assets/javascripts/spec_helper.coffee:

#= require application
#= require angular-mocks
#= require sinon
 
beforeEach(module('app', 'app.employeeApp'))
 
beforeEach inject ($httpBackend, $compile, $rootScope, $controller, $location, $injector, $timeout, $filter) ->
  @scope = $rootScope.$new()
  @compile = $compile
  @location = $location
  @controller = $controller
  @injector = $injector
  @http = @injector.get('$httpBackend')
  @timeout = $timeout
  @model = (name) =>
    @injector.get(name)
  @filter = $filter
  @eventLoop =
    flush: =>
      @scope.$digest()
 
afterEach ->
  @http.resetExpectations()
  @http.verifyNoOutstandingExpectation()

Note the beforeEach line above. As your application grows and more angular apps are added, they must also be added here to be available for testing. The above spec helper also requires SinonJS. Download the file and place it at vendor/assets/javascripts/sinon.js .

Now you should be able to run an empty test suite:

RAILS_ENV=test bundle exec rake spec:javascript

Which should return 0 specs and 0 failures. We are now ready to write our test for our filter defined above. In spec/javascripts/filters/emp_mask_number_spec.js.coffee:

#= require spec_helper
 
describe 'Filters', ->
  describe 'EmpMaskNumber', ->
    beforeEach ->
      @maskFilter = @filter('empMaskNumber')
 
    it 'should mask the value with asterisks', ->
      @value = "123"
      @nonMaskLength = 0
 
      expect(@maskFilter(@value, @nonMaskLength)).toEqual "***"

In a real application expect to have more specs than just the above. At this point though, you have everything you need to continue building your application and expanding. You can find the code for this example on Github.

Need to catch up on the Angular with Rails series? Check these out:

• Angular with Rails Part I
• Angular with Rails, Part II

Resources:

• Example App
• AngularUI
• Jasmine spec_helper
• SinonJS

In Part I of our Angular series, we illustrated the process for setting up an Angular app for Rails.

In Part 2 of this series, we'll be creating a basic HR app. This app will allow us to view employee information through an Angular app (edits and updates to be explained in Part 3 of this series). For more details, see code in Github link at the end of post.

Here's a quick snapshot of what we'll be creating for our HR app:

• Setting up test frameworks
• Creating a Rails API
• Making the Angular frontend talk to the Rails API

Setup RSpec

First, remove the test/ directory. This is left over from our initial app setup in Part 1: How to Set Up Angular with Rails. Then add RSpec and factory_girl_rails to the Gemfile:

group :development, :test do
  gem 'rspec-rails', '~> 3.1.0'
end
 
group :test do
  gem 'database_cleaner'
  gem 'factory_girl_rails'
end

Next, bundle and install it.

bundle install
rails generate rspec:install

And edit your spec/spec_helper.rb to match:

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", FILE)
require 'rspec/rails'
require 'rspec/autorun'
require 'database_cleaner'
 
ActiveRecord::Migration.check_pending! if defined?(ActiveRecord::Migration)
RSpec.configure do |config|
  config.include FactoryGirl::Syntax::Methods
  config.infer_spec_type_from_file_location!
 
  config.expect_with :rspec do |expectations|
    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
  end
 
  config.mock_with :rspec do |mocks|
    mocks.verify_partial_doubles = true
  end
end

Create the Employee Model

Let's create the Employee model with a few fields:

bundle exec rails generate model Employee name:string email:string ssn:string salary:integer
bundle exec rake db:migrate

Next, we'll add some validations in app/models/employee.rb:

class Employee < ActiveRecord::Base
  # regex taken from Devise gem
  validates_format_of :email, with: /\A[@\s]+@([@\s]+.)+[@\s]+\z/
  validates_format_of :ssn, with: /\d{3}-\d{2}-\d{4}/
  validates_presence_of :name
  validates :salary, numericality: { only_integer: true }
end

Before creating the API interface for Angular, let's create a serializer for our Employee model. This will allow our API to expose only those fields that are necessary to Angular frontend. Add ActiveModel Serializers to the Gemfile

gem 'active_model_serializers'

And bundle install

Create the Employee API

In order to support the Angular frontend, we'll need to create an API controller at app/controllers/api/employees_controller.rb:

class Api::EmployeesController < ApplicationController
  respond_to :json
 
  def index
    serialized_employees =
      ActiveModel::ArraySerializer
               .new(Employee.all, each_serializer: EmployeeSerializer)
 
    render json: serialized_employees
  end
end

Now we need to define that EmployeeSerializer in app/serializers/employee_serializer.rb:

class EmployeeSerializer < ActiveModel::Serializer
  attributes :id, :name, :email, :ssn, :salary
end

And expose this API to the frontend in config/routes.rb:

Rails.application.routes.draw do
  get 'example' => 'example#index'
 
  namespace :api do
    resources :employees, defaults: { format: :json }
  end
end

Finally we'll add some Employee data to db/seeds.rb:

Employee.create(name: "MacGyver", email: "test@example.com", ssn: "555-55-5555", salary: 50000)
Employee.create(name: "Calhoun Tubbs", email: "test2@example.com", ssn: "123-45-6789", salary: 60000)

Seed the database and start the Rails server:

bundle exec rake db:seed
rails s

Then we can open http://localhost:3000/api/employees in the browser which will return:

[
  {
    "id": 1,
    "name": "MacGyver",
    "email": "test@example.com",
    "ssn": "555-55-5555",
    "salary": 50000
  },
  {
    "id": 2,
    "name": "Calhoun Tubbs",
    "email": "test2@example.com",
    "ssn": "123-45-6789",
    "salary": 60000
  }
]

Test the API

Now that we've verified this action is set-up correctly, let's add a factory at spec/factories/employees.rb:

FactoryGirl.define do
  factory :employee do
    name 'Test Employee'
    email 'test@example.com'
    salary 50000
    ssn '123-45-6789'
  end
end

Next, add a test at spec/controllers/api/employees_controller_spec.rb:

require 'spec_helper'
 
describe Api::EmployeesController do
  before(:each) do
    create(:employee, name: 'Calhoun Tubbs')
  end
 
  describe '#index' do
    it 'should return a json array of users' do
      get :index
      result = JSON.parse(response.body)
 
      expect(result[0]['name']).to eq('Calhoun Tubbs')
    end
  end
end

While the above test is somewhat trivial, this set up is great for verifying more complex logic in real world applications. In addition, the reason for adding an API spec prior to the Angular portion is to avoid playing the guessing game if/when problems arise; waiting to add the Angular framework helps to ease the deciphering process. If your Angular app isn't working correctly, its important to verify that the Rails backend is also behaving correctly -- the problem may not be an Angular issue.

Create the Angular frontend

You may want to take a look back at Part 1: How to Set Up Angular with Rails to review how we setup the AngularJS frontend with Rails. Let's start by defining an app in app/assets/javascripts/angular-app/modules/employee.js.coffee.erb:

@employeeApp = angular
  .module('app.employeeApp', [
    'restangular'
  ])
  .run(->
    console.log 'employeeApp running'
  )

Next, we'll define the Employees controller in app/controllers/employees.rb:

bundle exec rails g controller Employees index

Then, we'll add to the beginning of config/routes.rb:

root 'employees#index'

Finally, let's start the Angular app in app/views/employees/index.html.erb:

<div ng-app='app.employeeApp' ng-controller='EmployeeListCtrl'>
</div>

If you run the Rails server and hit http://localhost:3000/ you'll get an error about the controller not being defined yet in the javascript console. Before we create the controller, let's setup a Employee model and service to handle fetching Employee records from the Rails API.

The Employee model is defined at app/assets/javascripts/angular-app/models/employee/Employee.js.coffee:

angular.module('app.employeeApp').factory('Employee',[() ->
  Employee = () ->
 
  return new Employee()
])

There is no special behavior here yet. It is only returning the data that comes from the API.

To ease the process of working with APIs in Angular, let's add the restangular library to our project. In bower.json add restangular:

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

Then run bundle exec rake bower:install. Next, we need to add restangular and its dependency lodash to app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-rails-templates
//= require lodash
//= require restangular

Afterwards, we'll create the Employee service at app/assets/javascripts/angular-app/services/employee/EmployeeService.js.coffee:

angular.module('app.employeeApp')
  .factory('EmployeeService', [
    'Restangular', 'Employee',
    (Restangular, Employee)->
 
      model = 'employees'
 
      Restangular.extendModel(model, (obj)->
        angular.extend(obj, Employee)
      )
 
      list: ()     -> Restangular.all(model).getList()
  ])

Finally, let's create the controller at app/assets/javascripts/angular-app/controllers/employee/EmployeeListCtrl.js.coffee:

angular.module('app.employeeApp').controller("EmployeeListCtrl", [
  '$scope', 'EmployeeService',
  ($scope, EmployeeService)->
 
    EmployeeService.list().then((employees) ->
      $scope.employees = employees
      console.dir employees
    )
])

If you run the Rails server and visit http://localhost:3000/ in the javascript console you'll see a print out of the Employee objects previously seeded to the database. Next, let's add to the template code to show our Employee objects. In app/views/employees/index.html.erb:

<div ng-app='app.employeeApp' ng-controller='EmployeeListCtrl'>
  <table ng-if="employees">
    <thead>
      <th>Name</th>
      <th>Email</th>
      <th>SSN</th>
      <th>Salary</th>
    </thead>
    <tbody>
      <tr ng-repeat="employee in employees">
        <td>{{employee.name}}</td>
        <td>{{employee.email}}</td>
        <td>{{employee.ssn}}</td>
        <td>{{employee.salary | currency}}</td>
      </tr>
    </tbody>
  </table>
</div>

Open http://localhost:3000 and notice the salary field. We used the currency filter to handle formatting that data. Salary comes back from the API as a plain integer value. Angular has a number of useful filters that are included by default.

The above example is very basic. However, we created database objects, exposed those via an API, tested the API, and created an Angular app to handle the frontend. That's no small task! A few pieces are still missing though. While our Ruby API has tests, our Angular app has no tests at all. Furthermore, our employee management app is view-only.

Github code for HR app here.

In Part 3, we'll setup javascript tests, and add editing functionality to our Angular frontend.

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:

templates/
modules/
filters/
directives/
models/
services/
controllers/

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
  'templates'
])
 
# for compatibility with Rails CSRF protection
 
@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])
 
@app.run(->
  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
  ])
  .run(->
    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", [
  '$scope',
  ($scope)->
    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'
end

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
  end
end

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>
</div>

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