Scheda di collaborazione AngularJS con Socket.io

Contenuto

• 01. Il server
• 02. Le ossa nude
• 03. Dichiara le tue dipendenze
• 04. Collega Socket.io
• 05. Avvia i motori!
• 06. Alcuni pensieri sinceri prima di andare avanti
• 07. Il cliente
• 08. Le ossa nude
• 09. Creazione di una nota adesiva
• 10. Visualizzazione delle note adesive
• 11 Eliminare una nota adesiva
• 12. Aggiornamento di una nota adesiva
• 13. Spostare una nota adesiva
• 14. Il bonus
• 15. Conclusione
• Questo mi piaceva? Leggi questo!

• Conoscenza necessaria: JavaScript intermedio
• Richiede: Node.js, NPM
• Tempo del progetto: 2 ore

AngularJS è particolarmente adatto per creare ricche applicazioni lato client nel browser e, quando aggiungi un piccolo Socket.io al mix, le cose si fanno davvero interessanti. In questo articolo costruiremo una scheda di collaborazione in tempo reale che utilizza AngularJS per l'applicazione lato client e Socket.io per condividere lo stato tra tutti i client connessi.

Copriamo un po 'delle pulizie prima di iniziare. Presumo che tu abbia una conoscenza fondamentale di HTML e JavaScript poiché non tratterò ogni piccolo angolo del codice. Ad esempio, non ho intenzione di richiamare i file CSS e JavaScript che ho incluso nell'intestazione del file HTML poiché non ci sono nuove informazioni lì.

Inoltre, ti incoraggio a prendere il codice dal mio account GitHub per seguirlo. Il mio buon amico Brian Ford ha anche un eccellente seme Socket.io, su cui ho basato alcune delle mie idee originali.

Le quattro caratteristiche principali che vogliamo nella lavagna di collaborazione sono la possibilità di creare una nota, leggere le note, aggiornare una nota, eliminare una nota e, per divertimento, spostare una nota sulla lavagna. Sì, è corretto, ci stiamo concentrando sulle funzionalità CRUD standard. Credo che concentrandoci su queste caratteristiche fondamentali, avremo coperto abbastanza codice per far emergere i modelli in modo che tu possa prenderli e applicarli altrove.

01. Il server

Inizieremo prima con il server Node.js poiché servirà come base su cui costruiremo tutto il resto.

Costruiremo un server Node.js con Express e Socket.io. Il motivo per cui utilizziamo Express è che fornisce un bel meccanismo per configurare un server di risorse statiche all'interno di Node.js. Express viene fornito con un sacco di funzioni davvero fantastiche ma, in questo caso, lo useremo per dividere in due l'applicazione in modo pulito tra il server e il client.

(Sto operando partendo dal presupposto che tu abbia Node.js e NPM installati. Una rapida ricerca su Google ti mostrerà come installarli se non lo fai.)

02. Le ossa nude

Quindi, per costruire le ossa nude del server, dobbiamo fare un paio di cose per essere operativi.

// app.js

// A.1
var express = require (’express’),
app = express ();
server = require (’http’). createServer (app),
io = require (’socket.io’). listen (server);

// A.2
app.configure (function () {
app.use (express.static (__ dirname + ’/ public’));
});

// A.3
server.listen (1337);

A.1 Stiamo dichiarando e istanziando i nostri moduli Node.js in modo da poterli utilizzare nella nostra applicazione. Stiamo dichiarando Express, creando un'istanza di Express e quindi creando un server HTTP e inviando l'istanza di Express al suo interno. E da lì creiamo un'istanza di Socket.io e gli diciamo di tenere d'occhio l'istanza del nostro server.

A.2 Stiamo quindi dicendo alla nostra app Express di utilizzare la nostra directory pubblica per servire i file da.

A.3 Avviamo il server e gli diciamo di ascoltare sulla porta 1337.

Finora è stato abbastanza indolore e veloce. Credo che ci siano meno di 10 righe nel codice e abbiamo già un server Node.js funzionante. Avanti!

03. Dichiara le tue dipendenze

// packages.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"versione": "0.0.1-1",
"privato": vero,
"dipendenze": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Una delle caratteristiche più interessanti di NPM è la possibilità di dichiarare le proprie dipendenze in un file packages.json file e quindi installarli automaticamente tramite npm install sulla riga di comando.

04. Collega Socket.io

