AngularJS On Rails by Daniele Spinosa
-
Upload
commit-software -
Category
Software
-
view
313 -
download
0
description
Transcript of AngularJS On Rails by Daniele Spinosa
![Page 1: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/1.jpg)
AngularJS on RailsCome integrare AngularJS in un'applicazione Rails senza essere insultati dagli altri sviluppatori.
![Page 2: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/2.jpg)
Quando programmi,non c'è differenza tra te
e un cinghiale!1
Sconosciuto Toscano
![Page 3: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/3.jpg)
![Page 4: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/4.jpg)
Creare una API json in RoR per dialogare con AngularJS
![Page 5: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/5.jpg)
AngularJS: API racchiusa in un Servicedefinire una 'resource' intorno alla rotta della API
LegoSet = $resource("/api/v1/lego_sets/:id", {id: "@id"}, ...)
![Page 6: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/6.jpg)
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 endend
GET http://lego_app.com/api/v1/lego_sets/GET http://lego_app.com/api/v1/lego_sets/21103GET http://lego_app.com/api/v1/lego_parts/3001
![Page 7: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/7.jpg)
app `--controllers |-- api | `-- v1 | |-- lego_sets_controller.rb | `-- lego_parts_controller.rb |-- application_controller.rb
/app/controllers/api/v1/lego_sets_controller.rbmodule Api::V1 class LegoSetsController < ApplicationController respond_to :json
def index respond_with LegoSet.all end
def show respond_with LegoSet.find(params[:id]) end endend
![Page 8: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/8.jpg)
Rails 4 request paramsProtezione 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, ...) endend
![Page 9: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/9.jpg)
Si puo agire direttamente nel Layoutapp/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...
![Page 10: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/10.jpg)
Si può usare l'asset pipelineI 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>...
![Page 11: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/11.jpg)
La soluzione per tutte le stagionigem angularjs-railsbundle
quindi
//= require angular
oppure, se si vuole usare la versione instabile
//= require unstable/angular
![Page 12: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/12.jpg)
Indipendentemente dalla soluzione adottata è
necessario prendere alcune precauzioni per evitare grattacapi in produzione.
![Page 13: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/13.jpg)
Proteggere il codice Angular (1)1. Mangle: false
disabilitare il renaming delle variabili (mangle)
# nel file config/environments/production.rbconfig.assets.js_compressor = Uglifier.new(mangle: false)
![Page 14: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/14.jpg)
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) -> ...] ^ ^
![Page 15: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/15.jpg)
Proteggere il codice Angular (3)3. usare una gemma
gem 'ngannotate-rails'
https://github.com/kikonen/ngannotate-rails
![Page 16: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/16.jpg)
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
![Page 17: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/17.jpg)
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
![Page 18: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/18.jpg)
Sfruttare la protezione CSRF di RoRProteggere 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
![Page 19: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/19.jpg)
Usare i turbolinksNon usate il tag ng-app nell'html. Usate page:loadapplication.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.
![Page 20: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/20.jpg)
Ulteriori alternative
![Page 21: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/21.jpg)
![Page 22: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/22.jpg)
Yeoman4 SPA (single page applications)
4 sviluppatori specializzati in JS
1. rails new lego_app && cd lego_app2. mkdir angular && cd angular3. npm install -g yo grunt-cli bower4. npm install generator-angular generator-karma5. yo angular6. npm install && bower install
![Page 23: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/23.jpg)
![Page 24: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/24.jpg)
Bower + Grunt(rails senza asset pipeline)
4 molto disaccoppiato
4 perfetto se si prevede un upgrade di Rails
![Page 25: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/25.jpg)
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
![Page 26: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/26.jpg)
Non usare Rails4 rails-api
4 Sinatra
4 AngularFire + Firebase
4 NodeJS
4 Go
![Page 27: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/27.jpg)
Sviluppate per bene.
![Page 28: AngularJS On Rails by Daniele Spinosa](https://reader033.fdocuments.in/reader033/viewer/2022060200/5598cd961a28ab82338b45f9/html5/thumbnails/28.jpg)
grazie.@microspino