Consiliul de colaborare AngularJS cu Socket.io

Conţinut

• 01. Serverul
• 02. Oasele goale
• 03. Declarați-vă dependențele
• 04. Conectați Socket.io
• 05. Porniți motoarele!
• 06. Câteva gânduri sincere înainte de a trece mai departe
• 07. Clientul
• 08. Oasele goale
• 09. Crearea unei note lipicioase
• 10. Afișarea notelor lipicioase
• 11. Ștergerea unei note lipicioase
• 12. Actualizarea unei note lipicioase
• 13. Mutarea unei note lipicioase
• 14. Bonusul
• 15. Concluzie
• I-a plăcut asta? Citiți acestea!

• Cunoștințe necesare: JavaScript intermediar
• Necesită: Node.js, NPM
• Timpul proiectului: 2 ore

AngularJS este deosebit de potrivit pentru crearea de aplicații bogate din partea clientului în browser și, atunci când adăugați un mic Socket.io în mix, lucrurile devin cu adevărat interesante. În acest articol vom construi o placă de colaborare în timp real care utilizează AngularJS pentru aplicația din partea clientului și Socket.io pentru a partaja starea între toți clienții conectați.

Să acoperim un pic de menaj înainte de a începe. Voi presupune că aveți o înțelegere fundamentală a HTML și JavaScript, deoarece nu voi acoperi fiecare mic colț al codului. De exemplu, nu voi striga fișierele CSS și JavaScript pe care le-am inclus în capul fișierului HTML, deoarece nu există informații noi acolo.

De asemenea, vă încurajez să luați codul din contul meu GitHub pentru a-l urma. Bunul meu prieten Brian Ford are, de asemenea, o semință excelentă Socket.io, pe care m-am bazat pe unele dintre ideile mele originale.

Cele patru caracteristici principale pe care le dorim în tabloul de colaborare este posibilitatea de a crea o notă, de a citi notele, de a actualiza o notă, de a șterge o notă și, pentru distracție, de a muta o notă pe tablă. Da, este corect, ne concentrăm pe funcțiile standard CRUD. Cred că, concentrându-ne pe aceste caracteristici fundamentale, vom acoperi suficient cod pentru ca modelele să apară, astfel încât să le puteți lua și să le aplicați în altă parte.

01. Serverul

Vom începe mai întâi cu serverul Node.js, deoarece acesta va servi drept bază pe care vom construi orice altceva.

Vom construi un server Node.js cu Express și Socket.io. Motivul pentru care folosim Express este că oferă un mecanism frumos pentru configurarea unui server de active statice în cadrul Node.js. Express vine cu o grămadă de caracteristici minunate, dar, în acest caz, îl vom folosi pentru a împărți aplicația în mod curat între server și client.

(Funcționez presupunând că aveți instalate Node.js și NPM. O căutare rapidă pe Google vă va arăta cum să le instalați dacă nu aveți.)

02. Oasele goale

Deci, pentru a construi oasele goale ale serverului, trebuie să facem câteva lucruri pentru a ne pune în funcțiune.

// app.js

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

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

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

A.1 Declarăm și instanțiem modulele noastre Node.js, astfel încât să le putem folosi în aplicația noastră. Declarăm Express, instanțiam Express și apoi creăm un server HTTP și trimitem instanța Express în acesta. Și, de acolo, facem instanțe pentru Socket.io și îi spunem să urmeze instanța serverului nostru.

A.2 Îi spunem apoi aplicației noastre Express să utilizeze directorul nostru public pentru a difuza fișiere.

A.3 Pornim serverul și îi spunem să asculte pe port 1337.

Până acum, acest lucru a fost destul de nedureros și rapid. Cred că avem mai puțin de 10 linii în cod și deja avem un server funcțional Node.js. Înainte!

03. Declarați-vă dependențele

// pachete.json
{
"nume": "unghi-colab-bord",
"description": "AngularJS Collaboration Board",
"versiune": "0.0.1-1",
„privat”: adevărat,
„dependențe”: {
„express”: „3.x”,
„socket.io”: „0.9.x”
}
}

Una dintre cele mai frumoase caracteristici ale NPM este capacitatea de a vă declara dependențele într-un pachete.json fișier și apoi instalați-le automat prin instalare npm pe linia de comandă.

04. Conectați Socket.io

Am definit deja caracteristicile de bază pe care le dorim în aplicație și, prin urmare, trebuie să configurăm ascultătorii de evenimente Socket.io și o închidere adecvată pentru a gestiona evenimentul pentru fiecare operație.

În codul de mai jos veți observa că este în esență o configurație de ascultători de evenimente și apeluri de apel. Primul eveniment este conexiune eveniment, pe care îl folosim pentru a conecta celelalte evenimente din închidere.

io.sockets.on ('conexiune', funcție (socket) {
socket.on ('createNote', funcție (date) {
socket.broadcast.emit („onNoteCreated”, date);
});

socket.on („updateNote”, funcție (date) {
socket.broadcast.emit („onNoteUpdated”, date);
});

socket.on ('deleteNote', funcție (date) {
socket.broadcast.emit („onNoteDeleted”, date);
});

socket.on ('moveNote', funcție (date) {
socket.broadcast.emit („onNoteMoved”, date);
});
});

De aici adăugăm ascultători la createNote, updateNote, deleteNote și moveNote. Și în funcția de apel invers, difuzăm pur și simplu ce eveniment s-a întâmplat, astfel încât orice client care ascultă să poată fi informat că evenimentul s-a întâmplat.

Există câteva lucruri demne de subliniat cu privire la funcțiile de returnare a apelurilor în gestionarele de evenimente individuale. Unul, dacă doriți să trimiteți un eveniment tuturor celorlalți, în afară de clientul care a emis evenimentul pe care îl inserați difuzat inainte de emite apel de funcție. În al doilea rând, pur și simplu transmitem sarcina utilă a evenimentului părților interesate, astfel încât acestea să poată procesa modul în care consideră potrivit.

05. Porniți motoarele!

Acum că ne-am definit dependențele și am configurat aplicația Node.js cu puteri Express și Socket.io, este destul de simplu să inițializăm serverul Node.js.

Mai întâi instalați dependențele dvs. Node.js astfel:

instalare npm

Și apoi porniți serverul astfel:

nod app.js

Și apoi! Accesați această adresă în browser. Bam!

06. Câteva gânduri sincere înainte de a trece mai departe

Sunt în primul rând dezvoltator frontend și am fost inițial un pic intimidat de conectarea unui server Node.js la aplicația mea. Partea AngularJS a fost rapidă, dar JavaScript de pe server? Coada muzicii înfiorătoare dintr-un film de groază.

Dar, am fost absolut la pământ să descopăr că aș putea configura un server web static în doar câteva linii de cod și în alte câteva linii folosesc Socket.io pentru a gestiona toate evenimentele dintre browsere. Și tot era doar JavaScript! Din motive de actualitate, acoperim doar câteva caracteristici, dar sper că până la sfârșitul articolului veți vedea că este ușor să înotați - iar capătul adânc al piscinei nu este atât de înfricoșător.

07. Clientul

Acum, că avem bazele noastre solide pe serverul nostru, să trecem la partea mea preferată - clientul! Vom folosi AngularJS, jQueryUI pentru partea glisabilă și Twitter Bootstrap pentru o bază de stil.

08. Oasele goale

Ca o chestiune de preferință personală, atunci când pornesc o nouă aplicație AngularJS, îmi place să definesc rapid minimul minim pe care știu că voi avea nevoie să-l încep și apoi să-l repet cât mai repede posibil.

Fiecare aplicație AngularJS trebuie să fie bootstrappată cu cel puțin un controler prezent și așa că, în general, aș începe mereu.

Pentru a porni automat aplicația, trebuie doar să adăugați ng-app la nodul HTML în care doriți să trăiască aplicația. De cele mai multe ori, adăugarea acestuia la eticheta HTML va fi perfect acceptabilă. Am adăugat și un atribut la ng-app să-i spun că vreau să folosesc aplicație modul, pe care îl voi defini într-o clipă.

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

Știu că voi avea nevoie de cel puțin un controler și așa că o voi apela folosind ng-controller și atribuindu-i o proprietate de MainCtrl.

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

Deci, acum suntem în cârlig pentru un modul numit aplicație și un controlor numit MainCtrl. Să mergem mai departe și să le creăm acum.

Crearea unui modul este destul de simplă. Îl definești apelând unghiular.modul și dându-i un nume. Pentru referințe viitoare, al doilea parametru al unui tablou gol este locul în care puteți injecta sub-module pentru utilizare în aplicație. Nu intră în sfera acestui tutorial, dar este la îndemână atunci când aplicația dvs. începe să crească în complexitate și nevoi.

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

