Débuter avec
Rails::API et AngularJS
en 10 minutes
Sommaire
1. Architecture
2. Rails::API
– Construire son API
– Gérer le Cross-Origin Resource Sharing (CORS)

1. AngularJS
...
Achitecture

08/10/13

Débuter avec Rails::API et AngularJS

3
Routes

Vues / Templates

Serveur

Controllers
REST
API

Routes

Vues

Services
Controller

Client
08/10/13

Model
Débuter...
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 R...
Rails::API – Générer le contenu
rails g scaffold Task
title:string description:text done:boolean

08/10/13

Débuter avec R...
Rails::API – Points d’entrée
rake routes

08/10/13

Débuter avec Rails::API et AngularJS

9
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
Domaine A

Domaine B

XMLHttpRequest

JS
CORS

08/...
Rails::API – Ce qui change…
• ApplicationController

08/10/13

Débuter avec Rails::API et AngularJS

14
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

08/10/13

application.js

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
TasksService

@id => va chercher l’attribut id de l’objet
08/10/13

Débuter avec Rail...
AngularJS
Les différentes actions (CRUD)

08/10/13

Débuter avec Rails::API et AngularJS

21
AngularJS – Lister les tâches
View

08/10/13

Débuter avec Rails::API et AngularJS

22
AngularJS – Lister les tâches
Controller

08/10/13

Débuter avec Rails::API et AngularJS

23
AngularJS – Créer une tâche
View

08/10/13

Débuter avec Rails::API et AngularJS

24
AngularJS – Créer une tâche
Controller

08/10/13

Débuter avec Rails::API et AngularJS

25
Ressources
• RubyOnRails
– http://rubyonrails.org/

• AngularJS
– http://angularjs.org/

• Todo-Api
https://github.com/fdu...
Pour aller plus loin
• Angular UI
http://angular-ui.github.io/

• AngularJS Rails Resource
https://github.com/FineLineProt...
MERCI !
Questions ?
@fduperier
linkedin.com/in/fredericduperier
frederic-duperier.com

08/10/13

Débuter avec Rails::API e...
Prochain SlideShare
Chargement dans…5
×

Débuter avec Rails::API & AngularJS

1 864 vues

Publié le

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)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 864
Sur SlideShare
0
Issues des intégrations
0
Intégrations
440
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Débuter avec Rails::API & AngularJS

  1. 1. Débuter avec Rails::API et AngularJS en 10 minutes
  2. 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. 3. Achitecture 08/10/13 Débuter avec Rails::API et AngularJS 3
  4. 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. 5. Rails::API 08/10/13 Débuter avec Rails::API et AngularJS 5
  6. 6. Rails::API Construire son API 08/10/13 Débuter avec Rails::API et AngularJS 6
  7. 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. 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. 9. Rails::API – Points d’entrée rake routes 08/10/13 Débuter avec Rails::API et AngularJS 9
  10. 10. Rails::API – Lister les tâches GET http://localhost:3000/tasks 08/10/13 Débuter avec Rails::API et AngularJS 10
  11. 11. Rails::API Cross-Origin Resource Sharing (CORS) 08/10/13 Débuter avec Rails::API et AngularJS 11
  12. 12. Rails::API – Vous avez dit CORS ? • CORS ? Quèsaco ? 08/10/13 Débuter avec Rails::API et AngularJS 12
  13. 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. 14. Rails::API – Ce qui change… • ApplicationController 08/10/13 Débuter avec Rails::API et AngularJS 14
  15. 15. Rails::API – Un controller spécifique • Routes • CorsController 08/10/13 Débuter avec Rails::API et AngularJS 15
  16. 16. AngularJS 08/10/13 Débuter avec Rails::API et AngularJS 16
  17. 17. AngularJS Créer le client de l’API 08/10/13 Débuter avec Rails::API et AngularJS 17
  18. 18. AngularJS – Posons les bases index.html 08/10/13 application.js Débuter avec Rails::API et AngularJS 18
  19. 19. AngularJS – Définir les routes 08/10/13 Débuter avec Rails::API et AngularJS 19
  20. 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. 21. AngularJS Les différentes actions (CRUD) 08/10/13 Débuter avec Rails::API et AngularJS 21
  22. 22. AngularJS – Lister les tâches View 08/10/13 Débuter avec Rails::API et AngularJS 22
  23. 23. AngularJS – Lister les tâches Controller 08/10/13 Débuter avec Rails::API et AngularJS 23
  24. 24. AngularJS – Créer une tâche View 08/10/13 Débuter avec Rails::API et AngularJS 24
  25. 25. AngularJS – Créer une tâche Controller 08/10/13 Débuter avec Rails::API et AngularJS 25
  26. 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. 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. 28. MERCI ! Questions ? @fduperier linkedin.com/in/fredericduperier frederic-duperier.com 08/10/13 Débuter avec Rails::API et AngularJS 28

×