Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AngularJS meets Rails
elena 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:clean
rake assets:clobber
Assets Pipeline
Including assets:
1. Reference link:
a. <%= javascript_include_tag params[:controller] %>
b. <%= styleshee...
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 bower
2. gem ‘bower-rails’
3. $ bundle install
4. Bowerfile (not bower.js...
Adding AngularJS - include dependencies
routes.rb
application.js
→ routes, templates, controllers
Adding AngularJS - create angular
application
beers_controller
→...
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...
Upcoming SlideShare
Loading in …5
×

AngularJS meets Rails

787 views

Published on

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

Published in: Software
  • Be the first to comment

AngularJS meets Rails

  1. 1. AngularJS meets Rails elena torró
  2. 2. About me ➔ Elena Torró ➔ elenatorro.com ➔ github.com/elenatorro ➔ twitter.com/@Elenarcolepsia
  3. 3. Overview ● Rails Basic Project ● Assets Pipeline ● Adding AngularJS
  4. 4. ● Ruby ● MVC ● ORM Ruby on Rails
  5. 5. Rails Project
  6. 6. Rails Project
  7. 7. Assets Pipeline
  8. 8. Assets Pipeline rake
  9. 9. Assets Pipeline Development ● local server ● !precompilation Production ● precompile: bundle exec rake assets:precompile
  10. 10. Assets Pipeline Rakefile config/application.rb
  11. 11. Assets Pipeline rake assets:precompile rake assets:clean rake assets:clobber
  12. 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. 13. Adding AngularJS ● NPM ● Bower ● Gems: ○ gem 'bower-rails' ○ gem 'angular-rails-templates'
  14. 14. Adding AngularJS - Advices ● Official and tested gems ● Use rake ● Use the tools you feel more comfortable with
  15. 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. 16. Adding AngularJS - include dependencies
  17. 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. 18. Adding AngularJS
  19. 19. Adding AngularJS
  20. 20. Adding AngularJS
  21. 21. Bootstrap Layout
  22. 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

×