Cadoles
/
formations
18
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Exo ngResource

This commit is contained in:
William Petit 2015-04-10 01:46:41 +02:00
parent 1d015b15d5
commit 30f646581b
9 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/angular/exercices/ng-resource/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
data.nedb

15
javascript/angular/exercices/ng-resource/app.js vendored Normal file
View File

@ -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']);

17
javascript/angular/exercices/ng-resource/index.html Normal file
View File

@ -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>

15
javascript/angular/exercices/ng-resource/package.json Normal file
View File

@ -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"
}
}

10
javascript/angular/exercices/ng-resource/server.js vendored Normal file
View File

@ -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);

1
javascript/angular/exercices/package.json
View File

@ -10,6 +10,7 @@
"license": "GPL",
"dependencies": {
"angular": "^1.3.15",
"angular-resource": "^1.3.15",
"angular-route": "^1.3.15"
}
}

2
javascript/angular/index.html
View File

@ -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',

13
javascript/angular/ng-resource-1.md Normal file
View File

@ -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>`

22
javascript/angular/ng-resource-2.md Normal file
View File

@ -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
});
}])
;
```