Ce tutoriel est le dev d’une simple TODO list de type client-serveur (front-end + back-end). Le but est d’utiliser une stack technique complète en JavaScript pour comparer avec d’autres technologies.
Environnement
En DEV : un IDE eclipse avec le plugin nodeclipse d’installé via le menu marketplace d’eclipse. Avoir aussi un NodeJS et son npm Express.
En RUN : le front-end se base sur le site todomvc.com via l’exemple angularjs. Le back-end en plus est un NodeJS avec le serveur REST HTTP de Express.
La structure (classique) est composé d’un MVC coté front et d’un service REST coté back :
- Front
- Model
- View
- Controler
- Back
- Service
- Repository
Code
Récupérer le code à partir de github ici.
La partie back se présente avec un fichier de conf, une app et des routes :
package.json (conf)
Faire un clique droit sur le fichier package.json pour lancer une commande Run As Npm Install. Afin d’installer les dépendances nécessaires dans le projet eclipse.
{ "name": "20141214-todoapp-javascript", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.6", "jade": "*" } }
app.js
C’est le point central du server. Il contient les dépendances, la config et le démarrage.
/** * Module dependencies. */ var express = require('express') , todoRepository = require('./routes/todoRepository') , todoService = require('./routes/todoService') , http = require('http') , path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } // rest server app.get('/api/todos', todoService.list); app.put('/api/todos', todoService.save); // start http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
todoService.js
Contient le service et l’accès au données suite aux appels REST.
var repository = require('./todoRepository'); exports.list = function(req, res) { res.send(repository.findAll()); }; exports.save = function(req, res) { console.log(req.body); res.send(repository.updateAll(req.body)); };
Demo
Tester sur L’URL du back
http://localhost:3000/api/todos
Tester sur L’URL du front
http://localhost:3000/index.html#/
Jouer avec l’application.
Le client doit envoyer des requetes PUT et GET au serveur. Serveur qui trace tout dans la console.
PS : en cas d’erreur lors de npm install, tenter la commande
npm install -g express
Sources
https://github.com/damienfremont/blog/tree/master/20141214-todoapp-javascript
References
http://todomvc.com/architecture-examples/angularjs
http://docs.angularjs.org/tutorial/step_11
http://docs.angularjs.org/api/ngResource.$resource
http://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js
[…] tutoriel est la suite de todoapp js, mais en java cette fois-ci. C’est le dev d’une simple TODO list de type […]
[…] Source: TODO list exemple – full Javascript avec AngularJS NodeJS Express | #DEV/FR Damien.FREMONT […]