Node.js
Node.js (express.js) con il codice di esempio angular.js

introduzione

Creare il nostro progetto.

Siamo a posto, corriamo, di nuovo dalla console:

mkdir our_project
cd our_project

Ora siamo nel posto in cui il nostro codice vivrà. Per creare l'archivio principale del nostro progetto puoi eseguire

Ok, ma come creiamo il progetto express skeleton?

È semplice:

npm install -g express express-generator

Le distribuzioni Linux e Mac dovrebbero usare sudo per installarlo perché sono installate nella directory nodejs che è accessibile solo dall'utente root . Se tutto è andato bene possiamo finalmente creare lo scheletro Express-App, basta correre

express

Questo comando creerà all'interno della nostra cartella un'app di esempio esplicita. La struttura è la seguente:

bin/
public/
routes/
views/
app.js
package.json

Ora, se eseguiamo npm, iniziamo a visitare http: // localhost: 3000 vedremo l'applicazione Express funzionante, abbastanza bene abbiamo generato un'app express senza troppi problemi, ma come possiamo mescolarlo con AngularJS? .

Come funziona espresso, brevemente?

Express è un framework basato su Nodejs , puoi vedere la documentazione ufficiale sul sito Express . Ma per il nostro scopo abbiamo bisogno di sapere che Express è il responsabile quando scriviamo, ad esempio, http: // localhost: 3000 / home del rendering della home page della nostra applicazione. Dall'app creata di recente, possiamo verificare:

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Quello che questo codice ci sta dicendo è che quando l'utente va su http: // localhost: 3000 deve rendere la vista indice e passare un JSON con una proprietà title e valore Express. Ma quando controlliamo la directory views e apriamo index.jade possiamo vedere questo:

extends layout
block content
    h1= title
    p Welcome to #{title}

Questa è un'altra potente funzionalità Express, i motori di template , che ti permettono di eseguire il rendering del contenuto nella pagina passando variabili ad esso o ereditare un altro modello in modo che le tue pagine siano più compatte e meglio comprensibili da altri. L'estensione del file è .jade per quanto ne so Jade ha cambiato il nome per Pug , fondamentalmente è lo stesso motore di template ma con alcuni aggiornamenti e modifiche fondamentali.

Installazione di Pug e aggiornamento del motore di template Express.

Ok, per iniziare a usare Pug come motore di template del nostro progetto dobbiamo eseguire:

npm install --save pug

Questo installerà Pug come dipendenza del nostro progetto e lo salverà su package.json . Per usarlo abbiamo bisogno di modificare il file app.js :

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

E sostituisci il motore della linea di vista con Carlino e basta. Possiamo avviare nuovamente il nostro progetto con l'avvio di npm e vedremo che tutto funziona correttamente .

In che modo AngularJS si inserisce in tutto questo?

AngularJS è un framework MVW Javascript (Model-View-Whatever) utilizzato principalmente per creare l'installazione di SPA (Simple Page Application) è abbastanza semplice, è possibile visitare il sito Web di AngularJS e scaricare l'ultima versione v1.6.4 .

Dopo aver scaricato AngularJS quando dovremmo copiare il file nella nostra cartella public / javascripts all'interno del nostro progetto, una piccola spiegazione, questa è la cartella che serve le risorse statiche del nostro sito, immagini, css, file javacript e così via. Naturalmente questo è configurabile tramite il file app.js , ma lo manterremo semplice. Ora creiamo un file chiamato ng-app.js , il file in cui la nostra applicazione vivrà, all'interno della nostra cartella pubblica dei javascript, proprio dove vive AngularJS. Per portare su AngularJS, è necessario modificare il contenuto delle viste / layout.pug come segue:

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

Cosa stiamo facendo qui ?, beh, stiamo includendo il core di AngularJS e il nostro file ng-app.js di recente creazione , quindi quando il template è renderizzato porterà AngularJS in su, noterete l'uso della direttiva ng-app , questo è indicativo AngularJS che questo è il nostro nome dell'applicazione e dovrebbe attenersi ad esso.
Quindi, il contenuto del nostro ng-app.js sarà:

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

Stiamo utilizzando la funzione AngularJS più basilare qui, associazione dati bidirezionale , questo ci permette di aggiornare istantaneamente il contenuto della nostra vista e controller, questa è una spiegazione molto semplice, ma puoi fare una ricerca in Google o StackOverflow per vedere come funziona davvero.

Quindi, abbiamo i blocchi di base della nostra applicazione AngularJS, ma c'è qualcosa che dobbiamo fare, dobbiamo aggiornare la nostra pagina index.pug per vedere i cambiamenti della nostra app angolare, facciamolo:

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

Qui leghiamo semplicemente l'input al nostro nome di proprietà definito nell'oscilloscopio AngularJS all'interno del nostro controller:

$scope.name = 'sigfried';

Lo scopo di questo è che ogni volta che cambiamo il testo nell'input il paragrafo precedente aggiornerà il suo contenuto all'interno del {{nome}}, questo è chiamato interpolazione , un'altra caratteristica AngularJS per rendere il nostro contenuto nel modello.

Quindi, tutto è configurato, ora possiamo eseguire npm, andare su http: // localhost: 3000 e vedere la nostra applicazione Express che serve la pagina e AngularJS che gestisce il frontend dell'applicazione.