AngularJS-i koostöölaud koos Socket.io-ga

Sisu

• 01. Server
• 02. Paljad luud
• 03. Deklareeri oma sõltuvused
• 04. Ühendage pistikupesa.io
• 05. Käivitage mootorid!
• 06. Enne jätkamist paar avameelset mõtet
• 07. Klient
• 08. Paljad luud
• 09. Kleebise loomine
• 10. Kleepuvate märkmete kuvamine
• 11. Kleebise kustutamine
• 12. Kleebise uuendamine
• 13. Kleebise teisaldamine
• 14. Boonus
• 15. Järeldus
• Meeldis see? Loe neid!

• Vajalikud teadmised: Vahepealne JavaScript
• Vajab: Node.js, NPM
• Projekti aeg: 2 tundi

AngularJS sobib eriti hästi rikkalike kliendipoolsete rakenduste loomiseks brauseris ja kui lisate segusse väikese Socket.io, muutuvad asjad tõesti huvitavaks. Selles artiklis ehitame reaalajas koostööplaadi, mis kasutab AngularJS-i kliendipoolse rakenduse jaoks ja Socket.io, et jagada olekut kõigi ühendatud klientide vahel.

Enne alustamist käsitleme natuke majapidamist. Eeldan, et teil on HTML-ist ja JavaScripti põhitõde, kuna ma ei hõlma koodi kõiki väikseid nurki. Näiteks ei hakka ma välja kutsuma CSS-i ja JavaScripti faile, mille olen lisanud HTML-faili peaossa, kuna seal pole uut teavet.

Samuti soovitan teil järgimiseks jälgida oma GitHubi kontolt koodi. Minu hea sõber Brian Fordil on ka suurepärane Socket.io seeme, millele ma mõned oma algsed ideed tuginesin.

Neli peamist omadust, mida koostööpartneril soovime, on võime märkme koostamiseks, märkmete lugemiseks, märkmete värskendamiseks, märkmete kustutamiseks ja oma lõbuks märkmele tahvlil teisaldamiseks. Jah, see on õige, keskendume standardsetele CRUD-funktsioonidele. Usun, et nendele põhifunktsioonidele keskendudes oleme piisavalt mustrite tekkimiseks vajaliku koodi katnud, et saaksite neid võtta ja mujal rakendada.

01. Server

Alustame kõigepealt Node.js-serveriga, kuna see on aluseks, millele kogu muu ehitame.

Ehitame Node.js serveri koos Expressiga ja Socket.io. Põhjus, miks me kasutame Expressi, on see, et see pakub kena mehhanismi staatilise vara serveri seadistamiseks Node.js-is. Expressil on hulk tõeliselt vingeid funktsioone, kuid sel juhul kasutame seda rakenduse serveri ja kliendi vahel puhtaks poolitamiseks.

(Töötan eeldusel, et teil on installitud Node.js ja NPM. Kiire Google'i otsing näitab, kuidas neid installida, kui te seda ei tee.)

02. Paljad luud

Nii et serveri paljaste luude ülesehitamiseks peame püsti tõusmiseks tegema paar asja.

// app.js

A.1
var express = nõuda (’express’),
rakendus = ekspress ();
server = nõuda (’http’). createServer (rakendus),
io = nõuda (’socket.io’). kuula (server);

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

A.3
server.listen (1337);

A.1 Deklareerime ja kiirendame oma Node.js mooduleid, et saaksime neid oma rakenduses kasutada. Deklareerime Expressi, kiirendame Expressi ja loome seejärel HTTP-serveri ning saadame ekspressi eksemplari sellesse. Sealt lähendame Socket.io-d ja käskime tal meie serveri eksemplaril silma peal hoida.

A.2 Seejärel käskime oma Expressi rakendusel kasutada meie avalikku kataloogi failide serveerimiseks.

A.3 Käivitame serveri ja käskime sellel sadamas kuulata 1337.

Siiani on see olnud üsna valutu ja kiire. Usun, et oleme koodis vähem kui 10 rida ja meil on juba toimiv Node.js server. Edasi!

03. Deklareeri oma sõltuvused

// paketid.json
{
"nimi": "nurgeline kollaboratiivlaud",
"description": "AngularJS koostöökogu",
"versioon": "0.0.1-1",
"privaatne": tõsi,
"sõltuvused": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

NPM-i üks meeldivamaid omadusi on võime deklareerida oma sõltuvused a-s paketid.json faili ja installige need siis automaatselt npm install käsureal.

04. Ühendage pistikupesa.io

Oleme juba määranud põhifunktsioonid, mida soovime rakenduses, ja seetõttu peame iga toimingu jaoks seadistama Socket.io sündmuste kuulajad ja sobiva sulguri, et sündmust käsitleda.

Allolevas koodis märkate, et see on sisuliselt sündmuste kuulajate ja tagasihelistuste konfiguratsioon. Esimene sündmus on ühendus sündmus, mida kasutame oma teiste ürituste sulgemiseks.

io.sockets.on (’ühendus’, funktsioon (pesa) {
socket.on (’createNote’, funktsioon (andmed) {
socket.broadcast.emit (’onNoteCreated’, andmed);
});

socket.on (’updateNote’, funktsioon (andmed) {
socket.broadcast.emit (’onNoteUpdated’, andmed);
});

socket.on (’deleteNote’, funktsioon (andmed) {
socket.broadcast.emit (’onNoteDeleted’, andmed);
});

socket.on (’moveNote’, funktsioon (andmed) {
socket.broadcast.emit (’onNoteMoved’, andmed);
});
});

Siit lisame kuulajad createNote, updateNote, kustuta märkus ja märkus. Tagasihelistamisfunktsioonis edastame lihtsalt sündmuse, mis juhtus, nii et kõiki kliente, kes kuulavad, saaks sündmuse toimumisest teavitada.

Üksikute sündmuste käitlejate tagasihelistusfunktsioonide kohta tasub välja tuua mõned asjad. Üks, kui soovite saata sündmuse kõigile teistele, välja arvatud teie sisestatud sündmuse väljastanud kliendile saade enne kiirgama funktsioonikõne. Teiseks edastame ürituse kasuliku koormuse lihtsalt huvitatud isikutele, et nad saaksid seda oma äranägemise järgi töödelda.

05. Käivitage mootorid!

Nüüd, kui oleme määranud oma sõltuvused ja seadistanud oma rakenduse Node.js Expressi ja Socket.io jõududega, on Node.js-serveri lähtestamine üsna lihtne.

Kõigepealt installige oma Node.js sõltuvused, näiteks:

npm install

Ja siis käivitate serveri järgmiselt:

sõlm app.js

Ja siis! Te lähete sellele aadressile oma brauseris. Bam!

06. Enne jätkamist paar avameelset mõtet

Olen peamiselt kasutajaliidese arendaja ja esialgu hirmutas mind Node.js-serveri ühendamine oma rakendusega. AngularJS osa oli kohene, kuid serveripoolne JavaScripti? Järjekordne jube muusika õudusekraanilt.

Kuid mul oli täiesti korraks, et avastada, et saan staatilise veebiserveri seadistada vaid mõne koodirea abil ja veel mõnes reas kasutada kõigi brauserite vaheliste sündmuste haldamiseks Socket.io-d. Ja see oli ikkagi lihtsalt JavaScript! Ajakohasuse huvides käsitleme ainult mõnda funktsiooni, kuid loodan, et artikli lõpuks näete, et ujuda on lihtne - ja basseini sügav ots pole nii hirmutav.

07. Klient

Nüüd, kui meil on oma serveriga kindel alus olemas, liigume minu lemmikosa juurde - klient! Kasutame lohistatava osa jaoks AngularJS-i, jQueryUI ja stiilibaasi jaoks Twitter Bootstrap-i.

08. Paljad luud

Isikliku eelistusena soovin uue AngularJS-i rakenduse käivitamisel kiiresti määratleda minimaalse miinimumi, mida tean, et mul on vaja alustada, ja seejärel hakata seda võimalikult kiiresti kordama.

Igale AngularJS-i rakendusele tuleb käivitada vähemalt üks kontroller ja seega alustan seda alati.

Rakenduse automaatseks käivitamiseks peate lihtsalt lisama ng-rakendus HTML-sõlme, milles soovite rakendust elada. Enamasti on selle HTML-märgendile lisamine täiesti vastuvõetav. Olen lisanud ka atribuudi ng-rakendus öelda talle, et ma tahan kasutada rakendus moodul, mille määran vaid hetkega.

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

Ma tean, et mul on vaja vähemalt ühte kontrollerit ja seetõttu kutsun selle üles ng-kontroller ja omistades sellele atribuudi MainCtrl.

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

Nüüd oleme nimega mooduli otsas rakendus ja kontroller nimega MainCtrl. Lähme edasi ja loome need kohe.

Mooduli loomine on üsna lihtne. Määrate selle helistades nurgeline.moodul ja paneme sellele nime. Hilisemaks kasutamiseks on tühja massiivi teine ​​parameeter koht, kuhu saate rakenduses kasutamiseks alamooduleid süstida. See ei kuulu selle õpetuse reguleerimisalasse, kuid on mugav, kui teie rakendus hakkab keerukuse ja vajaduste järgi kasvama.

// public / js / cooper.js
var app = nurgeline.moodul (’rakendus’, []);

Deklareerime dokumendis mõned tühjad kohatäited rakendus algav moodul MainCtrl allpool.Täidame need kõik hiljem, kuid tahtsin põhistruktuuri algusest peale illustreerida.

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

Pakume ka Socket.io funktsionaalsust a pistikupesa teenust, et saaksime selle objekti kapseldada ja mitte jätta seda globaalses nimeruumis hõljuma.

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

Ja kui me sellega tegeleme, kuulutame välja direktiivi nimega kleepuvMärkus mida me kasutame märkmiku funktsionaalsuse kapseldamiseks.

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

Nii et vaatame üle, mida oleme seni teinud. Oleme rakenduse käivitanud ng-rakendus ja deklareerisime HTML-is meie rakenduse kontrolleri. Samuti oleme määranud rakendusemooduli ja loonud MainCtrl kontroller, pistikupesa teenus ja kleepuvMärkus direktiiv.

09. Kleebise loomine

Nüüd, kui meil on rakenduse AngularJS skelett paigas, hakkame loomisfunktsiooni üles ehitama.

app.controller (’MainCtrl’, function ($ scope, socket) {// B.1
$ ulatus.märkused = []; B.2

// Sissetulev
socket.on (’onNoteCreated’, funktsioon (andmed) {// B.3
$ ulatus.notes.push (andmed);
});

// Väljaminev
$ scope.createNote = function () {// B.4
var note = {
id: uus kuupäev (). getTime (),
pealkiri: ’Uus märkus’,
body: 'ootel'
};

$ ulatus.märkused.push (märkus);
socket.emit (’createNote’, märkus);
};

B.1 AngularJS-is on sisse ehitatud sõltuvuse süstimise funktsioon, nii et süstime a ulatus objekt ja pistikupesa teenus. The ulatus objekt toimib ViewModelina ja on põhimõtteliselt JavaScripti objekt, kuhu on küpsetatud mõned sündmused, et võimaldada kahepoolset andmebaaside sidumist.

B.2 Deklareerime massiivi, mida kasutame vaate sidumiseks.

B.3 Lisame kuulaja onNoteCreated sündmus pistikupesa teenus ja ürituse kasuliku koormuse lükkamine ulatus $ märkused massiiv.

B.4 Oleme kuulutanud a createNote meetod, mis loob vaikimisi Märge objekt ja surub selle ulatus $ märkused massiiv. Samuti kasutab see pistikupesa teenuse eraldamiseks createNote sündmus ja läbida uus märkus objekt mööda.

Nii et nüüd, kui meil on noodi loomiseks meetod, kuidas seda nimetada? See on hea küsimus! Lisame HTML-faili sisseehitatud AngularJS-i direktiivi ng-klõps nupule ja seejärel lisage createNote meetodi kutse atribuudi väärtusena.

nupp id = "createButton" ng-click = "createNote ()"> Loo märkus / nupp>

Aeg senise tegevuse kiireks ülevaatamiseks. Lisasime massiivi ulatus objekt MainCtrl see hoiab kõiki rakenduse märkmeid. Oleme lisanud ka a createNote meetod ulatus objekti uue kohaliku märkme loomiseks ja seejärel selle märkme edastamine teistele klientidele pistikupesa teenus. Lisasime saidile ka sündmuste kuulaja pistikupesa teenus, et saaksime teada, kui teised kliendid on märkme loonud, et saaksime selle oma kogusse lisada.

10. Kleepuvate märkmete kuvamine

Nüüd on meil võimalus märkmeobjekt luua ja seda brauserite vahel jagada, kuid kuidas seda tegelikult kuvada? Siin tulevad sisse direktiivid.

Direktiivid ja nende keerukused on suur teema, kuid lühike versioon on see, et need pakuvad võimalust laiendada elemente ja atribuute kohandatud funktsioonidega. Direktiivid on minu lemmikosa AngularJS-i kohta, sest see võimaldab teil HTML-i abil oma rakenduse ümber sisuliselt luua terve DSL-i (domeenispetsiifiline keel).

On loomulik, et kuna me loome oma koostöölauale märkmikke, peaksime looma kleepuvMärkus direktiiv. Direktiivid määratletakse, kutsudes mooduli, millele soovite selle deklareerida, meetodi direktiiv ning edastades nime ja funktsiooni, mis tagastavad direktiivi määratlusobjekti. Direktiivi määratlusobjektil on palju võimalikke omadusi, mida saate sellel määratleda, kuid me kasutame siin oma eesmärkidel vaid mõnda.

Soovitan teil vaadata AngularJS dokumentatsiooni, et näha kõiki omaduste loendeid, mille saate määratleda direktiivi määratluse objektil.

app.directive (’stickyNote’, function (socket) {
var linker = funktsioon (ulatus, element, attrid) {};

var kontroller = funktsioon (ulatus $) {};

tagastama {
piirata: ’A’, // C.1
link: linker, // C.2
kontroller: kontroller, // C.3
ulatus: {// C.4
märkus: ’=’,
ondelete: ’&’
}
};
});

C.1 Saate piirata oma direktiivi teatud tüüpi HTML-elementidega. Kaks levinumat on element või atribuut, mille deklareerite E ja A vastavalt. Võite ka piirduda CSS-klassi või kommentaariga, kuid need pole nii levinud.

C.2 Linkimisfunktsioon on koht, kuhu sisestate kogu oma DOM-i manipuleerimiskoodi. Olen leidnud mõned erandid, kuid see on alati tõsi (vähemalt 99 protsenti ajast). See on AngularJSi põhireegel ja seetõttu olen seda rõhutanud.

C.3 Kontrolleri funktsioon töötab täpselt nagu peamine kontroller, mille me rakenduse jaoks määrasime, kuid ulatus objekt, mida me läbime, on spetsiifiline DOM-elemendile, millest direktiiv elab.

C.4 AngularJS-is on isoleeritud reguleerimisala kontseptsioon, mis võimaldab teil selgelt määratleda, kuidas direktiivi reguleerimisala välismaailmaga suhtleb. Kui me ei oleks reguleerimisala deklareerinud, oleks direktiiv kaudselt päritud vanema ja lapse suhtega vanema ulatusest. Paljudel juhtudel pole see optimaalne. Kohaldamisala isoleerimisega vähendame võimalust, et välismaailm võib teie direktiivi seisu tahtmatult ja kahjulikult mõjutada.

Olen kuulutanud kahepoolse andmete sidumise domeeniga Märge koos = sümbol ja väljendiga seonduv väljend ondelete koos & sümbol. Isoleeritud ulatuse täieliku selgituse saamiseks lugege AngularJS dokumentatsiooni, kuna see on raamistiku üks keerulisemaid teemasid.

Nii et lisame DOM-ile tegelikult kleepuva märkme.

Nagu iga hea raamistik, on ka AngularJS-l kohe karbist välja tulnud mõned suurepärased funktsioonid. Üks käepärasemaid funktsioone on ng-kordus. See AngularJS-i direktiiv võimaldab teil sisestada massiivi objekte ja see dubleerib mis tahes silti, nii palju kui see on massiivis. Allpool toodud juhul kordame märkmeid massiivi ja div element ja selle lapsed märkmeid massiiv.

div sticky-note ng-repeat = "märkus märkmetes" note = "note" ondelete = "deleteNote (id)">
nupu tüüp = "nupp" ng-click = "deleteNote (note.id)"> × / nupp>
sisend ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (märkus)"
> {{note.body}} / textarea>
/ div>

Ilu ng-kordus on see, et see on seotud mis tahes massiividega, mille edastate, ja kui lisate massiivi üksuse, värskendatakse teie DOM-elementi automaatselt. Võite teha selle sammu edasi ja korrata lisaks standardsetele DOM-elementidele ka muid kohandatud direktiive. Sellepärast näete märkmik elemendi atribuudina.

On veel kaks kohandatud koodi bitti, mis vajavad täpsustamist. Oleme isoleerinud selle ulatuse kleepuvad märkmed direktiiv kahe omaduse kohta. Esimene neist on siduv määratletud isoleeritud ulatus Märge vara. See tähendab, et alati, kui märkuse objekt muutub vanema ulatusega, värskendab see automaatselt vastavat märkuse objekti direktiivis ja vastupidi. Teine määratletud isoleeritud ulatus on ondelete atribuut. See tähendab, et millal ondelete nimetatakse direktiivis, nimetab see mis tahes väljendit, mis on ondelete atribuut DOM-elemendil, mis käskkirja kiirendab.

Kui direktiiv on kiirendatud, lisatakse see DOM-ile ja kutsutakse linkimisfunktsiooni. See on suurepärane võimalus seada elemendile mõned DOM-i vaikeatribuudid. Elemendi parameeter, kuhu me edastame, on tegelikult jQuery objekt ja seega saame sellega ka jQuery toiminguid teha.

(AngularJS-ga on tegelikult sisse ehitatud jQuery alamhulk, kuid kui olete juba lisanud jQuery täisversiooni, lükkub AngularJS sellele edasi.)

app.directive (’stickyNote’, function (socket) {
var linker = funktsioon (ulatus, element, attrs) {
// Mõned DOM-i algatused, et see oleks tore
element.css (’vasak’, ’10px’);
element.css (’ülemine’, ’50px’);
element.hide (). fadeIn ();
};
});

Ülaltoodud koodis paigutame kleepuva märkme lihtsalt laval ja tuhmime selle sisse.

11. Kleebise kustutamine

Nii et nüüd, kui saame märkmiku lisada ja kuvada, on aeg märkmikud kustutada. Kleepmärkmete loomine ja kustutamine on massiivi üksuste lisamine ja kustutamine, millega noodid on seotud. Selle massiivi säilitamise eest vastutab vanema ulatus, mistõttu lähtume kustutamistaotlusest direktiivi sisemuses, kuid laseme vanemalal tegeliku raskuse tõsta.

Sellepärast saime direktiivis määratletud eraldiseisva reguleerimisala loomisega kõik probleemid läbi: nii saaks direktiiv kustutussündmuse sisemiselt vastu võtta ja edastada selle oma vanemale töötlemiseks.

Pange tähele HTML-i direktiivi sees.

nupu tüüp = "nupp" ng-click = "deleteNote (note.id)"> × / nupp>

Järgmine asi, mida ma ütlen, võib tunduda kaugena, kuid pidage meeles, et oleme samal poolel ja see on mõttekas pärast seda, kui ma seda täpsustan. Kui klõpsate kleepmärgi paremas ülanurgas oleval nupul, helistame kustuta märkus direktiivi vastutava töötleja kohta ja märkus.id väärtus. Seejärel helistab kontroller ondelete, mis siis täidab mis tahes väljendit, mille me sellega ühendasime. Siiamaani on kõik korras? Helistame kontrolleril kohalikule meetodile, mis seejärel annab selle kätte, kutsudes mis tahes isoleeritud ulatuses määratletud avaldise. Vanemale helistatav väljend lihtsalt juhtub kustuta märkus samuti.

app.directive (’stickyNote’, function (socket) {
var kontroller = funktsioon ($ ulatus) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
ma tegin
});
};
};

tagastama {
piirata: ’A’,
link: linker,
kontroller: kontroller,
ulatus: {
märkus: ’=’,
ondelete: ’&’
}
};
});

