Brief introduction to create a very simple application using AngularJS and Ruby on Rails. The app example is on Github: https://github.com/elenatorro/BeersQuizz

1. AngularJS meets Rails
elena torró

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

3. Overview
● Rails Basic Project
● Assets Pipeline
● Adding AngularJS

4. ● Ruby
● MVC
● ORM
Ruby on Rails

5. Rails Project

6. Rails Project

7. Assets Pipeline

8. Assets Pipeline
rake

9. Assets Pipeline
Development
● local server
● !precompilation
Production
● precompile:
bundle exec rake assets:precompile

10. Assets Pipeline
Rakefile
config/application.rb

11. Assets Pipeline
rake assets:precompile
rake assets:clean
rake assets:clobber

12. Assets Pipeline
Including 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.js
lib/assets/javascripts/is.js
vendor/assets/javascripts/an.js
vendor/assets/somepackage/example.js
//= require this
//= require is
//= require an
//= require somepackage/example

13. Adding AngularJS
● NPM
● Bower
● Gems:
○ gem 'bower-rails'
○ gem 'angular-rails-templates'

14. Adding AngularJS - Advices
● Official and tested gems
● Use rake
● Use the tools you feel more comfortable with

15. Adding AngularJS - Bower
1. $ npm install --save bower
2. gem ‘bower-rails’
3. $ bundle install
4. Bowerfile (not bower.json)
→ add the bower dependencies you’ll need
5. $ rake bower:install
6. Add paths
asset 'angular'
asset 'angular-route'
asset 'angular-resource'
asset 'bootstrap-sass-official'

16. Adding AngularJS - include dependencies

17. 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

18. Adding AngularJS

19. Adding AngularJS

20. Adding AngularJS

21. Bootstrap Layout

22. 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/
Repo
https://github.com/elenatorro/BeersQuizz