Abbiamo già definito le funzionalità principali che vogliamo nell'applicazione e quindi abbiamo bisogno di impostare listener di eventi Socket.io e una chiusura appropriata per gestire l'evento per ogni operazione.

Nel codice seguente noterai che si tratta essenzialmente di una configurazione di listener di eventi e callback. Il primo evento è il connessione evento, che usiamo per collegare i nostri altri eventi nella chiusura.

io.sockets.on (’connection’, function (socket) {
socket.on ("createNote", function (data) {
socket.broadcast.emit (’onNoteCreated’, data);
});

socket.on (’updateNote’, function (data) {
socket.broadcast.emit (’onNoteUpdated’, data);
});

socket.on (’deleteNote’, function (data) {
socket.broadcast.emit (’onNoteDeleted’, data);
});

socket.on (’moveNote’, function (data) {
socket.broadcast.emit (’onNoteMoved’, data);
});
});

Da qui aggiungiamo ascoltatori a createNote, updateNote, deleteNote e moveNote. E nella funzione di richiamata, stiamo semplicemente trasmettendo l'evento accaduto in modo che qualsiasi cliente in ascolto possa essere avvisato che l'evento si è verificato.

Ci sono alcune cose che vale la pena sottolineare sulle funzioni di callback nei singoli gestori di eventi. Uno, se vuoi inviare un evento a tutti gli altri tranne che al client che ha emesso l'evento che inserisci trasmissione prima di emettere chiamata di funzione. In secondo luogo, stiamo semplicemente trasferendo il carico utile dell'evento alle parti interessate in modo che possano elaborarlo come meglio credono.

05. Avvia i motori!

Ora che abbiamo definito le nostre dipendenze e impostato la nostra applicazione Node.js con i poteri Express e Socket.io, è abbastanza semplice inizializzare il server Node.js.

Per prima cosa installi le tue dipendenze Node.js in questo modo:

npm install

E poi avvii il server in questo modo:

node app.js

Poi! Vai a questo indirizzo nel tuo browser. Bam!

06. Alcuni pensieri sinceri prima di andare avanti

Sono principalmente uno sviluppatore di frontend e inizialmente ero un po 'intimidito dal collegare un server Node.js. alla mia applicazione. La parte AngularJS è stata un gioco da ragazzi ma JavaScript lato server? Metti in coda la musica inquietante di un film horror.

Ma sono rimasto assolutamente sbalordito nello scoprire che potevo configurare un server web statico in poche righe di codice e in poche righe in più utilizzare Socket.io per gestire tutti gli eventi tra i browser. Ed era ancora solo JavaScript! Per motivi di tempestività, stiamo trattando solo alcune funzionalità, ma spero che alla fine dell'articolo vedrai che è facile nuotare e la parte profonda della piscina non è così spaventosa.

07. Il cliente

Ora che abbiamo le nostre solide basi con il nostro server, passiamo alla mia parte preferita: il client! Useremo AngularJS, jQueryUI per la parte trascinabile e Twitter Bootstrap per una base di stile.

08. Le ossa nude

Per una questione di preferenze personali, quando avvio una nuova applicazione AngularJS mi piace definire rapidamente il minimo indispensabile di cui so che avrò bisogno per iniziare e quindi ricominciare a ripetere il più rapidamente possibile.

Ogni applicazione AngularJS deve essere avviata con almeno un controller presente e quindi generalmente è da qui che inizio sempre.

Per avviare automaticamente l'applicazione è necessario aggiungere semplicemente ng-app al nodo HTML in cui desideri che risieda l'applicazione. Il più delle volte, aggiungerlo al tag HTML sarà perfettamente accettabile. Ho anche aggiunto un attributo a ng-app per dirgli che voglio usare il app modulo, che definirò tra poco.

// public / index.html
html ng-app = "app">

So che avrò bisogno di almeno un controller e quindi lo chiamerò usando ng-controller e assegnandogli una proprietà di MainCtrl.

body ng-controller = "MainCtrl"> / body>

Quindi ora siamo pronti per un modulo denominato app e un controller di nome MainCtrl. Andiamo avanti e creiamoli ora.

La creazione di un modulo è abbastanza semplice. Lo definisci chiamando angular.module e dandogli un nome. Per riferimento futuro, il secondo parametro di un array vuoto è il punto in cui è possibile iniettare sottomoduli da utilizzare nell'applicazione. Non rientra nello scopo di questo tutorial, ma è utile quando la tua applicazione inizia a crescere in complessità e necessità.