(Avaldise määratletud eraldatud ulatuse kasutamisel saadetakse parameetrid objektikaardile.)

Emaülesandes kustuta märkus helistatakse ja kustutatakse faili abil üsna tavaline kustutamine nurgeline.mõlemale utiliitfunktsioon märkmete massiivi kordamiseks. Kui funktsioon on oma kohaliku ettevõtlusega hakkama saanud, läheb see edasi ja väljastab sündmuse, et ülejäänud maailm saaks vastavalt reageerida.

app.controller (’MainCtrl’, function ($ scope, socket) {
$ ulatus.märkused = [];

// Sissetulev
socket.on (’onNoteDeleted’, funktsioon (andmed) {
$ scope.deleteNote (data.id);
});

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

angular.forEach (oldNotes, funktsioon (märkus) {
if (märkus.id! == id) newNotes.push (märkus);
});

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

12. Kleebise uuendamine

Me teeme fantastilisi edusamme! Nüüdseks loodan, et olete hakanud nägema mõningaid mustreid sellest meie keeristormituurist, mille teeme. Järgmine loendi üksus on värskendamise funktsioon.

Alustame tegelike DOM-i elementidega ja jälgime seda kuni serverini ja tagasi kliendi juurde. Kõigepealt peame teadma, millal kleeplindi pealkirja või keha muudetakse. AngularJS käsitleb vormielemente osana andmemudelist, et saaksite kohe ühendada kahepoolse andmesidumise. Selleks kasutage ng-mudel direktiiv ja sisestage kinnisvara, millega soovite siduda. Sel juhul me kasutame märkus.pealkiri ja märkus.keha vastavalt.

Kui mõni neist omadustest muutub, tahame selle teabe hõivata, et seda edasi anda. Me saavutame selle ng-muutus ja kasutage seda helistamiseks updateNote ja sisestage märkme objekt ise. AngularJS teeb väga nutikat räpast kontrolli, et tuvastada, kas selle väärtus on sees ng-mudel on muutunud ja täidab seejärel avaldise, mis on ng-muutus.

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

Kasutamise tagurpidi ng-muutus on see, et kohalik ümberkujundamine on juba toimunud ja me vastutame sõnumi edastamise eest. Kontrolleris updateNote kutsutakse ja sealt läheme välja updateNote meie serveri jaoks teistele klientidele edastatav sündmus.

app.directive (’stickyNote’, function (socket) {
var kontroller = funktsioon ($ ulatus) {
$ scope.updateNote = funktsioon (märkus) {
socket.emit (’updateNote’, märkus);
};
};
});

Ja direktiivi kontrolleris kuulame seda onNoteUpdated sündmus, et teada saada, kui teise kliendi märkus on värskendatud, et saaksime oma kohalikku versiooni uuendada.

var kontroller = funktsioon ($ ulatus) {
// Sissetulev
socket.on (’onNoteUpdated’, funktsioon (andmed) {
// Värskenda, kui sama märkus
if (data.id == $ ulatus.note.id) {

$ ulatus.note.title = data.title;
$ ulatus.märkus.keha = andmed.keha;
}
});
};

13. Kleebise teisaldamine

Sel hetkel oleme põhimõtteliselt teinud ringi CRUD lastebasseini ümber ja elu on hea! Ainult salongitriki pärast, et oma sõpradele muljet avaldada, lisame ka reaalajas märkmete ekraanil liikumise ja koordinaatide värskendamise võimaluse. Ärge paanitsege - see on veel vaid paar koodirida. Kogu see raske töö tasub end ära. Ma luban!

Oleme peole kutsunud erikülalise jQueryUI ja tegime kõik lohistatavate jaoks. Märkme kohapeal lohistamise lisamine võtab ainult ühe koodirea. Kui lisate element.tõmmatav (); linkeri funktsioonile hakkate kuulma Survivori „Tiigri silma”, kuna saate nüüd märkmeid ringi lohistada.

Soovime teada, kui lohistamine on lõppenud, ja jäädvustame uued koordinaadid, mida mööda minna. jQueryUI ehitasid väga nutikad inimesed, nii et kui lohistamine peatub, peate lihtsalt stop-sündmuse jaoks määrama tagasihelistamisfunktsiooni. Haarame märkus.id välja ulatusobjektist ning vasakust ja ülemisest CSS-i väärtusest ui objekt. Selle teadmisega teeme seda, mida oleme kogu aeg teinud: emiteerige!

app.directive (’stickyNote’, function (socket) {
var linker = funktsioon (ulatus, element, attrs) {
element.draggable ({
stop: funktsioon (sündmus, ui) {
socket.emit (’moveNote’, {
id: ulatus.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, funktsioon (andmed) {
// Värskenda, kui sama märkus
if (andmed.id == ulatus.märkus.id) {
element.animate ({
vasakul: data.x,
üles: andmed.y
});
}
});
};
});

Siinkohal ei tohiks olla üllatav, et kuulame ka pistikupesateenusest kolimisega seotud sündmust. Sel juhul on see onNoteMoved sündmus ja kui märkus on vaste, siis värskendame vasakut ja ülemist CSS-i atribuuti. Bam! Valmis!

14. Boonus

See on boonusosa, mida ma ei lisaks, kui ma poleks täiesti kindel, et saate selle saavutada vähem kui 10 minutiga. Hakkame juurutama reaalserverisse (olen endiselt üllatunud, kui lihtne seda teha on).

Esiteks peate minema registreeruma tasuta Nodejitsu prooviversioonile. Proov on 30 päeva tasuta, mis sobib suurepäraselt jalgade märjaks saamiseks.

Kui olete oma konto loonud, peate installima jitsu paketi, mida saate teha käsurealt $ npm installige jitsu -g.

Seejärel peate sisse logima käsurealt $ jitsu sisselogimine ja sisestage oma volitused.

Veenduge, et olete otse oma rakenduses, tippige $ jitsu juurutada ja astuge küsimustest läbi. Jätan tavaliselt nii palju vaikimisi kui võimalik, mis tähendab, et annan oma rakendusele nime, kuid mitte alamdomeeni jne.

Ja mu kallid sõbrad, see on kõik, mis seal on! Kui olete selle juurutanud ja see on kasutamiseks valmis, saate oma rakenduse URL-i serveri väljundist.

15. Järeldus

Oleme selles artiklis käsitlenud palju AngularJS-i ja loodan, et teil oli selle käigus palju nalja. Ma arvan, et on väga kena, mida saate AngularJS ja Socket.io abil saavutada umbes 200 koodireaga.

Põhipunktidele keskendumise huvides jätsin mõned asjad katmata, kuid soovitan teil allikas alla tõmmata ja rakendusega ringi mängida. Oleme loonud tugeva aluse, kuid võite siiski lisada palju funktsioone. Hakka häkkima!

Lukas Ruebbelke on tehnoloogiaentusiast ja on kaasautor AnglesJS in Action for Mananning Publications jaoks. Tema lemmik asi on saada uutest tehnoloogiatest sama põnevil inimesi kui ta ise. Ta juhib Phoenixi veebirakenduste kasutajagruppi ja on koos oma kuritegevuse partneritega korraldanud mitu häkatoni.

Meeldis see? Loe neid!

• Kuidas teha rakendust
• Meie lemmikveebifondid - ja need ei maksa sentigi
• Vaadake, mis on liitreaalsuse järgmine
• Laadige alla tasuta tekstuurid: kõrge eraldusvõimega ja kohe kasutamiseks valmis