Vom declara câțiva substituenți goi în aplicație modul care începe cu MainCtrl de mai jos.Vom completa toate acestea mai târziu, dar am vrut să ilustrez structura de bază de la început.

app.controller („MainCtrl”, funcție ($ scope) {});

De asemenea, vom înfășura funcționalitatea Socket.io într-un priză serviciu astfel încât să putem încapsula acel obiect și să nu-l lăsăm să plutească în jurul spațiului de nume global.

app.factory ('socket', funcție ($ rootScope) {});

Și, în timp ce ne ocupăm, vom declara o directivă numită Notă lipicioasă pe care îl vom folosi pentru a încapsula funcționalitatea notelor lipicioase în.

app.directive ('stickyNote', funcție (socket) {});

Așadar, haideți să trecem în revistă ceea ce am făcut până acum. Am bootstrappat aplicația folosind ng-app și a declarat controlerul aplicației noastre în HTML. De asemenea, am definit modulul de aplicație și am creat MainCtrl controler, priză serviciu și Notă lipicioasă directivă.

09. Crearea unei note lipicioase

Acum, că avem scheletul aplicației AngularJS, vom începe să construim caracteristica de creare.

app.controller („MainCtrl”, funcție ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// Primite
socket.on („onNoteCreated”, funcție (date) {// B.3
$ scope.notes.push (date);
});

// De ieșire
$ scope.createNote = function () {// B.4
var note = {
id: data nouă (). getTime (),
title: „Notă nouă”,
corp: „În așteptare”
};

$ scope.notes.push (notă);
socket.emit ('createNote', notă);
};

B.1 AngularJS are încorporată o caracteristică de injectare a dependenței, astfel încât să injectăm o $ scop obiect și priză serviciu. $ scop obiectul servește ca ViewModel și este în esență un obiect JavaScript cu unele evenimente aranjate în el pentru a permite legarea de date bidirecțională.

B.2 Declarăm matricea în care vom folosi pentru a lega vizualizarea.

B.3 Adăugăm un ascultător pentru onNoteCreated eveniment pe priză service și împingerea sarcinii utile a evenimentului în $ scope.notes matrice.

B.4 Am declarat o createNote metodă care creează o valoare implicită Notă obiect și îl împinge în $ scope.notes matrice. De asemenea, folosește priză serviciu pentru a emite createNote eveniment și treceți notă nouă obiectează de-a lungul.

Acum, că avem o metodă pentru a crea nota, cum o numim? Aceasta este o întrebare bună! În fișierul HTML, adăugăm directiva AngularJS încorporată faceți clic la buton și apoi adăugați createNote apel metoda ca valoare a atributului.

button id = "createButton" ng-click = "createNote ()"> Create Note / button>

Este timpul pentru o revizuire rapidă a ceea ce am făcut până acum. Am adăugat o matrice la $ scop obiect în MainCtrl care va conține toate notele pentru aplicație. Am adăugat și un createNote metoda pe $ scop obiectați să creați o nouă notă locală și apoi să transmiteți acea notă celorlalți clienți prin intermediul priză serviciu. De asemenea, am adăugat un ascultător de evenimente pe priză service, astfel încât să putem ști când alți clienți au creat o notă, astfel încât să o putem adăuga la colecția noastră.

10. Afișarea notelor lipicioase

Acum avem posibilitatea de a crea un obiect de notă și de a-l distribui între browsere, dar cum îl afișăm de fapt? Aici intră directivele.

Directivele și complexitatea lor sunt un subiect vast, dar versiunea scurtă este că oferă o modalitate de a extinde elemente și atribute cu funcționalități personalizate. Directivele sunt cu ușurință partea mea preferată despre AngularJS, deoarece vă permite să creați în esență un întreg DSL (Domain Specific Language) în jurul aplicației dvs. în HTML.

Este firesc ca, din moment ce vom crea note adezive pentru tabloul nostru de colaborare, ar trebui să creăm un Notă lipicioasă directivă. Directivele sunt definite apelând metoda directivă pe un modul pe care doriți să o declarați și trecând un nume și o funcție care returnează un obiect de definiție a directivei. Obiectul de definire a directivei are o mulțime de proprietăți posibile pe care le puteți defini, dar vom folosi doar câteva pentru scopurile noastre aici.

Vă recomandăm să verificați documentația AngularJS pentru a vedea întreaga listă de proprietăți pe care le puteți defini pe obiectul de definire a directivei.

app.directive ('stickyNote', funcție (socket) {
var linker = funcție (scop, element, attrs) {};

var controller = function ($ scope) {};

întoarcere {
restricționează: „A”, // C.1
link: linker, // C.2
controler: controler, // C.3
scop: {// C.4
notă: '=',
ondelete: „&”
}
};
});

C.1 Puteți restricționa directiva la un anumit tip de element HTML. Cele mai comune două sunt elementul sau atributul, pe care îl declarați folosind E și A respectiv. De asemenea, îl puteți restricționa la o clasă CSS sau la un comentariu, dar acestea nu sunt la fel de obișnuite.

C.2 Funcția de legătură este locul în care vă puneți tot codul de manipulare DOM. Există câteva excepții pe care le-am găsit, dar acest lucru este întotdeauna adevărat (cel puțin 99% din timp). Aceasta este o regulă fundamentală a AngularJS și de aceea am subliniat-o.

C.3 Funcția controler funcționează la fel ca controlerul principal pe care l-am definit pentru aplicație, dar $ scop obiectul pe care îl transmitem este specific elementului DOM din care trăiește directiva.

C.4 AngularJS are un concept de domeniu izolat, care vă permite să definiți în mod explicit cum comunică domeniul de aplicare al unei directive cu lumea exterioară. Dacă nu am fi declarat domeniul de aplicare, directiva ar fi moștenit implicit din domeniul de aplicare al părinților cu o relație părinte-copil. În multe cazuri acest lucru nu este optim. Prin izolarea domeniului de aplicare, diminuăm șansele ca lumea exterioară să afecteze din greșeală și în mod negativ starea directivei dumneavoastră.

Am declarat că sunt obligatorii datele bidirecționale Notă cu = simbol și o expresie legată de ondelete cu & simbol. Vă rugăm să citiți documentația AngularJS pentru o explicație completă a domeniului de aplicare izolat, deoarece este unul dintre subiectele mai complicate din cadrul.

Deci, să adăugăm de fapt o notă lipicioasă la DOM.

La fel ca orice cadru bun, AngularJS vine cu niște caracteristici foarte bune chiar de la început. Una dintre cele mai importante caracteristici este ng-repetare. Această directivă AngularJS vă permite să treceți într-o matrice de obiecte și duplică orice etichetă pe care se află de câte ori există elemente în matrice. În cazul de mai jos, vom itera peste note matricea și duplicarea fișierului div element și copiii săi pentru lungimea note matrice.

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 (nota)"
> {{note.body}} / textarea>
/ div>

Frumusețea ng-repetare este că este legat de orice matrice în care treci și, atunci când adaugi un element în matrice, elementul DOM se va actualiza automat. Puteți face acest lucru cu un pas mai departe și puteți repeta nu numai elementele standard DOM, ci și alte directive personalizate. De aceea vezi tu notă lipicioasă ca atribut al elementului.

Există încă doi biți de cod personalizat care trebuie clarificați. Am izolat domeniul de aplicare pe note lipicioase directivă privind două proprietăți. Primul este domeniul de aplicare izolat obligatoriu definit pe Notă proprietate. Aceasta înseamnă că ori de câte ori obiectul notei se modifică în domeniul de aplicare părinte, acesta va actualiza automat obiectul notă corespunzător din directivă și invers. Celălalt domeniu izolat definit se află pe ondelete atribut. Ceea ce înseamnă asta este că atunci când ondelete este chemat în directivă, va apela orice expresie este în ondelete atribut pe elementul DOM care instanțiază directiva.

Când este instanțiată o directivă, aceasta este adăugată la DOM și se apelează funcția de legătură. Aceasta este o oportunitate perfectă pentru a seta unele proprietăți DOM implicite pe element. Parametrul element pe care îl trecem este de fapt un obiect jQuery și astfel putem efectua operațiuni jQuery pe acesta.

(AngularJS vine de fapt cu un subset de jQuery încorporat, dar dacă ați inclus deja versiunea completă a jQuery, AngularJS se va amâna la asta.)

app.directive ('stickyNote', funcție (socket) {
var linker = funcție (scop, element, attrs) {
// Câteva inițieri DOM pentru a-l face frumos
element.css („stânga”, „10px”);
element.css („top”, „50px”);
element.hide (). fadeIn ();
};
});

În codul de mai sus, pur și simplu poziționăm nota lipicioasă pe scenă și o estompăm.

11. Ștergerea unei note lipicioase

Deci, acum că putem adăuga și afișa o notă lipicioasă, este timpul să ștergem notele lipicioase. Crearea și ștergerea notelor lipicioase este o chestiune de adăugare și ștergere a elementelor din matricea la care sunt legate notele. Aceasta este responsabilitatea domeniului de aplicare părinte de a menține acea matrice, motiv pentru care inițiam cererea de ștergere din directivă, dar lăsăm domeniul de aplicare părinte să facă greutatea reală.

Acesta este motivul pentru care am trecut prin toate problemele de a crea domeniu de aplicare izolat definit de directivă: astfel încât directiva să poată primi evenimentul de ștergere intern și să îl transmită părintelui său pentru procesare.

Observați codul HTML din directivă.

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

Următorul lucru pe care îl voi spune poate părea un drum lung, dar amintiți-vă că suntem de aceeași parte și va avea sens după ce am elaborat. Când se face clic pe butonul din colțul din dreapta sus al notei lipicioase, apelăm deleteNote pe controlerul directivei și trecând în note.id valoare. Controlerul apelează apoi ondelete, care apoi execută orice expresie pe care am conectat-o. Până acum, bine? Apelăm o metodă locală pe controler, care apoi o predă apelând orice expresie a fost definită în domeniul izolat. Expresia care este apelată la părinte se întâmplă să fie numită deleteNote de asemenea.

app.directive ('stickyNote', funcție (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = funcție (id) {
$ scope.ondelete ({
am facut
});
};
};

întoarcere {
restricționează: „A”,
link: linker,
controler: controler,
scop: {
notă: '=',
ondelete: „&”
}
};
});