// public / js / collab.js
var app = angular.module (’app’, []);

Dichiareremo alcuni segnaposto vuoti nel file app modulo che inizia con il MainCtrl sotto.Riempiremo tutto questo in seguito, ma volevo illustrare la struttura di base dall'inizio.

app.controller (’MainCtrl’, function ($ scope) {});

Includeremo anche la funzionalità Socket.io in un file presa di corrente servizio in modo che possiamo incapsulare quell'oggetto e non lasciarlo fluttuare nello spazio dei nomi globale.

app.factory (’socket’, function ($ rootScope) {});

E già che ci siamo, dichiareremo chiamata una direttiva nota adesiva che useremo per incapsulare la funzionalità della nota adesiva in.

app.directive (’stickyNote’, function (socket) {});

Quindi passiamo in rassegna quello che abbiamo fatto finora. Abbiamo avviato l'applicazione utilizzando ng-app e ha dichiarato il nostro controller dell'applicazione nell'HTML. Abbiamo anche definito il modulo dell'applicazione e creato il file MainCtrl controller, il presa di corrente servizio e il nota adesiva direttiva.

09. Creazione di una nota adesiva

Ora che abbiamo lo scheletro dell'applicazione AngularJS in atto, inizieremo a sviluppare la funzione di creazione.

app.controller ('MainCtrl', function ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// In arrivo
socket.on (’onNoteCreated’, function (data) {// B.3
$ scope.notes.push (dati);
});

// Estroverso
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
titolo: "Nuova nota",
body: "In attesa"
};

$ scope.notes.push (nota);
socket.emit ("createNote", note);
};

B.1 AngularJS ha una funzione di inserimento delle dipendenze incorporata, quindi stiamo iniettando un file $ scope oggetto e il presa servizio. Il $ scope object funge da ViewModel ed è fondamentalmente un oggetto JavaScript con alcuni eventi incorporati per abilitare l'associazione dati bidirezionale.

B.2 Stiamo dichiarando l'array a cui useremo per legare la vista.

B.3 Stiamo aggiungendo un ascoltatore per il onNoteCreated evento sul presa di corrente service e inserendo il payload dell'evento nel file $ scope.notes Vettore.

B.4 Abbiamo dichiarato a createNote metodo che crea un valore predefinito Nota oggetto e lo spinge nel file $ scope.notes Vettore. Utilizza anche l'estensione presa servizio per emettere il createNote evento e passare il nuova nota oggetto lungo.

Quindi ora che abbiamo un metodo per creare la nota, come la chiamiamo? Questa è una bella domanda! Nel file HTML, aggiungiamo la direttiva AngularJS incorporata ng-clic al pulsante e quindi aggiungere il file createNote chiamata al metodo come valore dell'attributo.

button id = "createButton" ng-click = "createNote ()"> Crea nota / pulsante>

È il momento di una rapida rassegna di ciò che abbiamo fatto finora. Abbiamo aggiunto un array a $ scope oggetto in MainCtrl conterrà tutte le note dell'applicazione. Abbiamo anche aggiunto un file createNote metodo sul $ scope oggetto per creare una nuova nota locale e quindi trasmetterla agli altri client tramite presa servizio. Abbiamo anche aggiunto un listener di eventi in presa servizio in modo da poter sapere quando altri clienti hanno creato una nota in modo da poterla aggiungere alla nostra raccolta.

10. Visualizzazione delle note adesive

Ora abbiamo la possibilità di creare un oggetto nota e condividerlo tra i browser, ma come lo visualizziamo effettivamente? È qui che entrano in gioco le direttive.

Le direttive e le loro complessità sono un argomento vasto, ma la versione breve è che forniscono un modo per estendere elementi e attributi con funzionalità personalizzate. Le direttive sono facilmente la mia parte preferita di AngularJS perché ti consente di creare essenzialmente un intero DSL (Domain Specific Language) attorno alla tua applicazione in HTML.

È naturale che, poiché creeremo note adesive per la nostra bacheca di collaborazione, dovremmo creare un file nota adesiva direttiva. Le direttive vengono definite chiamando il metodo della direttiva su un modulo su cui si desidera dichiararlo e passando un nome e una funzione che restituiscono un oggetto di definizione della direttiva. L'oggetto definizione direttiva ha molte possibili proprietà che puoi definire su di esso, ma qui ne useremo solo alcune per i nostri scopi.

