Taula de col·laboració d'AngularJS amb Socket.io

Content

• 01. El servidor
• 02. Els ossos nus
• 03. Declareu les vostres dependències
• 04. Connecteu Socket.io
• 05. Engegueu els motors!
• 06. Alguns pensaments càndids abans de seguir endavant
• 07. El client
• 08. Els ossos nus
• 09. Creació d’una nota adhesiva
• 10. Visualització de les notes adhesives
• 11. Eliminar una nota adhesiva
• 12. Actualització d’una nota adhesiva
• 13. Moure una nota adhesiva
• 14. La bonificació
• 15. Conclusió
• T'ha agradat això? Llegiu-los!

• Coneixements necessaris: JavaScript intermedi
• Requereix: Node.js, NPM
• Hora del projecte: 2 hores

AngularJS és especialment adequat per crear aplicacions riques del client al navegador i, quan afegiu una mica de Socket.io a la barreja, les coses es posen realment interessants. En aquest article crearem una placa de col·laboració en temps real que utilitzi AngularJS per a l’aplicació del costat del client i Socket.io per compartir l’estat entre tots els clients connectats.

Anem a cobrir una mica de servei de neteja abans de començar. Suposo que teniu una comprensió fonamental d’HTML i JavaScript, ja que no cobriré tots els racons del codi. Per exemple, no cridaré els fitxers CSS i JavaScript que he inclòs al capdavant del fitxer HTML, ja que no hi ha informació nova.

A més, us animo a que agafeu el codi del meu compte de GitHub per seguir-lo. El meu bon amic Brian Ford també té una excel·lent llavor de Socket.io, en la qual he basat algunes de les meves idees originals.

Les quatre funcions principals que volem al tauler de col·laboració són la possibilitat de crear una nota, llegir-les, actualitzar-les, eliminar-les i, per diversió, moure-les al tauler. Sí, és correcte, ens centrem en les funcions estàndard de CRUD. Crec que, centrant-nos en aquestes funcions fonamentals, haurem cobert prou codi perquè puguin sorgir patrons perquè pugueu portar-los i aplicar-los a altres llocs.

01. El servidor

Primer començarem amb el servidor Node.js, ja que ens servirà de base sobre la qual construirem tota la resta.

Construirem un servidor Node.js amb Express i Socket.io. El motiu pel qual fem servir Express és que proporciona un bon mecanisme per configurar un servidor d’actius estàtics a Node.js. Express ve amb un munt de funcions realment impressionants, però, en aquest cas, l’utilitzarem per dividir l’aplicació de manera neta entre el servidor i el client.

(Estic operant amb el supòsit que teniu Node.js i NPM instal·lats. Una cerca ràpida a Google us mostrarà com instal·lar-los si no ho feu).

02. Els ossos nus

Per tant, per construir els ossos del servidor, hem de fer un parell de coses per posar-nos en marxa.

// app.js

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

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

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

A.1 Declarem i instanciem els nostres mòduls Node.js perquè els puguem utilitzar a la nostra aplicació. Estem declarant Express, instanciant Express i després creant un servidor HTTP i enviant-hi la instància Express. I, a partir d’aquí, instanciem Socket.io i li diem que vigili la nostra instància de servidor.

A.2 A continuació, diem a la nostra aplicació Express que utilitzi el nostre directori públic per publicar fitxers.

A.3 Arrencem el servidor i li diem que escolti al port 1337.

Fins ara, això ha estat força indolor i ràpid. Crec que tenim menys de 10 línies al codi i ja tenim un servidor Node.js funcional. Endavant!

03. Declareu les vostres dependències

