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
– 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
Routes

Vues / Templates

Serveur

Controllers
REST
API

Routes

Vues

Services
Controller

Client
08/10/13

Model
Débuter avec Rails::API et AngularJS

4
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 Task
title:string description:text done:boolean

08/10/13

Débuter avec Rails::API et AngularJS

8
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/10/13

Débuter avec Rails::API et AngularJS

13
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 Rails::API et AngularJS

20
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/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 Resource
https://github.com/FineLinePrototyping/angularj
s-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

Débuter avec Rails::API & AngularJS