Ti consiglio di controllare la documentazione di AngularJS per vedere l'intero elenco di proprietà che puoi definire sull'oggetto di definizione della direttiva.

app.directive (’stickyNote’, function (socket) {
var linker = funzione (ambito, elemento, attrs) {};

var controller = funzione ($ scope) {};

ritorno {
restringere: "A", // C.1
link: linker, // C.2
controller: controller, // C.3
ambito: {// C.4
nota: ’=’,
ondelete: ’&’
}
};
});

C.1 Puoi limitare la tua direttiva a un certo tipo di elemento HTML. I due più comuni sono elemento o attributo, che dichiari di utilizzare E e UN rispettivamente. Puoi anche limitarlo a una classe CSS o a un commento, ma non sono così comuni.

C.2 La funzione link è dove metti tutto il tuo codice di manipolazione DOM. Ci sono alcune eccezioni che ho trovato, ma questo è sempre vero (almeno il 99% delle volte). Questa è una regola di base fondamentale di AngularJS ed è per questo che l'ho enfatizzata.

C.3 La funzione controller funziona esattamente come il controller principale che abbiamo definito per l'applicazione ma il $ scope l'oggetto che stiamo trasmettendo è specifico dell'elemento DOM su cui vive la direttiva.

C.4 AngularJS ha un concetto di ambito isolato, che consente di definire esplicitamente come l'ambito di una direttiva comunica con il mondo esterno. Se non avessimo dichiarato l'ambito, la direttiva avrebbe ereditato implicitamente dall'ambito padre con una relazione padre-figlio. In molti casi questo non è ottimale. Isolando l'ambito, attenuiamo le possibilità che il mondo esterno possa inavvertitamente e negativamente influenzare lo stato della tua direttiva.

Ho dichiarato l'associazione dati bidirezionale a Nota con il = simbolo e un'espressione vincolante per ondelete con il & simbolo. Si prega di leggere la documentazione di AngularJS per una spiegazione completa dell'ambito isolato in quanto è uno degli argomenti più complicati nel framework.

Quindi aggiungiamo effettivamente una nota adesiva al DOM.

Come ogni buon framework, AngularJS viene fornito con alcune funzionalità davvero fantastiche fin dall'inizio. Una delle caratteristiche più pratiche è ng-repeat. Questa direttiva AngularJS ti consente di passare un array di oggetti e duplica qualunque tag si trovi tante volte quanti sono gli elementi nell'array. Nel caso seguente, stiamo iterando sul file Appunti array e duplicando il file div elemento e i suoi figli per la lunghezza di Appunti Vettore.

div sticky-note ng-repeat = "note in notes" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

La bellezza di ng-repeat è che è associato a qualsiasi array che passi e, quando aggiungi un elemento all'array, il tuo elemento DOM si aggiornerà automaticamente. Puoi fare un ulteriore passo avanti e ripetere non solo gli elementi DOM standard ma anche altre direttive personalizzate. Ecco perché vedi nota adesiva come attributo dell'elemento.

Ci sono altri due bit di codice personalizzato che devono essere chiariti. Abbiamo isolato l'ambito su note adesive direttiva su due proprietà. Il primo è l'ambito isolato definito dall'associazione in Nota proprietà. Ciò significa che ogni volta che l'oggetto nota cambia nello scope genitore, aggiornerà automaticamente l'oggetto nota corrispondente nella direttiva e viceversa. L'altro ambito isolato definito è in ondelete attributo. Ciò significa che quando ondelete viene chiamato nella direttiva, chiamerà qualunque espressione sia nel file ondelete attributo sull'elemento DOM che istanzia la direttiva.

Quando viene creata un'istanza di una direttiva, viene aggiunta al DOM e viene chiamata la funzione di collegamento. Questa è un'opportunità perfetta per impostare alcune proprietà DOM predefinite sull'elemento. Il parametro dell'elemento che stiamo passando è in realtà un oggetto jQuery e quindi possiamo eseguire operazioni jQuery su di esso.

(AngularJS in realtà viene fornito con un sottoinsieme di jQuery integrato, ma se hai già incluso la versione completa di jQuery, AngularJS lo rimanderà.)

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
// Alcune iniziazioni DOM per renderlo piacevole
element.css ('left', '10px');
element.css ("top", "50px");
element.hide (). fadeIn ();
};
});