// packages.json
{
"name": "tauler angular-collab",
"description": "Taula de col·laboració d'AngularJS",
"versió": "0.0.1-1",
"privat": cert,
"dependències": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Una de les funcions més boniques de NPM és la possibilitat de declarar les vostres dependències a packages.json i després instal·leu-los automàticament mitjançant Instal·lació de npm a la línia d'ordres.

04. Connecteu Socket.io

Ja hem definit les funcions bàsiques que volem a l'aplicació i, per tant, hem de configurar els oients d'esdeveniments Socket.io i un tancament adequat per gestionar l'esdeveniment per a cada operació.

Al codi següent, notareu que es tracta bàsicament d’una configuració d’oients d’esdeveniments i de devolucions de trucada. El primer esdeveniment és el connexió esdeveniment, que fem servir per connectar els nostres altres esdeveniments al tancament.

io.sockets.on ('connexió', funció (socket) {
socket.on ('createNote', funció (dades) {
socket.broadcast.emit ('onNoteCreated', dades);
});

socket.on ('updateNote', funció (dades) {
socket.broadcast.emit ('onNoteUpdated', dades);
});

socket.on ('deleteNote', funció (dades) {
socket.broadcast.emit ('onNoteDeleted', dades);
});

socket.on ('moveNote', funció (dades) {
socket.broadcast.emit ('onNoteMoved', dades);
});
});

A partir d’aquí afegim oients a createNote, updateNote, deleteNote i moveNote. I a la funció de devolució de trucada, simplement estem emetent l’esdeveniment que ha passat perquè es pugui notificar a qualsevol client que escolta que l’esdeveniment ha passat.

Hi ha algunes coses que val la pena assenyalar sobre les funcions de devolució de trucada als gestors d'esdeveniments individuals. Un, si voleu enviar un esdeveniment a tothom, excepte al client que ha emès l'esdeveniment que inseriu emissió Abans de emetre trucada de funció. En segon lloc, simplement estem passant la càrrega útil de l’esdeveniment als interessats perquè puguin processar-lo com considerin oportú.

05. Engegueu els motors!

Ara que hem definit les nostres dependències i hem configurat l’aplicació Node.js amb potències Express i Socket.io, és bastant senzill inicialitzar el servidor Node.js.

Primer instal·leu les vostres dependències de Node.js:

Instal·lació de npm

I llavors inicieu el servidor així:

node app.js

I llavors! Aneu a aquesta adreça al navegador. Bam!

06. Alguns pensaments càndids abans de seguir endavant

Sóc principalment desenvolupador de frontend i inicialment em vaig intimidar una mica amb connectar un servidor Node.js a la meva aplicació. La part AngularJS era un instantani, però JavaScript del servidor? Posar en cua la música esgarrifosa d’un film de terror.

Però em va quedar absolutament al descobert que podia configurar un servidor web estàtic en poques línies de codi i, en unes poques línies més, utilitzo Socket.io per gestionar tots els esdeveniments entre els navegadors. I encara era només JavaScript! Per motius d’actualitat, només estem cobrint algunes funcions, però espero que al final de l’article veureu que és fàcil nedar i que la part profunda de la piscina no és tan aterradora.

07. El client

Ara que tenim les nostres sòlides bases al nostre servidor, passem a la meva part preferida: el client. Utilitzarem AngularJS, jQueryUI per a la part arrossegable i Twitter Bootstrap per a una base d’estil.

08. Els ossos nus

Com a qüestió de preferència personal, quan començo una nova aplicació d’AngularJS, m’agrada definir ràpidament el mínim imprescindible que sé que necessitaré per començar i després començar a repetir-ho tan aviat com sigui possible.

Cal que totes les aplicacions d’AngularJS s’introdueixin amb almenys un controlador present i, per tant, aquí és on sempre començo.

Per arrencar automàticament l’aplicació, només cal que afegiu ng-app al node HTML en què voleu que visqui l'aplicació. La majoria de les vegades, afegir-lo a l’etiqueta HTML serà perfectament acceptable. També he afegit un atribut a ng-app per dir-li que vull utilitzar el fitxer aplicació mòdul, que definiré en un moment.

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

Sé que necessitaré almenys un controlador i, per tant, ho trucaré mitjançant ng-controller i assignant-li una propietat de MainCtrl.

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

Per tant, ara estem enganxats a un mòdul anomenat aplicació i un controlador anomenat MainCtrl. Anem endavant i els creem ara.

Crear un mòdul és bastant senzill. Ho definiu trucant mòdul angular i donant-li un nom. Per a futures referències, el segon paràmetre d'una matriu buida és on podeu injectar submòduls per utilitzar-los a l'aplicació. No surt de l’abast d’aquest tutorial, però és útil quan la vostra aplicació comença a créixer en complexitat i necessitats.

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

Declararem alguns espais reservats buits al aplicació mòdul que comença amb el fitxer MainCtrl baix.Completarem tot això més endavant, però volia il·lustrar l'estructura bàsica des del principi.

app.controller ('MainCtrl', funció ($ scope) {});

També embolicarem la funcionalitat Socket.io en un fitxer endoll servei perquè puguem encapsular aquest objecte i no deixar-lo flotant a l'espai de noms global.

app.factory ('socket', funció ($ rootScope) {});

I mentre hi estem, declararem una directiva anomenada nota adhesiva que farem servir per encapsular la funcionalitat de notes adhesives a.

app.directive ('stickyNote', funció (socket) {});

Així que revisem el que hem fet fins ara. Hem arrencat l’aplicació mitjançant ng-app i hem declarat el nostre controlador d'aplicacions a l'HTML. També hem definit el mòdul d’aplicació i hem creat el MainCtrl controlador, el endoll servei i el nota adhesiva directiva.

09. Creació d’una nota adhesiva

Ara que tenim l’esquelet de l’aplicació AngularJS al seu lloc, començarem a construir la funció de creació.

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

// Entrant
socket.on ('onNoteCreated', funció (dades) {// B.3
$ scope.notes.push (dades);
});

// Sortint
$ scope.createNote = function () {// B.4
var nota = {
id: data nova (). getTime (),
title: "Nota nova",
cos: "Pendent"
};

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

B.1 AngularJS té una funció d’injecció de dependència integrada, de manera que s’injecta una $ abast objecte i el endoll servei. El $ abast object serveix com a model de visualització i és bàsicament un objecte JavaScript amb alguns esdeveniments integrats per habilitar la vinculació de dades bidireccional.

B.2 Declarem la matriu en què utilitzarem per vincular la vista.

B.3 Afegim un oient per al onNoteCreated esdeveniment al endoll i empenyent la càrrega útil de l 'esdeveniment a $ scope.notes matriu.

B.4 Hem declarat a createNote mètode que crea un valor per defecte nota objecte i l'empeny cap a l'interior $ scope.notes matriu. També utilitza el fitxer endoll servei per emetre el createNote esdeveniment i passar el nota nova objecte al llarg.

Ara que tenim un mètode per crear la nota, com l’anomenem? Aquesta és una bona pregunta. Al fitxer HTML, afegim la directiva AngularJS integrada fer clic al botó i, a continuació, afegiu el fitxer createNote mètode de crida com a valor de l'atribut.

button id = "createButton" ng-click = "createNote ()"> Crea una nota / botó>

És hora de revisar ràpidament el que hem fet fins ara. Hem afegit una matriu a $ abast objecte a MainCtrl això contenirà totes les notes de l’aplicació. També hem afegit un createNote mètode a $ abast objecte per crear una nota local nova i després transmetre aquesta nota als altres clients mitjançant el endoll servei. També hem afegit un oient d’esdeveniments al endoll servei perquè puguem saber quan altres clients han creat una nota per poder afegir-la a la nostra col·lecció.

10. Visualització de les notes adhesives

Ara tenim la possibilitat de crear un objecte de nota i compartir-lo entre els navegadors, però com el podem mostrar? Aquí entren les directives.

Les directives i les seves complexitats són un tema extens, però la versió breu és que proporcionen una manera d’ampliar elements i atributs amb funcionalitats personalitzades. Les directives són fàcilment la meva part preferida sobre AngularJS, ja que us permet crear bàsicament tot un DSL (idioma específic de domini) al voltant de la vostra aplicació en HTML.

És natural que, ja que anem creant notes adhesives per al nostre tauler de col·laboració, hem de crear un nota adhesiva directiva. Les directives es defineixen trucant al mètode directiu en un mòdul al qual vulgueu declarar-lo i passant un nom i una funció que retornin un objecte de definició de directiva. L’objecte de definició de directiva té moltes propietats possibles que podeu definir-hi, però en farem servir només algunes per als nostres propòsits.

Us recomano que consulteu la documentació d'AngularJS per veure la llista completa de propietats que podeu definir a l'objecte de definició de directiva.

app.directive ('stickyNote', funció (socket) {
var linker = funció (abast, element, attrs) {};

var controlador = funció ($ scope) {};

tornar {
restringir: 'A', // C.1
enllaç: enllaçador, // C.2
controlador: controlador, // C.3
abast: {// C.4
nota: '=',
ondelete: '&'
}
};
});

C.1 Podeu restringir la vostra directiva a un determinat tipus d'element HTML. Els dos més comuns són l'element o l'atribut, que declareu utilitzar E i A respectivament. També podeu restringir-lo a una classe CSS o un comentari, però no són tan habituals.

C.2 La funció d'enllaç és on col·loqueu tot el vostre codi de manipulació DOM. Hi ha algunes excepcions que he trobat, però això sempre és cert (almenys el 99% del temps). Aquesta és una regla fonamental d'AngularJS i per això l'he subratllat.

C.3 La funció del controlador funciona igual que el controlador principal que hem definit per a l'aplicació, però el $ abast l’objecte que passem és específic de l’element DOM que viu la directiva.

C.4 AngularJS té un concepte d'abast aïllat, que permet definir explícitament com es comunica l'abast d'una directiva amb el món exterior. Si no haguéssim declarat l'abast, la directiva hauria heretat implícitament de l'abast dels pares amb una relació pare-fill. En molts casos això no és òptim. Aïllant l’abast, es redueixen les possibilitats que el món exterior pugui afectar de manera involuntària i adversa l’estat de la seva directiva.

He declarat la vinculació de dades bidireccional a nota amb el = símbol i una expressió vinculant a ondelete amb el & símbol. Llegiu la documentació d’AngularJS per obtenir una explicació completa de l’abast aïllat, ja que és un dels temes més complicats del marc.

Així que, de fet, afegim una nota adhesiva al DOM.

Com qualsevol bon marc, AngularJS inclou algunes funcions realment fantàstiques. Una de les característiques més útils és ng-repeat. Aquesta directiva AngularJS permet passar una matriu d’objectes i duplica l’etiqueta que tingui tantes vegades com hi hagi elements a la matriu. En el cas següent, estem iterant sobre el fitxer notes i duplicant el fitxer div element i els seus fills durant la longitud del fitxer notes matriu.

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

La bellesa de ng-repeat és que està lligat a qualsevol matriu on passis i, quan afegeixis un element a la matriu, l'element DOM s'actualitzarà automàticament. Podeu fer un pas més enllà i repetir no només els elements DOM estàndard, sinó també altres directives personalitzades. Per això ho veieu nota adhesiva com a atribut de l'element.

Hi ha altres dos bits de codi personalitzat que cal aclarir. Hem aïllat l'abast al notes adhesives directiva sobre dues propietats. El primer és l'abast aïllat definit a l'enllaç nota propietat. Això significa que cada vegada que l'objecte de nota canvia a l'abast principal, actualitzarà automàticament l'objecte de nota corresponent a la directiva i viceversa. L 'altre àmbit aïllat definit es troba a ondelete atribut. El que això significa és que quan ondelete es diu a la directiva, anomenarà qualsevol expressió que hi hagi a la directiva ondelete atribut a l'element DOM que instancia la directiva.

Quan s’instancia una directiva, s’afegeix al DOM i s’anomena la funció d’enllaç. Aquesta és una oportunitat perfecta per establir algunes propietats DOM per defecte a l'element. El paràmetre element que passem és en realitat un objecte jQuery i, per tant, podem fer-hi operacions jQuery.

(AngularJS ve amb un subconjunt de jQuery integrat, però si ja heu inclòs la versió completa de jQuery, AngularJS s'hi ajudarà.)

app.directive ('stickyNote', funció (socket) {
var linker = funció (abast, element, attrs) {
// Alguna iniciació al DOM per fer-ho agradable
element.css ('esquerra', '10px');
element.css ('superior', '50px');
element.hide (). fadeIn ();
};
});

Al codi anterior, simplement col·loquem la nota adhesiva a l’escenari i l’esvaim.

11. Eliminar una nota adhesiva

Així que ara que podem afegir i mostrar una nota adhesiva, és hora de suprimir les notes adhesives. La creació i supressió de notes adhesives és una qüestió d’afegir i eliminar elements de la matriu a què estan lligades les notes. Aquesta és la responsabilitat de l’àmbit principal de mantenir aquesta matriu, per això originem la sol·licitud d’eliminació de la directiva, però deixem que l’àmbit principal faci l’aixecament real.

És per això que vam passar tots els problemes per crear un àmbit aïllat definit per expressions a la directiva: de manera que la directiva pogués rebre l'esdeveniment de supressió internament i passar-lo al seu pare per al seu processament.

Fixeu-vos en l'HTML de la directiva.

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

El següent que diré pot semblar un llarg camí, però recordeu que estem del mateix costat i que tindrà sentit després d’haver elaborat. Quan es fa clic al botó situat a l'extrem superior dret de la nota adhesiva, estem trucant deleteNote al controlador de la directiva i passant al fitxer nota.id valor. Llavors el controlador truca ondelete, que després executa qualsevol expressió que hi hàgim connectat. Fins ara, tot bé? Anem a trucar a un mètode local del controlador, que després el lliura trucant a qualsevol expressió definida a l’àmbit aïllat. L’expressió que es crida al pare o la mare només s’anomena deleteNote també.

app.directive ('stickyNote', funció (socket) {
var controlador = funció ($ scope) {
$ scope.deleteNote = funció (identificador) {
$ scope.ondelete ({
ho vaig fer
});
};
};

tornar {
restringir: "A",
enllaç: enllaçador,
controlador: controlador,
abast: {
nota: '=',
ondelete: '&'
}
};
});

(Quan s'utilitza l'àmbit aïllat definit per expressió, els paràmetres s'envien en un mapa d'objectes).

En l’àmbit principal, deleteNote es crida i fa una supressió bastant estàndard mitjançant el fitxer angular.perCada funció d’utilitat per iterar sobre la matriu de notes. Un cop la funció ha gestionat el seu negoci local, continua endavant i emet l'esdeveniment perquè la resta del món reaccioni en conseqüència.

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

// Entrant
socket.on ('onNoteDeleted', funció (dades) {
$ scope.deleteNote (data.id);
});

// Sortint
$ scope.deleteNote = funció (identificador) {
var oldNotes = $ scope.notes,
notesNotes = [];

angular.forEach (notesVelles, funció (nota) {
if (note.id! == id) newNotes.push (nota);
});

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

12. Actualització d’una nota adhesiva

Estem fent un progrés fantàstic. A hores d’ara espero que comenceu a veure alguns patrons emergents d’aquesta gira de remolins que estem fent. El següent element de la llista és la funció d'actualització.

Començarem pels elements reals del DOM i el seguirem fins al servidor i tornarem al client. Primer, hem de saber quan es canvia el títol o el cos de la nota adhesiva. AngularJS tracta els elements del formulari com a part del model de dades, de manera que podeu connectar la combinació de dades bidireccional en un instantani. Per fer-ho, utilitzeu el fitxer ng-model directiva i introduïu la propietat a la qual vulgueu lligar. En aquest cas ho farem servir nota.títol i nota.còs respectivament.

Quan qualsevol d'aquestes propietats canviï, volem capturar aquesta informació per transmetre-la. Ho aconseguim amb el ng-change directiva i utilitzeu-la per trucar updateNote i passar a l'objecte de nota mateix. AngularJS fa una comprovació bruta molt intel·ligent per detectar si el valor del que hi ha és ng-model ha canviat i després executa l'expressió que hi ha ng-change.

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

L’avantatge de l’ús ng-change és que la transformació local ja ha passat i només ens encarreguem de transmetre el missatge. Al controlador, updateNote es diu i a partir d’aquí emetrem el updateNote esdeveniment perquè el nostre servidor emeti als altres clients.

app.directive ('stickyNote', funció (socket) {
var controlador = funció ($ scope) {
$ scope.updateNote = funció (nota) {
socket.emit ('updateNote', nota);
};
};
});

I al controlador de directives, estem escoltant el onNoteUpdated esdeveniment per saber quan s'ha actualitzat una nota d'un altre client perquè puguem actualitzar la nostra versió local.

var controlador = funció ($ scope) {
// Entrant
socket.on ('onNoteUpdated', funció (dades) {
// Actualitzeu si la mateixa nota
if (data.id == $ scope.note.id) {

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

13. Moure una nota adhesiva

En aquest moment, bàsicament hem fet una volta al voltant de la piscina infantil CRUD i la vida és bona. Només per fer un truc de saló per impressionar als vostres amics, afegirem la possibilitat de moure notes per la pantalla i actualitzar les coordenades en temps real. No us espanteu: només són algunes línies de codi més. Tot aquest treball dur donarà els seus fruits. Prometo!

Hem convidat a la festa un convidat especial, jQueryUI, i ho hem fet tot per fer-los arrossegar. Si afegiu la possibilitat d’arrossegar una nota localment, només cal una línia de codi. Si hi afegiu element.draggable (); a la funció d'enllaç, començareu a escoltar "Ull del tigre" de Survivor perquè ara podeu arrossegar les vostres notes.

Volem saber quan s’ha aturat l’arrossegament i capturar les noves coordenades per passar. jQueryUI va ser construït per algunes persones molt intel·ligents, de manera que quan s’arrossega l’arrossegament simplement heu de definir una funció de devolució de trucada per a l’esdeveniment de parada. Agafem el nota.id des de l'objecte d'abast i els valors CSS esquerra i superior del fitxer ui objecte. Amb aquest coneixement fem el que hem estat fent sempre: emetre!

app.directive ('stickyNote', funció (socket) {
var linker = funció (abast, 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', funció (dades) {
// Actualitzeu si la mateixa nota
if (data.id == scope.note.id) {
element.animate ({
esquerra: data.x,
a dalt: data.y
});
}
});
};
});

En aquest moment, no ens ha d’estranyar que també escoltem un esdeveniment relacionat amb el trasllat des del servei de socket. En aquest cas és el onNoteMoved esdeveniment i si la nota coincideix, actualitzem les propietats CSS esquerra i superior. Bam! Fet!

14. La bonificació

Aquesta és una secció de bonificació que no inclouria si no estigués absolutament segura que podríeu aconseguir-la en menys de 10 minuts. Ens implementarem a un servidor en directe (encara em sorprèn la facilitat que es fa).

En primer lloc, cal que us inscriviu per obtenir una prova gratuïta de Nodejitsu. La prova és gratuïta durant 30 dies, cosa perfecta per mullar-se els peus.

Un cop hàgiu creat el compte, heu d’instal·lar el paquet jitsu, que podeu fer des de la línia d’ordres mitjançant $ npm install jitsu -g.

Després heu d’iniciar sessió des de la línia d’ordres mitjançant $ jitsu inici de sessió i introduïu les vostres credencials.

Assegureu-vos que sou directament a la vostra aplicació, escriviu Desplegament de $ jitsu i passeu per les preguntes. Normalment deixo el màxim per defecte possible, cosa que significa que dono a la meva aplicació un nom, però no un subdomini, etc.

I, estimats amics, això és tot el que hi ha. Obtindreu l'URL de la vostra aplicació des de la sortida del servidor un cop s'hagi desplegat i estigui a punt.

15. Conclusió

En aquest article hem tractat moltes coses sobre AngularJS i espero que us hagueu divertit molt en el procés. Crec que és realment correcte el que podeu aconseguir amb AngularJS i Socket.io en aproximadament 200 línies de codi.

Hi havia algunes coses que no vaig cobrir per centrar-me en els punts principals, però us animo a retirar la font i jugar amb l'aplicació. Hem construït una base sòlida, però encara hi ha moltes funcions que podeu afegir. Obteniu pirateria informàtica.

Lukas Ruebbelke és un entusiasta de la tecnologia i és coautor d’AngularJS in Action for Manning Publications. El que més li agrada és fer que la gent estigui tan entusiasmada amb les noves tecnologies com ell. Dirigeix ​​el grup d’usuaris d’aplicacions web de Phoenix i ha allotjat múltiples hackathons amb els seus companys d’assassinat en el delicte.

T'ha agradat això? Llegiu-los!

• Com crear una aplicació
• Els nostres tipus de lletra web preferits, i no costen ni un cèntim
• Descobriu el següent per a la realitat augmentada
• Descarregueu textures gratuïtes: d'alta resolució i llestes per utilitzar ara