AngularJS on Rails
Come integrare AngularJS in un'applicazione Rails
senza essere insultati dagli altri sviluppatori.
Quando programmi,
non c'è differenza tra te
e un cinghiale!
1
SconosciutoToscano
Creare una API json in RoR
per dialogare con
AngularJS
AngularJS: API racchiusa in un Service
definire una 'resource' intorno alla rotta della API
LegoSet = $resource("/api/v1/l...
API + versioning
# routes.rb
namespace :api, defaults: {format: 'json'} do
namespace :v1 do
resources :lego_sets, only: [:...
app
`--controllers
|-- api
| `-- v1
| |-- lego_sets_controller.rb
| `-- lego_parts_controller.rb
|-- application_controlle...
Rails 4 request params
Protezione dal mass-assignment spostata nel
controller.
Utile creare un helper method
def safe_lego...
Si puo agire direttamente nel Layout
app/views/layouts/application.html.erb
...
<head>
<%= javascript_include_tag "//ajax....
Si può usare l'asset pipeline
I files di angular possono essere inseriti manualmente in
app/assets/javascripts/application...
La soluzione per tutte le stagioni
gem angularjs-rails
bundle
quindi
//= require angular
oppure, se si vuole usare la vers...
Indipendentemente dalla
soluzione adottata è
necessario prendere alcune
precauzioni per evitare
grattacapi in produzione.
Proteggere il codice Angular (1)
1. Mangle: false
disabilitare il renaming delle variabili (mangle)
# nel file config/envi...
Proteggere il codice Angular (2)
2. depenency injection naming
Specificare i nomi degli argomenti in ogni funzione che
acc...
Proteggere il codice Angular (3)
3. usare una gemma
gem 'ngannotate-rails'
https://github.com/kikonen/ngannotate-rails
Strutturare il codice JS (1)
require risorse angular dopo i turbolinks e prima di
tree
// app/assets/javascript/applicatio...
Strutturare il codice JS (2)
Ogni app. AngularJS consiste in un modulo principale,
controllers, directives e services. Sud...
Sfruttare la protezione CSRF di RoR
Proteggere l'applicazinone da attacchi cross-site
request forgery attraverso un token ...
Usare i turbolinks
Non usate il tag ng-app nell'html. Usate page:load
application.js.coffee
$(document).on 'page:load', ->...
Ulteriori alternative
Yeoman
4 SPA (single page applications)
4 sviluppatori specializzati in JS
1. rails new lego_app && cd lego_app
2. mkdir a...
Bower + Grunt
(rails senza asset pipeline)
4 molto disaccoppiato
4 perfetto se si prevede un upgrade di Rails
rails-assets
Proxy tra Bundler e Bower: converte i componenti
Bower in rails gems.
1. aggiungere https://rails-assets.org ...
Non usare Rails
4 rails-api
4 Sinatra
4 AngularFire + Firebase
4 NodeJS
4 Go
Sviluppate per bene.
grazie.
@microspino
AngularJS On Rails by Daniele Spinosa
AngularJS On Rails by Daniele Spinosa
AngularJS On Rails by Daniele Spinosa
Upcoming SlideShare
Loading in …5
×

AngularJS On Rails by Daniele Spinosa

727 views

Published on

Come integrare AngularJS in un'applicazione Rails.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
727
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AngularJS On Rails by Daniele Spinosa

  1. 1. AngularJS on Rails Come integrare AngularJS in un'applicazione Rails senza essere insultati dagli altri sviluppatori.
  2. 2. Quando programmi, non c'è differenza tra te e un cinghiale! 1 SconosciutoToscano
  3. 3. Creare una API json in RoR per dialogare con AngularJS
  4. 4. AngularJS: API racchiusa in un Service definire una 'resource' intorno alla rotta della API LegoSet = $resource("/api/v1/lego_sets/:id", {id: "@id"}, ...)
  5. 5. API + versioning # routes.rb namespace :api, defaults: {format: 'json'} do namespace :v1 do resources :lego_sets, only: [:index, :show] do resources :lego_parts, only: [:show] end end end GET http://lego_app.com/api/v1/lego_sets/ GET http://lego_app.com/api/v1/lego_sets/21103 GET http://lego_app.com/api/v1/lego_parts/3001
  6. 6. app `--controllers |-- api | `-- v1 | |-- lego_sets_controller.rb | `-- lego_parts_controller.rb |-- application_controller.rb /app/controllers/api/v1/lego_sets_controller.rb module Api::V1 class LegoSetsController < ApplicationController respond_to :json def index respond_with LegoSet.all end def show respond_with LegoSet.find(params[:id]) end end end
  7. 7. Rails 4 request params Protezione dal mass-assignment spostata nel controller. Utile creare un helper method def safe_lego_set_params def safe_params params.require(:lego_set).permit(:set_id, :piece_id, :num, ...) end end
  8. 8. Si puo agire direttamente nel Layout app/views/layouts/application.html.erb ... <head> <%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" %> <%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js" %> </head> Rapido ma molto da cinghiale...
  9. 9. Si può usare l'asset pipeline I files di angular possono essere inseriti manualmente in app/assets/javascripts/application.js //= require jquery //= require jquery_ujs ... //= require lib/angular.min //= require lib/angular.resource //= require <nome_app_angular> ...
  10. 10. La soluzione per tutte le stagioni gem angularjs-rails bundle quindi //= require angular oppure, se si vuole usare la versione instabile //= require unstable/angular
  11. 11. Indipendentemente dalla soluzione adottata è necessario prendere alcune precauzioni per evitare grattacapi in produzione.
  12. 12. Proteggere il codice Angular (1) 1. Mangle: false disabilitare il renaming delle variabili (mangle) # nel file config/environments/production.rb config.assets.js_compressor = Uglifier.new(mangle: false)
  13. 13. Proteggere il codice Angular (2) 2. depenency injection naming Specificare i nomi degli argomenti in ogni funzione che accetta 'services' ad es.: @LegoCtrl = ("$scope", "LegoSet", $scope, LegoSet) -> angular.module('LegoApp').factory 'LegoSet', [ $resource, ($resource) -> ...] ^ ^
  14. 14. Proteggere il codice Angular (3) 3. usare una gemma gem 'ngannotate-rails' https://github.com/kikonen/ngannotate-rails
  15. 15. Strutturare il codice JS (1) require risorse angular dopo i turbolinks e prima di tree // app/assets/javascript/application.js //= require jquery //= require jquery_ujs //= require turbolinks //= require lib/angular.min //= require lib/angular.resource //= require <nome_app_angular> //= require tree
  16. 16. Strutturare il codice JS (2) Ogni app. AngularJS consiste in un modulo principale, controllers, directives e services. Suddividere il codice in cartelle all'interno di app/assets/javascripts: 4 controllers 4 directives 4 services ...E lib per le tutte le altre dipendenze
  17. 17. Sfruttare la protezione CSRF di RoR Proteggere l'applicazinone da attacchi cross-site request forgery attraverso un token inserito nella sezione head di ogni pagina. Usare quel token in tutte le API requests. application.js.coffee LegoApp.config ($httpProvider) -> authToken = $("meta[name="csrf-token"]").attr("content") $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken
  18. 18. Usare i turbolinks Non usate il tag ng-app nell'html. Usate page:load application.js.coffee $(document).on 'page:load', -> $('[ng-app]').each -> module = $(this).attr('ng-app') angular.bootstrap(this, [module]) In questo modo l'applicazione AngularJS verrà inizializzata correttamente ogni volta che i turbolinks fanno fetch&replace.
  19. 19. Ulteriori alternative
  20. 20. Yeoman 4 SPA (single page applications) 4 sviluppatori specializzati in JS 1. rails new lego_app && cd lego_app 2. mkdir angular && cd angular 3. npm install -g yo grunt-cli bower 4. npm install generator-angular generator-karma 5. yo angular 6. npm install && bower install
  21. 21. Bower + Grunt (rails senza asset pipeline) 4 molto disaccoppiato 4 perfetto se si prevede un upgrade di Rails
  22. 22. rails-assets Proxy tra Bundler e Bower: converte i componenti Bower in rails gems. 1. aggiungere https://rails-assets.org come gem source 2. indicare i componenti Bower da convertire: gem 'rails-assets-BOWER_PACKAGE_NAME' 3. bundle install: recupera il componente dal registro di Bower e lo 'impacchetta' come gem
  23. 23. Non usare Rails 4 rails-api 4 Sinatra 4 AngularFire + Firebase 4 NodeJS 4 Go
  24. 24. Sviluppate per bene.
  25. 25. grazie. @microspino

×