AngularJS meets Rails
2 likes897 views
The document outlines the integration of AngularJS with Rails, detailing steps for setting up a Rails project and customizing the asset pipeline. It includes instructions for adding AngularJS through npm and Bower, and provides guidance on organizing assets and routes. Additional references and a GitHub repository are listed for further information and examples.
![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](https://image.slidesharecdn.com/angularjsmeetsrails1-150625202320-lva1-app6891/85/AngularJS-meets-Rails-12-320.jpg)
AngularJS meets Rails
- 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
- 9. Assets Pipeline Development ● local server ● !precompilation Production ● precompile: bundle exec rake assets:precompile
- 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