Todo list in AngularJS e NodeJs / Sgart.it

Tempo fa ho deciso di imparare AngularJS 1 ed ero anche interessato anche a NodeJs. Per approfondire entrambe le tecnologie ho deciso di fare una semplice SPA Todo list che usasse AngularJS 1 come front end lato client e NodeJs per le API lato server.

Qua sotto la pagina principale basata sul css di Bootstrap 3:

Home

dove si vede anche la barra bianca/arancione che segnala l'esecuzione di una chiamata alle API.
La pagina di inserimento di un nuovo todo:

Edit

un esempio di popup:

Statistic

La struttura delle cartelle dell'applicazione è questa:

/
  bin
    www              ... crea il server in nodejs
  node_modules       ... tutti i moduli necessari a nodejs tra cui express
  public             ... la directory pubbica di nodejs (tutte le chiamate a questa dir sono considerate statiche)
    app              ... l'applicazione SPA AngularJS 1
      controllers    ... tutti i controllers dell'applicazione
        modal        ... i controllers delle pagine modali
      directives     ... le eventuali direttive
      others         ... l'entry point della applicazione
      pages          ... le pagine dell'applicazione
        modal        ... le pagine modali
      services       ... i service/factory che si occupano dell'accesso ai dati
    css
    fonts
    images
    js
  routes             ... le pagine js lato server di nodejs (pagine e API)
  views
  server.js          ... la pagina iniziale di nodejs/express
  start.bat          ... file bat per windows per far partire il server sulla porta 3000

Per funzionare l'esempio richiede NodeJS con il modulo express oltre a un Database Micrososft SQL Server vedi script T-SQL in /routes/mssql.sql

L'applicazione contiene una pagina principale servita lato server da NodeJs in /routes/index.js (controller) che usa la view /views/index.ejs che funge da master page. All'interno contiene un palcehoder:

<div data-ng-view=""></div>

dove verranno inserite tutte le pagine SPA.
Le pagine che compongono l'applicazione sono sotto /public/app/pages:

home.html la pagina inziale con la lista dei todo
new.html la pagina pe l'inserimento di nuovi todo
edit.html la pagina per editare un todo esistente
statistics.html una pagina con le statistiche
modal/deleteConfirm.html un popup di conferma prima della cancellazione

le url delle pagine della SPA sono definite nel file /public/app/others/app-route.js.
L'applicazione supporta le normali attività di un applicazione, ovvero:

gestione di più pagine (/public/app/pages/*.html)
pagine modali / popup di conferma (/public/app/pages/modal/*.html)
accesso ad API esterne sia in GET che POST (/public/app/services/todoFactory.js)
funzioni comuni disponibili in tutta la APP (/public/app/others/app-run.js)
un feedback visivo di attesa quando vengono richiamate delle API (<div class="box-wait" data-ng-show="isWaiting()" data-ng-animate=" 'animate' ">)
la gestione del passaggio delle date tra client (AngularJS) e server (NodeJS) sempre in UTC (/public/app/controllers/todoEditController.js)
creazione di direttive AngularJS (/public/app/directives/sgartClockDirective.js)
cambiamento del tema (css) della app
notifiche toast

Il codice sorgente può essere scaricato da qui Download SgartNodeJsAngularjs.zip oppure su GitHub c'è una versione aggiornata.

Per funzionare è necessario che sulla macchina sia presente NodeJS e un database Microsoft SQL Server.
Fatto questo è necessario creare il database tramite lo script /routes/mssql.sql ed eventualmente cambiare i parametri di configurazione in /routes/mssql.js

var config = {
  user: 'nodejs',
  password: 'nodejs2015',
  server: 'localhost',
  database: 'NodeJsDB',
  options: {
    //InstanceName: 'SQLEXPRESS', //questa proprietà non sembra necessaria
    port: 1433, // va sempre indicata la porta (non funziona con le porte dinamiche)
    encrypt: false // Use this if you're on Windows Azure... non l'ho testato 
  }
};

eseguire con start.bat e aprire il browser alla pagina http://localhost:3000 .
L'applicazione può essere editata con Visual Studio Code.

A questo link è disponibile la stessa versione della SPA realizzata con le Web API MVC.