This document provides an overview of setting up a Ruby on Rails application that integrates AngularJS and Twitter Bootstrap. It discusses why these technologies are used together and how to set them up, including installing necessary gems, modifying files, and adding AngularJS controllers. Code examples are provided to demonstrate basic CRUD functionality using Rails and AngularJS. The document concludes by describing the presenters' consulting company and providing contact information.

1. www.riosoftware.com.au
Ruby on Rails + Twitter
Bootstrap + AngularJS
Delightful web development
1

2. Topics
• Why all of these things together ?
• Ruby on Rails App Setup
• Twitter Bootstrap Setup
• AngularJS setup
• CRUD example
• Wrapping up

3. Why all of these things
together ?
• Ruby on Rails is a proven web apps killer framework.
• Easy to build web apps and web api’s.
• Today’s web apps are more and more Javascript/client side
oriented.
• AngularJS is a great choice, as it is a complete front-end
non-obtrusive framework which extends the HTML
capabilities.
• Including validations, data models, state management,
and so on.

4. Ruby on Rails App Setup
• There are many ways to create a Ruby on Rails application.
My favourites ones are :
• rails new rails-angular-demo -m
https://raw.github.com/RailsApps/rails-
composer/master/composer.rb
• rails new rails-angular-demo
• In my setup I’m using : slim and sass to build my
templates, but fell free to use anything you want. You can
check my project out at the end of the presentation !

5. Rails Composer
• This is my preferred
option, as it helps to
setup the initial project
with my preferred gems. But, fell free to create it
anyway you want !
• Take a look at: https://github.com/RailsApps/rails-
composer/

6. Now, open your project.
(I’m using RubyMine)
6

7. Modifications to the Gemfile
• Add the following entries in Yellow :
source ‘https://rubygems.org'
#Add this one
source ‘http://rails-assets.org'
ruby '2.2.0'
gem 'rails', '4.2.0'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
#Add These two as well
gem ‘rails-assets-bootstrap'
gem ‘rails-assets-angularjs'
...
7

8. Modifying application.js
• Add these entries :
...
//= require bootstrap
//= require angularjs
...
8

9. Modifying application.scss
• Add this entry :
*= require bootstrap
9

10. AngularJS
&
Twitter bootstrap setup
• Just apply it to your templates…
10

11. application.html.slim
doctype html
html lang="en" ng-app="demoApp"
head
meta charset="utf-8"
meta content="IE=edge" http-equiv="X-UA-Compatible"
meta content="width=device-width, initial-scale=1" name="viewport"
meta content="" name="description"
meta content="" name="author"
link href="../../favicon.ico" rel="icon"
title Rails AngularJS Demo
== stylesheet_link_tag "application", :media => 'all'
== javascript_include_tag 'application'
== csrf_meta_tags
body
== render 'layouts/navigation'
.container
== render 'layouts/messages'
== yield
footer.footer
.container
p.text-muted
a href="http://www.riosoftware.com.au" target="_blank" title='Rio Software' Copyright Rio Software.
• The initial angular setup needs the tag ng-app=“Your Application Name"
11

12. customers/index.html.slim
form name="form" id="form" action="/customers/new" method="GET" novalidate="novalidate"
table.table
caption Customer Lists
thead
tr
th #
th First Name
th Last Name
th
th
tbody
- @customers.each do |customer|
tr
th scope="row"
= customer.id
td
= customer.first_name
td
= customer.last_name
td
= link_to 'Edit', edit_customer_path(customer), class: 'btn btn-primary', method: :post
td
= link_to 'Delete', customer_path(customer), class: 'btn btn-danger', method: :delete
button.btn.btn-default type="submit" Add New Customer
12

13. customers/new.html.slim
.customers ng-controller="CustomersController"
form name="form" id="form" action="/customers" method="POST" novalidate="novalidate"
= render 'customers/shared/customer_details'
button.btn.btn-default type="submit" ng-disabled="!form.$valid" Submit
13

14. customers/edit.html.slim
.customers ng-controller="EditCustomersController"
form name="form" id="form" action="#{customer_path}" method="POST" novalidate="novalidate"
= render 'customers/shared/customer_details'
input name="_method" type="hidden" value="patch"
button.btn.btn-default type="submit" ng-disabled="!form.$valid" Submit
14

15. customers/shared/_customer
_details.html.slim
.form-group ng-class="{'has-success' : form['customer[first_name]'].$valid, 'has-error' :
!form['customer[first_name]'].$valid}"
label for="customer[first_name]" First Name
input#first_name.form-control type="text" name="customer[first_name]" ng-
model="customer.firstName" ng-init="customer.firstName='#{@customer.first_name}'" ng-
required="true"
label class="control-label" ng-show="form['customer[first_name]'].$error.required"
for="customer[first_name]" Invalid
.form-group ng-class="{'has-success' : form['customer[last_name]'].$valid, 'has-error' :
!form['customer[last_name]'].$valid}"
label for="customer[last_name]" Last Name
input#last_name.form-control type="text" name="customer[last_name]" ng-
model="customer.lastName" ng-init="customer.lastName='#{@customer.last_name}'" ng-
required="true"
label class="control-label" ng-show="form['customer[last_name]'].$error.required"
for="customer[last_name]" Invalid
15

16. Your controller
class CustomersController < ApplicationController
def new
@customer = Customer.new
end
def create
@customer = Customer.new(filtered_params)
@customer.save
redirect_to customers_path
end
def index
@customers = Customer.all
end
def edit
@customer = Customer.find(params[:id])
end
def update
@customer = Customer.find(params[:id])
@customer.first_name = filtered_params[:first_name]
@customer.last_name = filtered_params[:last_name]
@customer.save
redirect_to customers_path
end
def destroy
@customer = Customer.find(params[:id])
@customer.delete
redirect_to customers_path
end
private
def filtered_params
params.require(:customer).permit(:id, :first_name, :last_name)
end
end
16

17. Your routes.rb
Rails.application.routes.draw do
root to: 'customers#index'
resources :customers
post 'customers/:id/edit' => 'customers#edit'
end
17

18. Details of AngularJS setup
• Just add the angular tags on your template
input#last_name.form-control type="text" name="customer[last_name]"
ng-model="customer.lastName"
ng-init="customer.lastName='#{@customer.last_name}'" ng-required="true"
• Add a new demo.js for your application
var demoApp = angular.module('demoApp', []);
• Add a new controllers.js
demoApp.controller('CustomersController', ['$scope', function ($scope) {
$scope.customer = {firstName: '', lastName: ''};
}]);
demoApp.controller('EditCustomersController', ['$scope', function ($scope) {
//Something is gonna happen here :-)
}]);
• Change your Add a new application.js
//= require demo
//= require_tree .
•
18

19. Just run your app
• rails s
=> Booting WEBrick
=> Rails 4.2.0 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2015-02-13 22:21:26] INFO WEBrick 1.3.1
[2015-02-13 22:21:26] INFO ruby 2.2.0 (2014-12-25) [x86_64-darwin14]
Wait for it…
19

20. Voilà
20

21. About us
• We are an agile Sydney based IT consultancy, focused on delivering
value to our customers and partners.
• We provide software development, consultancy, and training. We
use the best tools, languages and platforms to build the best
products.
• Our website : www.riosoftware.com.au
• Phone: 02 9432 7884
• Email: contact@riosoftware.com.au
• This slides code : https://bitbucket.org/riosoftware/rails-angular-demo
21