Nel codice sopra stiamo semplicemente posizionando la nota adesiva sul palco e sfumandola.

11 Eliminare una nota adesiva

Quindi, ora che possiamo aggiungere e visualizzare una nota adesiva, è il momento di eliminare le note adesive. La creazione e l'eliminazione di note adesive è una questione di aggiunta ed eliminazione di elementi dall'array a cui sono associate le note. Questa è la responsabilità dell'ambito padre di mantenere quell'array, motivo per cui originiamo la richiesta di cancellazione dall'interno della direttiva, ma lasciamo che l'ambito padre faccia il lavoro pesante.

Questo è il motivo per cui abbiamo affrontato tutti i problemi di creare uno scope isolato definito da espressioni sulla direttiva: in modo che la direttiva potesse ricevere l'evento di eliminazione internamente e passarlo al suo genitore per l'elaborazione.

Notare l'HTML all'interno della direttiva.

button type = "button" ng-click = "deleteNote (note.id)"> × / button>

La prossima cosa che sto per dire può sembrare lunga, ma ricorda che siamo dalla stessa parte e avrà senso dopo che avrò elaborato. Quando si fa clic sul pulsante nell'angolo in alto a destra della nota adesiva, stiamo chiamando deleteNote sul controller della direttiva e trasmettendo il file note.id valore. Il controller quindi chiama ondelete, che poi esegue qualunque espressione abbiamo collegato ad esso. Fin qui tutto bene? Stiamo chiamando un metodo locale sul controller che poi lo passa chiamando qualsiasi espressione sia stata definita nell'ambito isolato. L'espressione che viene chiamata dal genitore sembra essere chiamata deleteNote anche.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
L'ho fatto
});
};
};

ritorno {
limitare: "A",
link: linker,
controller: controller,
scopo: {
nota: ’=’,
ondelete: ’&’
}
};
});

(Quando si utilizza un ambito isolato definito dall'espressione, i parametri vengono inviati in una mappa di oggetti.)

Nell'ambito genitore, deleteNote viene chiamato e fa una cancellazione abbastanza standard usando il angolare.perEach funzione di utilità per scorrere l'array delle note. Una volta che la funzione ha gestito la sua attività locale, procede ed emette l'evento affinché il resto del mondo reagisca di conseguenza.

app.controller ('MainCtrl', function ($ scope, socket) {
$ scope.notes = [];

// In arrivo
socket.on (’onNoteDeleted’, function (data) {
$ scope.deleteNote (data.id);
});

// Estroverso
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (note);
});

$ scope.notes = newNotes;
socket.emit (’deleteNote’, {id: id});
};
});

12. Aggiornamento di una nota adesiva

Stiamo facendo progressi fantastici! A questo punto spero che tu stia iniziando a vedere alcuni schemi emergenti da questo vorticoso tour che stiamo facendo. L'elemento successivo nell'elenco è la funzione di aggiornamento.

Inizieremo dagli elementi DOM effettivi e lo seguiremo fino al server e poi di nuovo al client. Per prima cosa dobbiamo sapere quando il titolo o il corpo della nota adesiva viene modificato. AngularJS tratta gli elementi del modulo come parte del modello di dati in modo da poter collegare l'associazione dati bidirezionale in un attimo. Per fare questo usa il file ng-model direttiva e inserire la proprietà a cui si desidera eseguire il binding. In questo caso useremo note.title e note.corpo rispettivamente.

Quando una di queste proprietà cambia, vogliamo acquisire le informazioni da trasmettere. Realizziamo questo con il ng-change direttiva e usalo per chiamare updateNote e passare l'oggetto nota stesso. AngularJS esegue alcuni controlli sporchi molto intelligenti per rilevare se il valore di qualsiasi cosa sia presente ng-model è cambiato e quindi esegue l'espressione contenuta ng-change.

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>

Il vantaggio dell'utilizzo ng-change è che la trasformazione locale è già avvenuta e noi siamo solo responsabili della trasmissione del messaggio. Nel controller, updateNote viene chiamato e da lì emetteremo il file updateNote evento per il nostro server da trasmettere agli altri client.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.updateNote = function (note) {
socket.emit ("updateNote", nota);
};
};
});

