AngularJS meets Rails

AngularJS meets Railselena torró

About me

➔ Elena Torró➔ elenatorro.com➔ github.com/elenatorro➔ twitter.com/@Elenarcolepsia

Overview

● Rails Basic Project● Assets Pipeline● Adding AngularJS

● Ruby● MVC● ORM

Ruby on Rails

Rails Project

Rails Project

Assets Pipeline

Assets Pipeline

rake

Assets Pipeline

Development● local server● !precompilation

Production● precompile:

bundle exec rake assets:precompile

Assets Pipeline

Rakefile

config/application.rb

Assets Pipeline

rake assets:precompile

rake assets:cleanrake assets:clobber

Assets PipelineIncluding assets:1. Reference link:

a. <%= javascript_include_tag params[:controller] %>b. <%= stylesheet_link_tag params[:controller] %>

2. Precompile:

3. application.js, application.css.scss → require

app/assets/javascripts/this.jslib/assets/javascripts/is.jsvendor/assets/javascripts/an.jsvendor/assets/somepackage/example.js

//= require this//= require is//= require an//= require somepackage/example

Adding AngularJS

● NPM● Bower● Gems:

○ gem 'bower-rails'○ gem 'angular-rails-templates'

Adding AngularJS - Advices

● Official and tested gems● Use rake● Use the tools you feel more comfortable with

Adding AngularJS - Bower

1. $ npm install --save bower2. gem ‘bower-rails’3. $ bundle install4. Bowerfile (not bower.json)

→ add the bower dependencies you’ll need5. $ rake bower:install6. Add paths

asset 'angular'asset 'angular-route'asset 'angular-resource'asset 'bootstrap-sass-official'

Adding AngularJS - include dependencies

routes.rb

application.js→ routes, templates, controllers

Adding AngularJS - create angular application

beers_controller→ API

main_controller→ main view (index.html)

quizz_controller→ /quizz route

MainController→ list beers

QuizzController→ three beers quizz

template: list.html

template: quizz.html

Adding AngularJS

Adding AngularJS

Adding AngularJS

Bootstrap Layout

References● http://angular-rails.com/● http://guides.rubyonrails.org/asset_pipeline.html● http://www.gotealeaf.com/blog/rails-asset-pipeline-best-practices● http://openbeerdb.com/

Repohttps://github.com/elenatorro/BeersQuizz