Todo list in AngularJS e NodeJs

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:

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:

un esempio di popup:

La struttura delle cartelle dell'applicazione è questa:

TextCopia

/
  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

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:

HTMLCopia

<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

JavaScriptCopia

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.