From 478b2134f1c21e306707fd24381077f05f6464ab Mon Sep 17 00:00:00 2001 From: William Petit Date: Fri, 10 Apr 2015 01:46:41 +0200 Subject: [PATCH] Exo ngResource --- .../angular/exercices/ng-resource/.gitignore | 1 + .../angular/exercices/ng-resource/app.js | 15 +++++++++++++ .../angular/exercices/ng-resource/index.html | 17 ++++++++++++++ .../exercices/ng-resource/package.json | 15 +++++++++++++ .../angular/exercices/ng-resource/server.js | 10 +++++++++ javascript/angular/exercices/package.json | 1 + javascript/angular/index.html | 2 ++ javascript/angular/ng-resource-1.md | 13 +++++++++++ javascript/angular/ng-resource-2.md | 22 +++++++++++++++++++ 9 files changed, 96 insertions(+) create mode 100644 javascript/angular/exercices/ng-resource/.gitignore create mode 100644 javascript/angular/exercices/ng-resource/app.js create mode 100644 javascript/angular/exercices/ng-resource/index.html create mode 100644 javascript/angular/exercices/ng-resource/package.json create mode 100644 javascript/angular/exercices/ng-resource/server.js create mode 100644 javascript/angular/ng-resource-1.md create mode 100644 javascript/angular/ng-resource-2.md diff --git a/javascript/angular/exercices/ng-resource/.gitignore b/javascript/angular/exercices/ng-resource/.gitignore new file mode 100644 index 0000000..d1f8b0c --- /dev/null +++ b/javascript/angular/exercices/ng-resource/.gitignore @@ -0,0 +1 @@ +data.nedb diff --git a/javascript/angular/exercices/ng-resource/app.js b/javascript/angular/exercices/ng-resource/app.js new file mode 100644 index 0000000..092d53c --- /dev/null +++ b/javascript/angular/exercices/ng-resource/app.js @@ -0,0 +1,15 @@ +/* + * Énoncé: + * + * Via le module ngResource, créer une micro application des gestions d'entitées connecté au micro serveur REST fournit. + * Les entités seront des dictionnaires clé/valeur, sans schéma. + * + * L'interface devra présenter: + * - Une liste affichant l'ensemble des entités créées sur le serveur + * - Un formulaire de création/édition d'une entité, avec la possibilité d'ajouter de nouveaux couples clé/valeur + * - Un bouton de suppression d'une entité + * + * Pour réaliser cette micro application, vous pouvez utiliser le module ngRoute présenté précédemment (cela est même conseillé). + */ + +var Exo = angular.module('Exo', ['ngResource']); diff --git a/javascript/angular/exercices/ng-resource/index.html b/javascript/angular/exercices/ng-resource/index.html new file mode 100644 index 0000000..5de24a9 --- /dev/null +++ b/javascript/angular/exercices/ng-resource/index.html @@ -0,0 +1,17 @@ + + + + Exercice ngResource + + + + + + + + + + + + + diff --git a/javascript/angular/exercices/ng-resource/package.json b/javascript/angular/exercices/ng-resource/package.json new file mode 100644 index 0000000..770f254 --- /dev/null +++ b/javascript/angular/exercices/ng-resource/package.json @@ -0,0 +1,15 @@ +{ + "name": "ng-resource", + "version": "1.0.0", + "description": "", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.12.3", + "warehousejs": "^0.3.0" + } +} diff --git a/javascript/angular/exercices/ng-resource/server.js b/javascript/angular/exercices/ng-resource/server.js new file mode 100644 index 0000000..cdd4b10 --- /dev/null +++ b/javascript/angular/exercices/ng-resource/server.js @@ -0,0 +1,10 @@ +var express = require('express'); +var warehouse = require('warehousejs'); +var NeBackend = require('warehousejs/backend/nedb'); + +var app = express(); +var store = new NeBackend().objectStore('entities', {filename: 'data.nedb'}); + +warehouse.applyRoutes(app, store); + +app.listen(3000); diff --git a/javascript/angular/exercices/package.json b/javascript/angular/exercices/package.json index 3c13eae..d6dacd3 100644 --- a/javascript/angular/exercices/package.json +++ b/javascript/angular/exercices/package.json @@ -10,6 +10,7 @@ "license": "GPL", "dependencies": { "angular": "^1.3.15", + "angular-resource": "^1.3.15", "angular-route": "^1.3.15" } } diff --git a/javascript/angular/index.html b/javascript/angular/index.html index 5cc77c3..4502862 100644 --- a/javascript/angular/index.html +++ b/javascript/angular/index.html @@ -38,6 +38,8 @@ 'routage-1', 'routage-2', 'routage-3', + 'ng-resource-1', + 'ng-resource-2', 'projet-outils-1', 'projet-outils-2', 'projet-outils-3', diff --git a/javascript/angular/ng-resource-1.md b/javascript/angular/ng-resource-1.md new file mode 100644 index 0000000..14d8e04 --- /dev/null +++ b/javascript/angular/ng-resource-1.md @@ -0,0 +1,13 @@ +# .cadoles-slide-title[Architecture REST] + +- **REST:** Representational State Transfer +- Architecture logicielle pour la création de web services + +Une collection est réprésentée par une URL: `http://localhost/items` + +Les actions possibles sont définies par les méthodes HTTP suivantes: + - Récupérer la liste des éléments -> `GET http://localhost/items` + - Récupérer un élément -> `GET http://localhost/items/` + - Créer un nouvel élément -> `POST http://localhost/items` + - Mettre à jour un élément existant -> `PUT http://localhost/items/` + - Supprimer un élément -> `DELETE http://localhost/items/` diff --git a/javascript/angular/ng-resource-2.md b/javascript/angular/ng-resource-2.md new file mode 100644 index 0000000..ece5549 --- /dev/null +++ b/javascript/angular/ng-resource-2.md @@ -0,0 +1,22 @@ +# .cadoles-slide-title[Le module ngResource] + +- Le module `ngResource` est une couche d'abstraction qui permet d'aborder une API REST comme une collection + d'objets côté client. +- Si l'API REST respecte un certain nombre de conventions, le module `ngResource` permet de gérer l'ensemble du cycle de vie +des données sans se préocupper du transport de celles ci. + +**Exemple** +```js +angular.module('myApp', ['ngResource']) + .controller('MainCtrl', ['$resource', function($resource) { + + var Books = $resource('/books/:bookId', { userId: '@id' }); + + var book = Books.get({ bookId: 123 }, function() { // -> GET /books/123 + book.title = ""; + book.$save(); // -> POST /books + }); + + }]) +; +```