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