E nel controller della direttiva, stiamo ascoltando il file onNoteUpdated evento per sapere quando una nota di un altro client è stata aggiornata in modo da poter aggiornare la nostra versione locale.

var controller = function ($ scope) {
// In arrivo
socket.on (’onNoteUpdated’, function (data) {
// Aggiorna se la stessa nota
if (data.id == $ scope.note.id) {

$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};

13. Spostare una nota adesiva

A questo punto abbiamo praticamente fatto un giro intorno alla piscina per bambini CRUD e la vita è bella! Solo per il gusto di un trucco da salotto per impressionare i tuoi amici, aggiungeremo la possibilità di spostare le note sullo schermo e aggiornare le coordinate in tempo reale. Niente panico: sono solo poche righe di codice in più. Tutto questo duro lavoro ripagherà. Lo prometto!

Abbiamo invitato un ospite speciale, jQueryUI, alla festa e abbiamo fatto tutto per i trascinabili. L'aggiunta della possibilità di trascinare una nota localmente richiede solo una riga di codice. Se aggiungi element.draggable (); alla tua funzione linker inizierai a sentire "Eye of the Tiger" di Survivor perché ora puoi trascinare le tue note in giro.

Vogliamo sapere quando il trascinamento è terminato e acquisire le nuove coordinate da passare. jQueryUI è stato creato da persone molto intelligenti, quindi quando il trascinamento si interrompe devi semplicemente definire una funzione di callback per l'evento di arresto. Prendiamo il file note.id fuori dall'oggetto ambito e dai valori CSS sinistro e superiore del file ui oggetto. Con questa consapevolezza facciamo quello che abbiamo sempre fatto: emettere!

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit ("moveNote", {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (data) {
// Aggiorna se la stessa nota
if (data.id == scope.note.id) {
element.animate ({
a sinistra: data.x,
in alto: data.y
});
}
});
};
});

A questo punto non dovrebbe sorprendere che stiamo anche ascoltando un evento relativo allo spostamento dal servizio socket. In questo caso è il file onNoteMoved evento e se la nota è una corrispondenza, aggiorniamo le proprietà CSS sinistra e superiore. Bam! Fatto!

14. Il bonus

Questa è una sezione bonus che non includerei se non fossi assolutamente sicuro che potresti ottenerla in meno di 10 minuti. Distribuiremo su un server live (sono ancora stupito di quanto sia facile da fare).

Innanzitutto, devi registrarti per una prova gratuita di Nodejitsu. La prova è gratuita per 30 giorni, perfetta per bagnarti i piedi.

Dopo aver creato il tuo account, devi installare il pacchetto jitsu, cosa che puoi fare dalla riga di comando tramite $ npm installa jitsu -g.

Quindi è necessario accedere dalla riga di comando tramite Accesso $ jitsu e inserisci le tue credenziali.

Assicurati di essere direttamente nella tua app, digita $ jitsu deploy e passa attraverso le domande. Di solito lascio il più predefinito possibile, il che significa che do un nome alla mia applicazione ma non un sottodominio ecc.

E, miei cari amici, questo è tutto quello che c'è da fare! Otterrai l'URL della tua applicazione dall'output del server una volta che è stato distribuito ed è pronto per l'uso.

15. Conclusione

Abbiamo trattato molti argomenti di AngularJS in questo articolo e spero che ti sia divertito molto durante il processo. Penso che sia davvero bello quello che puoi ottenere con AngularJS e Socket.io in circa 200 righe di codice.

C'erano alcune cose che non ho trattato per concentrarmi sui punti principali, ma ti incoraggio a tirare giù la fonte e giocare con l'applicazione. Abbiamo costruito una solida base, ma ci sono ancora molte funzionalità che potresti aggiungere. Prendi l'hacking!

Lukas Ruebbelke è un appassionato di tecnologia ed è coautore di AngularJS in Action for Manning Publications. La sua cosa preferita da fare è rendere le persone entusiaste della nuova tecnologia quanto lui. Gestisce il Phoenix Web Application User Group e ha ospitato diversi hackathon con i suoi compagni di criminalità.

Questo mi piaceva? Leggi questo!

• Come creare un'app
• I nostri caratteri web preferiti e non costano un centesimo
• Scopri le prospettive per la realtà aumentata
• Scarica texture gratuite: ad alta risoluzione e subito pronte per l'uso