Angular JS implementation with Rails 4

Step 1 : Create rails app using rails new employee_details
Step 2 : Remove turbolinks gem from gemfile and add ‘pg’ gem for postgres. Set the rails version to 4.1.2 (Turbolinks may not work with angular js)
Step 3 : Run bundle install
Step 4 : Change database.yml to use postgres
adapter: postgresql
encoding: unicode
database: employee_details
username: postgres
password: root
pool: 100
Step 5 : Create the model
rails g model EmployeeDetail employee_id:integer employee_name:string expertise:string experience:integer education:string mobile:string address:text gender:boolean
Step 6 : Run rake db:create and rake db:migrate
Step 7 : Create a controller
rails g controller employee_details
class EmployeeDetailsController < ApplicationController
def index
Step 8 : Create a view file for employee_details
<h1>Ruby on Rails Rocks</h1>
Step 9 : Add routes for index page
root ’employee_details#index’
Step 10 : Change layout file, remove turbolinks, add ng-app with the app name and point angular javascripts
<!DOCTYPE html>
<html ng-app=”EmployeeDetails”>
<title>Employee Details</title>
<%= stylesheet_link_tag ‘application’, media: ‘all’ %>
<%= csrf_meta_tags %>

<%= yield %>
<script src=”//”></script>
<script src=”//”></script>
<%= javascript_include_tag “application” %>

Step 11 : change assets/javascripts/application.js
//= require app
//= require_tree ./../angular
Step 12 : Define app which we referred above in
window.App = angular.module(‘EmployeeDetails’, [‘ngResource’])
Step 13 : Define custom routes
EmployeeDetails::Application.routes.draw do
root ’employee_details#index’
Step 14 : Create directories as below
Running the app now should display ‘Ruby on Rails Rocks’
Step 15 : Change the index.html to below
<div ng-controller=”EmployeeDetailsCtrl”>
<h1>Message: {{title}}</h1>
Step 16 : Now create the angular controller (inside assets/angular/controllers/ referred above and assign title
App.controller ‘EmployeeDetailsCtrl’, [‘$scope’, ($scope) ->
$scope.title = “Ruby on Rails Always Rocks!”
Restart the server. Running the app now should display ‘Ruby on Rails Always Rocks’
Step 17 : Change the index method of controller and render json
class EmployeeDetailsController < ApplicationController
def index
render json: EmployeeDetail.all
Step 18 : Generate few records using seed
#Emp ID, Emp Name, Expertise, Experience, Education, Mobile, Address, Gender
employees = EmployeeDetail.all.count
if employees == 0
employee_id = [101,102,103,104,105]
employee_name = [“Arun”, “Kumar”, “Raja”, “Karthik”, “Surya”]
expertise = [“RubyOnRails”, “English Literature”, “PhP”, “Admin”, “Java”]
experience = [5,4,3,4,5]
education = [“M.C.A”, “M.A”, “B.E”, “B.E”, “B.E”]
mobile = [“9987656478”, “9878965437”,”9786587987″, “9879547897”, “9876096543”]
address = [“Chennai”, “Madurai”, “US”, “Cuddalore”, “Trivandrum”]
gender = [0,1,1,0,0]
for i in 0..4
employee_id: employee_id[i], employee_name: employee_name[i],
expertise: expertise[i], experience: experience[i],
education: education[i], mobile: mobile[i],
address: address[i], gender: gender[i]
Step 19 : Run rake db:seed
Now go and run the app, you should see the records in JSON format.
Step 20 : Create the home controller (we will be using this controller for angular implementation)
class HomeController < ApplicationController
def index
Step 21 : Apply root to home controller index method and create api routes for angular
scope :api do
get “/employee_details(.:format)” => “employee_details#index”
get “/employee_details/:id(.:format)” => “employee_details#show”
root ‘home#index’
Step 22 : Get the records on angular controller
App.controller ‘EmployeeDetailsCtrl’, [‘$scope’, ‘EmployeeDetail’, ($scope, EmployeeDetail) ->
$scope.showEmployeeDetail = null
$scope.selectedRow = null

$scope.employee_details = EmployeeDetail.query ->
$scope.showEmployeeDetail = $scope.employee_details[0]
$scope.selectedRow = 0

$scope.showEmployeeDetail = (employee, row) ->
$scope.showEmployeeDetail = employee
$scope.selectedRow = row
Step 23 : Create the service for api
App.factory ‘EmployeeDetail’, [‘$resource’, ($resource) ->
$resource ‘/api/employee_details/:id’, id: ‘@id’

Step 24 : Now change the view file for listing employees (app/views/home/index.html.erb)
<div ng-controller=”EmployeeDetailsCtrl”>
<li ng-repeat=”employee in employee_details”>
<h3>{{employee.employee_id}} <small>({{employee.employee_name}})</small></h3>
<div ng-show=”showEmployeeDetail”>
Expertise : {{showEmployeeDetail.expertise}}


Restart the server. Executing the application at http://localhost:3000 will now display the list of employees and the information of first employee.