Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Débuter avec Rails::API & AngularJS

2,032 views

Published on

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)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×