Exo ngResource
This commit is contained in:
parent
1d015b15d5
commit
30f646581b
|
|
@ -0,0 +1 @@
|
||||||
|
data.nedb
|
||||||
|
|
@ -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']);
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf8">
|
||||||
|
<title>Exercice ngResource</title>
|
||||||
|
</head>
|
||||||
|
<!-- Déclaration de l'application -->
|
||||||
|
<body ng-app="Exo">
|
||||||
|
|
||||||
|
<!-- ??? -->
|
||||||
|
|
||||||
|
<!-- Import de du framework Angular -->
|
||||||
|
<script src="../node_modules/angular/angular.js"></script>
|
||||||
|
<script src="../node_modules/angular-resource/angular-resource.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
"license": "GPL",
|
"license": "GPL",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular": "^1.3.15",
|
"angular": "^1.3.15",
|
||||||
|
"angular-resource": "^1.3.15",
|
||||||
"angular-route": "^1.3.15"
|
"angular-route": "^1.3.15"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,8 @@
|
||||||
'routage-1',
|
'routage-1',
|
||||||
'routage-2',
|
'routage-2',
|
||||||
'routage-3',
|
'routage-3',
|
||||||
|
'ng-resource-1',
|
||||||
|
'ng-resource-2',
|
||||||
'projet-outils-1',
|
'projet-outils-1',
|
||||||
'projet-outils-2',
|
'projet-outils-2',
|
||||||
'projet-outils-3',
|
'projet-outils-3',
|
||||||
|
|
|
||||||
|
|
@ -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/<itemId>`
|
||||||
|
- Créer un nouvel élément -> `POST http://localhost/items`
|
||||||
|
- Mettre à jour un élément existant -> `PUT http://localhost/items/<itemId>`
|
||||||
|
- Supprimer un élément -> `DELETE http://localhost/items/<itemId>`
|
||||||
|
|
@ -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
|
||||||
|
});
|
||||||
|
|
||||||
|
}])
|
||||||
|
;
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue