Upload
frederic-duperier
View
1.156
Download
2
Embed Size (px)
DESCRIPTION
Découvrez comment construire une application from scratch en utilisant Rails::API et AngularJS. 1. Nous construirons tout d'abord un BackOffice offrant une API REST grâce à Rails::API ; 2. Nous nous attaquerons ensuite au FrontOffice permettant de consommer notre API en utilisant le framework AngularJS ; 3. Nous verrons finalement comment gérer les problématiques de Cross-Origin Resource Sharing (CORS)
Citation preview
Débuter avecRails::API et AngularJS
en 10 minutes
Sommaire
1. Architecture
2. Rails::API– Construire son API– Gérer le Cross-Origin Resource Sharing (CORS)
3. AngularJS– Créer le client de l’API– Les différentes actions (CRUD)
08/10/13 Débuter avec Rails::API et AngularJS 2
Achitecture
08/10/13 Débuter avec Rails::API et AngularJS 3
Vues / Templates
08/10/13 Débuter avec Rails::API et AngularJS 4
Controllers
Routes
Services
REST API
Client
Routes Vues
Model
Controller
Serveur
Rails::API
08/10/13 Débuter avec Rails::API et AngularJS 5
Rails::API
Construire son API
08/10/13 Débuter avec Rails::API et AngularJS 6
Rails::API – Créer une nouvelle API
rails-api new todo-api--skip-action-mailer --
skip-sprockets
08/10/13 Débuter avec Rails::API et AngularJS 7
Rails::API – Générer le contenu
rails g scaffold Tasktitle:string description:text
done:boolean
08/10/13 Débuter avec Rails::API et AngularJS 8
Rails::API – Points d’entrée
08/10/13 Débuter avec Rails::API et AngularJS 9
rake routes
Rails::API – Lister les tâches
GET http://localhost:3000/tasks
08/10/13 Débuter avec Rails::API et AngularJS 10
Rails::API
Cross-Origin Resource Sharing (CORS)
08/10/13 Débuter avec Rails::API et AngularJS 11
Rails::API – Vous avez dit CORS ?
• CORS ? Quèsaco ?
08/10/13 Débuter avec Rails::API et AngularJS 12
Rails::API – Vous avez dit CORS ?
• Requête XMLHttpRequest entre A et B
08/10/13 Débuter avec Rails::API et AngularJS 13
Domaine A Domaine B
XMLHttpRequest
JS
CORS
Rails::API – Ce qui change…
08/10/13 Débuter avec Rails::API et AngularJS 14
• ApplicationController
Rails::API – Un controller spécifique
• Routes
• CorsController
08/10/13 Débuter avec Rails::API et AngularJS 15
AngularJS
08/10/13 Débuter avec Rails::API et AngularJS 16
AngularJS
Créer le client de l’API
08/10/13 Débuter avec Rails::API et AngularJS 17
AngularJS – Posons les bases
index.html application.js
08/10/13 Débuter avec Rails::API et AngularJS 18
AngularJS – Définir les routes
08/10/13 Débuter avec Rails::API et AngularJS 19
AngularJS – Créer le client de l’API
08/10/13 Débuter avec Rails::API et AngularJS 20
TasksService
@id => va chercher l’attribut id de l’objet
AngularJS
Les différentes actions (CRUD)
08/10/13 Débuter avec Rails::API et AngularJS 21
AngularJS – Lister les tâches
08/10/13 Débuter avec Rails::API et AngularJS 22
View
AngularJS – Lister les tâches
08/10/13 Débuter avec Rails::API et AngularJS 23
Controller
AngularJS – Créer une tâche
08/10/13 Débuter avec Rails::API et AngularJS 24
View
AngularJS – Créer une tâche
08/10/13 Débuter avec Rails::API et AngularJS 25
Controller
Ressources
• RubyOnRails– http://rubyonrails.org/
• AngularJS– http://angularjs.org/
• Todo-Api https://github.com/fduperier/todo-api
• Todo-Web https://github.com/fduperier/todo-web
08/10/13 Débuter avec Rails::API et AngularJS 26
Pour aller plus loin
• Angular UI http://angular-ui.github.io/
• AngularJS Rails Resourcehttps
://github.com/FineLinePrototyping/angularjs-rails-resource
08/10/13 Débuter avec Rails::API et AngularJS 27
MERCI !Questions ?
@fduperier linkedin.com/in/fredericduperier
frederic-duperier.com
08/10/13 Débuter avec Rails::API et AngularJS 28