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
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
Edit
un esempio di popup:
Statistic
Statistic
La struttura delle cartelle dell'applicazione è questa:

Text

/
  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:

HTML

<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

JavaScript

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.
Tags:
Angular JS10 Esempi225 GitHub10 JavaScript184 MVC15 NodeJs21 SQL90 SQL Server100
Potrebbe interessarti anche: