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)

1. Débuter avec
Rails::API et AngularJS
en 10 minutes

2. Sommaire
1. Architecture
2. Rails::API
– Construire son API
– Gérer le Cross-Origin Resource Sharing (CORS)
1. AngularJS
– Créer le client de l’API
– Les différentes actions (CRUD)
08/10/13
Débuter avec Rails::API et AngularJS
2

3. Achitecture
08/10/13
Débuter avec Rails::API et AngularJS
3

4. Routes
Vues / Templates
Serveur
Controllers
REST
API
Routes
Vues
Services
Controller
Client
08/10/13
Model
Débuter avec Rails::API et AngularJS
4

5. Rails::API
08/10/13
Débuter avec Rails::API et AngularJS
5

6. Rails::API
Construire son API
08/10/13
Débuter avec Rails::API et AngularJS
6

7. 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

8. Rails::API – Générer le contenu
rails g scaffold Task
title:string description:text done:boolean
08/10/13
Débuter avec Rails::API et AngularJS
8

9. Rails::API – Points d’entrée
rake routes
08/10/13
Débuter avec Rails::API et AngularJS
9

10. Rails::API – Lister les tâches
GET http://localhost:3000/tasks
08/10/13
Débuter avec Rails::API et AngularJS
10

11. Rails::API
Cross-Origin Resource Sharing (CORS)
08/10/13
Débuter avec Rails::API et AngularJS
11

12. Rails::API – Vous avez dit CORS ?
• CORS ? Quèsaco ?
08/10/13
Débuter avec Rails::API et AngularJS
12

13. Rails::API – Vous avez dit CORS ?
• Requête XMLHttpRequest entre A et B
Domaine A
Domaine B
XMLHttpRequest
JS
CORS
08/10/13
Débuter avec Rails::API et AngularJS
13

14. Rails::API – Ce qui change…
• ApplicationController
08/10/13
Débuter avec Rails::API et AngularJS
14

15. Rails::API – Un controller spécifique
• Routes
• CorsController
08/10/13
Débuter avec Rails::API et AngularJS
15

16. AngularJS
08/10/13
Débuter avec Rails::API et AngularJS
16

17. AngularJS
Créer le client de l’API
08/10/13
Débuter avec Rails::API et AngularJS
17

18. AngularJS – Posons les bases
index.html
08/10/13
application.js
Débuter avec Rails::API et AngularJS
18

19. AngularJS – Définir les routes
08/10/13
Débuter avec Rails::API et AngularJS
19

20. AngularJS – Créer le client de l’API
TasksService
@id => va chercher l’attribut id de l’objet
08/10/13
Débuter avec Rails::API et AngularJS
20

21. AngularJS
Les différentes actions (CRUD)
08/10/13
Débuter avec Rails::API et AngularJS
21

22. AngularJS – Lister les tâches
View
08/10/13
Débuter avec Rails::API et AngularJS
22

23. AngularJS – Lister les tâches
Controller
08/10/13
Débuter avec Rails::API et AngularJS
23

24. AngularJS – Créer une tâche
View
08/10/13
Débuter avec Rails::API et AngularJS
24

25. AngularJS – Créer une tâche
Controller
08/10/13
Débuter avec Rails::API et AngularJS
25

26. 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

27. Pour aller plus loin
• Angular UI
http://angular-ui.github.io/
• AngularJS Rails Resource
https://github.com/FineLinePrototyping/angularj
s-rails-resource
08/10/13
Débuter avec Rails::API et AngularJS
27

28. MERCI !
Questions ?
@fduperier
linkedin.com/in/fredericduperier
frederic-duperier.com
08/10/13
Débuter avec Rails::API et AngularJS
28