(Atunci când se utilizează scop izolat definit prin expresie, parametrii sunt trimiși într-o hartă a obiectelor.)

În domeniul de aplicare părinte, deleteNote este apelat și face o ștergere destul de standard folosind unghiular.pentru fiecare funcție utilitară pentru a itera peste matrice de note. Odată ce funcția și-a gestionat activitatea locală, ea continuă și emite evenimentul pentru ca restul lumii să reacționeze în consecință.

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

// Primite
socket.on ('onNoteDeleted', funcție (date) {
$ scope.deleteNote (data.id);
});

// De ieșire
$ scope.deleteNote = funcție (id) {
var OldNotes = $ scope.notes,
NewNotes = [];

angular.forEach (OldNotes, funcție (notă) {
if (note.id! == id) newNotes.push (note);
});

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

12. Actualizarea unei note lipicioase

Facem progrese fantastice! Până acum, sper că începeți să vedeți câteva modele care ies din acest turneu cu vârtejuri. Următorul element din listă este caracteristica de actualizare.

Vom începe de la elementele reale DOM și le vom urmări până la server și vom reveni la client. Mai întâi trebuie să știm când se schimbă titlul sau corpul notei lipicioase. AngularJS tratează elementele de formă ca parte a modelului de date, astfel încât să puteți conecta legarea bidirecțională a datelor într-o clipă. Pentru a face acest lucru, utilizați ng-model directivă și introduceți proprietatea la care doriți să legați. În acest caz, vom folosi nota.titlu și nota.corp respectiv.

Când oricare dintre aceste proprietăți se schimbă, vrem să captăm acele informații pentru a le transmite. Realizăm acest lucru cu ng-schimbare directivă și folosiți-o pentru a apela updateNote și treceți în obiectul de notă în sine. AngularJS face o verificare murdară foarte inteligentă pentru a detecta dacă valoarea a ceea ce se află ng-model s-a schimbat și apoi execută expresia care se află în ng-schimbare.

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

Dezavantajul utilizării ng-schimbare este că transformarea locală a avut loc deja și suntem doar responsabili de transmiterea mesajului. În controler, updateNote este chemat și de acolo vom emite updateNote eveniment pentru ca serverul nostru să transmită celorlalți clienți.

app.directive ('stickyNote', funcție (socket) {
var controller = funcție ($ scope) {
$ scope.updateNote = funcție (notă) {
socket.emit („updateNote”, notă);
};
};
});

Și în controlerul de directivă, ascultăm pentru onNoteUpdated eveniment pentru a ști când s-a actualizat o notă de la un alt client, astfel încât să putem actualiza versiunea noastră locală.

var controller = funcție ($ scope) {
// Primite
socket.on („onNoteUpdated”, funcție (date) {
// Actualizați dacă aceeași notă
if (data.id == $ scope.note.id) {

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

13. Mutarea unei note lipicioase

În acest moment am făcut practic o tură în jurul bazinului pentru copii CRUD și viața este bună! Doar de dragul unui truc de salon pentru a-ți impresiona prietenii, vom adăuga posibilitatea de a muta notițe pe ecran și de a actualiza coordonatele în timp real. Nu vă panicați - sunt doar câteva rânduri de cod. Toată această muncă grea va da roade. Iți promit!

Am invitat un invitat special, jQueryUI, la petrecere și am făcut totul pentru draggables. Adăugarea capacității de a trage o notă local necesită doar o linie de cod. Dacă adăugați element.draggable (); la funcția de linker, veți începe să auziți „Ochiul Tigrului” de Survivor, deoarece acum puteți să vă trageți notele.

Vrem să știm când s-a oprit tragerea și să capturăm noile coordonate pentru a le trece. jQueryUI a fost construit de niște oameni foarte inteligenți, așa că atunci când glisarea se oprește, trebuie pur și simplu să definiți o funcție de apel invers pentru evenimentul stop. Apucăm note.id de pe obiectul scop și valorile CSS din stânga și din partea de sus a ui obiect. Cu aceste cunoștințe facem ceea ce am făcut tot timpul: emite!

app.directive ('stickyNote', funcție (socket) {
var linker = funcție (scop, element, attrs) {
element.draggable ({
stop: funcție (eveniment, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', funcție (date) {
// Actualizați dacă aceeași notă
if (data.id == scope.note.id) {
element.animate ({
stânga: data.x,
sus: date.y
});
}
});
};
});

În acest moment nu ar trebui să fie o surpriză faptul că ascultăm și un eveniment legat de mutare din serviciul socket. În acest caz este onNoteMoved eveniment și dacă nota este potrivită, atunci actualizăm proprietățile CSS din stânga și din partea de sus. Bam! Terminat!

14. Bonusul

Aceasta este o secțiune bonus pe care nu aș include-o dacă nu aș fi absolut încrezător că o puteți realiza în mai puțin de 10 minute. Vom implementa pe un server live (sunt încă uimit de cât de ușor este de făcut).

Mai întâi, trebuie să vă înscrieți pentru o încercare gratuită Nodejitsu. Încercarea este gratuită timp de 30 de zile, ceea ce este perfect pentru a vă uda picioarele.

Odată ce v-ați creat contul, trebuie să instalați pachetul jitsu, pe care îl puteți face din linia de comandă prin $ npm instalați jitsu -g.

Apoi, trebuie să vă conectați din linia de comandă prin $ jitsu login și introduceți acreditările.

Asigurați-vă că vă aflați direct în aplicație, tastați $ jitsu deploy și treceți prin întrebări. De obicei las cât mai mult posibil implicit, ceea ce înseamnă că dau aplicației mele un nume, dar nu un subdomeniu etc.

Și, dragii mei prieteni, asta e tot ce trebuie! Veți obține adresa URL a aplicației dvs. de la ieșirea serverului după ce a fost implementată și este gata de pornire.

15. Concluzie

Am prezentat o mulțime de teme AngularJS în acest articol și sper că v-ați distrat mult în acest proces. Cred că este foarte bine ceea ce puteți realiza cu AngularJS și Socket.io în aproximativ 200 de linii de cod.

Au fost câteva lucruri pe care nu le-am acoperit de dragul concentrării asupra punctelor principale, dar vă încurajez să trageți sursa și să vă jucați cu aplicația. Am construit o bază solidă, dar există încă multe funcții pe care le-ați putea adăuga. Obțineți hacking!

Lukas Ruebbelke este un pasionat de tehnologie și este co-autor al AngularJS în acțiune pentru publicațiile Manning. Lucrul său preferat de făcut este să îi facă pe oameni la fel de entuziasmați de noile tehnologii ca și el. Conduce grupul de utilizatori de aplicații web Phoenix și a găzduit mai mulți hackathoni împreună cu colegii săi parteneri în crimă.

I-a plăcut asta? Citiți acestea!

• Cum să faci o aplicație
• Fonturile noastre web preferate - și nu costă niciun ban
• Descoperiți ce urmează pentru Realitatea Augmentată
• Descărcați texturi gratuite: de înaltă rezoluție și gata de utilizare acum