AngularJS samstarf borð við Socket.io

Efni.

• 01. Miðlarinn
• 02. Ber beinin
• 03. Lýstu yfir ósjálfstæði þínu
• 04. Wire upp Socket.io
• 05. Ræstu vélina þína!
• 06. Nokkrar hreinskilnar hugsanir áður en haldið er áfram
• 07. Skjólstæðingurinn
• 08. Ber beinin
• 09. Að búa til límbréf
• 10. Birtir límbréfin
• 11. Að eyða límmiða
• 12. Uppfærsla límbréfs
• 13. Að flytja límdós
• 14. Bónusinn
• 15. Niðurstaða
• Líkaði þetta? Lestu þessar!

• Þekkingar þörf: Millistig JavaScript
• Krefst: Node.js, NPM
• Verkefnatími: 2 klukkutímar

AngularJS hentar sérstaklega vel til að búa til rík forrit viðskiptavinar í vafranum og þegar þú bætir smá Socket.io við blönduna verða hlutirnir virkilega áhugaverðir. Í þessari grein ætlum við að byggja upp rauntímaborð sem notar AngularJS fyrir forrit viðskiptavinarins og Socket.io til að deila ástandi milli allra tengdra viðskiptavina.

Við skulum fjalla um smá þrif áður en við byrjum. Ég ætla að gera ráð fyrir að þú hafir grundvallar tök á HTML og JavaScript þar sem ég ætla ekki að fjalla um öll litlu horn kóðans. Til dæmis ætla ég ekki að kalla fram CSS og JavaScript skrárnar sem ég hef sett inn í hausinn á HTML skjalinu þar sem engar nýjar upplýsingar eru til staðar.

Einnig hvet ég þig til að grípa kóðann af GitHub reikningnum mínum til að fylgja með. Góður vinur minn Brian Ford er einnig með frábært Socket.io fræ sem ég byggði nokkrar af upprunalegu hugmyndunum mínum á.

Fjórir meginþættirnir sem við viljum hafa í samstarfsborðinu er hæfileikinn til að búa til minnismiða, lesa minnismiða, uppfæra minnismiða, eyða minnismiða og til gamans, færa minnismiða á spjaldið. Já, það er rétt, við erum að einbeita okkur að venjulegum CRUD eiginleikum. Ég trúi því að með því að einbeita okkur að þessum grundvallaratriðum höfum við farið yfir nægjanlegan kóða til að mynstur geti komið fram svo að þú getir tekið þau og beitt þeim annars staðar.

01. Miðlarinn

Við ætlum fyrst að byrja með Node.js netþjóninn þar sem hann mun þjóna sem grunnurinn sem við ætlum að byggja allt annað á.

Við ætlum að byggja upp Node.js netþjón með Express og Socket.io. Ástæðan fyrir því að við notum Express er sú að það býður upp á fínan búnað til að setja upp truflana eignamiðlara innan Node.js. Express kemur með fullt af virkilega frábæru eiginleikum, en í þessu tilfelli ætlum við að nota það til að tvískipta forritinu á hreint milli netþjónsins og viðskiptavinarins.

(Ég starfa undir þeirri forsendu að þú sért með Node.js og NPM uppsett. Fljótleg Google leit mun sýna þér hvernig á að setja þau upp ef þú gerir það ekki.)

02. Ber beinin

Þannig að til að byggja upp bein miðlarans verðum við að gera nokkra hluti til að koma í gang.

// app.js

// A.1
var tjá = krefjast (’tjá’),
app = tjá ();
netþjónn = krefjast (‘http’). createServer (app),
io = þarfnast (‘socket.io’). hlustaðu (netþjónn);

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

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

A.1 Við erum að lýsa yfir og koma í staðinn fyrir Node.js einingar okkar svo að við getum notað þær í forritinu. Við erum að lýsa yfir Express, stofna Express og búa síðan til HTTP netþjóna og senda Express dæmið inn í það. Og þaðan erum við að koma Socket.io í gang og segja því að fylgjast með netþjónadæminu okkar.

A.2 Við erum þá að segja Express forritinu okkar að nota almenna skráasafnið okkar til að þjóna skrám frá.

A.3 Við setjum netþjóninn í gang og segjum honum að hlusta á höfn 1337.

Hingað til hefur það verið sársaukalaust og fljótt. Ég tel að við séum innan við 10 línur í kóðanum og þegar höfum við hagnýtan Node.js netþjóni. Áfram!

03. Lýstu yfir ósjálfstæði þínu

// pakkar.json
{
"name": "hyrndur-collab-borð",
"lýsing": "AngularJS samstarfsnefnd",
"útgáfa": "0.0.1-1",
„einka“: satt,
„ósjálfstæði“: {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Einn flottasti eiginleiki NPM er hæfileikinn til að lýsa yfir ósjálfstæði þínu í a pakkar.json skrá og setja þá sjálfkrafa upp í gegnum npm setja upp á stjórnlínunni.

04. Wire upp Socket.io

Við höfum þegar skilgreint kjarnaeiginleika sem við viljum í forritinu og því þurfum við að setja upp Socket.io viðburðarhlustendur og viðeigandi lokun til að takast á við atburðinn fyrir hverja aðgerð.

Í kóðanum hér að neðan muntu taka eftir því að það er í raun stilling hlustenda á viðburði og uppköllun. Fyrsti atburðurinn er Tenging atburði, sem við notum til að vírbúa aðra atburði okkar í lokuninni.

io.sockets.on (’tenging’, virka (fals) {
socket.on (‘createNote’, virka (gögn) {
socket.broadcast.emit (‘onNoteCreated’, gögn);
});

socket.on (‘updateNote’, virka (gögn) {
socket.broadcast.emit (‘onNoteUpdated’, gögn);
});

socket.on (‘deleteNote’, virka (gögn) {
socket.broadcast.emit (‘onNoteDeleted’, gögn);
});

socket.on (‘moveNote’, virka (gögn) {
socket.broadcast.emit (‘onNoteMoved’, gögn);
});
});

Héðan bætum við hlustendum við createNote, updateNote, deleteNote og færa Athugaðu. Og í svarhringingaraðgerðinni erum við einfaldlega að senda út hvaða atburður gerðist svo hægt sé að tilkynna öllum viðskiptavinum sem hlusta á að atburðurinn hafi gerst.

Það eru nokkur atriði sem vert er að benda á varðandi afturköllunaraðgerðir í einstökum viðburðaraðilum. Ein, ef þú vilt senda viðburð til allra annarra en viðskiptavinarins sem sendi frá sér atburðinn útsendingu fyrir gefa frá sér virka símtal. Í öðru lagi erum við einfaldlega að miðla álagi viðburðarins til áhugasamra aðila svo að þeir geti unnið úr því eins og þeim sýnist.

05. Ræstu vélina þína!

Nú þegar við höfum skilgreint ósjálfstæði okkar og sett upp Node.js forritið okkar með Express og Socket.io valdi, er það alveg einfalt að frumstilla Node.js netþjóninn.

Fyrst seturðu upp Node.js ósjálfstæði þitt eins og svo:

npm setja upp

Og þá byrjarðu netþjóninn svona:

hnút app.js

Og svo! Þú ferð á þetta heimilisfang í vafranum þínum. Bam!

06. Nokkrar hreinskilnar hugsanir áður en haldið er áfram

Ég er fyrst og fremst forritara og var upphaflega svolítið hræddur við að tengja Node.js netþjóninn við forritið mitt. AngularJS hlutinn var snöggur en JavaScript netþjónn? Biðrið hrollvekjandi tónlistina í biðröð frá hryllingsmynd.

En ég var alveg með gólfefni til að uppgötva að ég gæti sett upp kyrrstæðan vefþjón í örfáum línum af kóða og í nokkrum línum í viðbót notað Socket.io til að takast á við alla atburði milli vafra. Og það var samt bara JavaScript! Til að vera tímabær þá erum við aðeins að fjalla um nokkra eiginleika, en ég vona að í lok greinarinnar sjáið þið að það er auðvelt að synda - og djúpur endir laugarinnar er ekki svo skelfilegur.

07. Skjólstæðingurinn

Nú þegar við erum með traustan grunn á sínum stað með netþjóninn skulum við fara yfir í uppáhalds hlutann minn - viðskiptavininn! Við ætlum að nota AngularJS, jQueryUI fyrir dráttarhlutann og Twitter Bootstrap fyrir stílgrunn.

08. Ber beinin

Sem persónulegt val, þegar ég byrja á nýju AngularJS forriti, þá vil ég fljótt skilgreina lágmarks lágmark sem ég veit að ég þarf til að byrja og byrja svo að endurtekja það eins fljótt og auðið er.

Hvert AngularJS forrit þarf að ræsa með að minnsta kosti einum stjórnanda til staðar og svo er þetta almennt þar sem ég byrja alltaf.

Til að ræsa forritið sjálfkrafa þarftu einfaldlega að bæta við ng-app að HTML hnútnum sem þú vilt að forritið búi í. Oftast verður það ásættanlegt að bæta því við HTML merkið. Ég hef einnig bætt við eiginleika við ng-app að segja því að ég vil nota app mát, sem ég mun skilgreina á örskotsstundu.

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

Ég veit að ég mun þurfa að minnsta kosti einn stjórnandi og þess vegna mun ég kalla það fram með því að nota ng-stjórnandi og úthluta því eign MainCtrl.

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

Svo nú erum við í króknum fyrir eininguna sem heitir app og stjórnandi nefndur MainCtrl. Við skulum halda áfram og búa þau til núna.

Að búa til einingu er nokkuð einfalt. Þú skilgreinir það með því að hringja hyrndur.módel og gefa því nafn. Til framtíðar tilvísunar er önnur breytan í tómu fylki þar sem þú getur sprautað undirþætti til notkunar í forritinu. Það er utan gildissviðs þessarar kennslu, en er vel þegar umsókn þín byrjar að vaxa í flækjum og þörfum.

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

Við ætlum að lýsa yfir nokkrum tómum staðhöfum í app eining sem byrjar á MainCtrl hér að neðan.Við munum fylla þetta allt saman seinna en ég vildi lýsa grunnbyggingunni frá upphafi.

app.controller (‘MainCtrl’, aðgerð ($ scope) {});

Við ætlum líka að vefja Socket.io virkni í a innstunga þjónustu þannig að við getum hylkið þann hlut og ekki látið hann fljóta um á alheimsheitasvæðinu.

app.factory (‘fals’, virka ($ rootScope) {});

Og á meðan við erum í því ætlum við að lýsa yfir tilskipun kölluð minnismiði sem við ætlum að nota til að hylja virkni límmiða í.

app.directive (‘stickyNote’, virka (fals) {});

Við skulum því fara yfir það sem við höfum gert hingað til. Við höfum ræst forritið með því að nota ng-app og lýsti yfir umsjónarmanni okkar í HTML. Við höfum einnig skilgreint forritseininguna og búið til MainCtrl stjórnandi, sem innstunga þjónusta og minnismiði tilskipun.

09. Að búa til límbréf

Nú þegar beinagrind AngularJS forritsins er til staðar munum við byrja að byggja upp sköpunaraðgerðina.

app.controller (‘MainCtrl’, aðgerð ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// Komandi
socket.on (‘onNoteCreated’, virka (gögn) {// B.3
$ scope.notes.push (gögn);
});

// fráfarandi
$ scope.createNote = fall () {// B.4
var athugasemd = {
id: nýr dagsetning (). getTime (),
titill: ‘New Note’,
meginmál: „Í bið“
};

$ scope.notes.push (ath.);
socket.emit (‘createNote’, athugasemd);
};

B.1 AngularJS er með innspýtingareiginleika sem er innbyggður í það svo við sprautum a $ umfang hlut og innstunga þjónusta. The $ umfang hlutur þjónar sem ViewModel og er í grundvallaratriðum JavaScript-hlutur með nokkrum atburðum bakaðri í það til að gera tvíhliða gagnasöfnun kleift.

B.2 Við erum að lýsa yfir fylkinu sem við munum nota til að binda útsýnið við.

B.3 Við erum að bæta við hlustanda fyrir onNoteCreated atburður á innstunga þjónustu og ýta atburðarásinni inn í $ scope.notes fylki.

B.4 Við höfum lýst yfir a createNote aðferð sem skapar sjálfgefið ath mótmæla og ýta því inn í $ scope.notes fylki. Það notar einnig innstunga þjónusta til að gefa frá sér createNote atburði og standast ný athugasemd mótmæla með.

Svo nú þegar við höfum aðferð til að búa til nótuna, hvernig köllum við hana? Það er góð spurning! Í HTML skránni bætum við innbyggðri AngularJS tilskipun ng-smelltu við hnappinn og bættu síðan við createNote aðferðarkall sem eigindagildi.

hnappur id = "createButton" ng-smellur = "createNote ()"> Búa til minnismiða / hnapp>

Tími til að fara hratt yfir það sem við höfum gert hingað til. Við höfum bætt fylki við $ umfang hlut í MainCtrl það mun geyma allar athugasemdir fyrir umsóknina. Við höfum líka bætt við a createNote aðferð á $ umfang mótmæla því að búa til nýja staðnótu og senda þá athugasemd til annarra viðskiptavina í gegnum innstunga þjónusta. Við höfum einnig bætt við viðburðarhlustanda í innstunga þjónustu svo við getum vitað hvenær aðrir viðskiptavinir hafa búið til athugasemd svo við getum bætt henni í safnið okkar.

10. Birtir límbréfin

Við höfum nú getu til að búa til glósuhlut og deila honum á milli vafra en hvernig birtum við hann í raun? Þetta er þar sem tilskipanir koma inn.

Tilskipanir og flækjur þeirra er mikið viðfangsefni, en stutta útgáfan er sú að þær veita leið til að lengja þætti og eiginleika með sérsniðnum virkni. Tilskipanir eru auðveldlega uppáhalds hluti minn um AngularJS vegna þess að það gerir þér í raun kleift að búa til heilt DSL (Domain Specific Language) í kringum forritið þitt í HTML.

Það er eðlilegt að þar sem við ætlum að búa til minnispunkta fyrir samstarfsborðið okkar þá ættum við að búa til a minnismiði tilskipun. Tilskipanir eru skilgreindar með því að kalla tilskipunaraðferðina í einingu sem þú vilt lýsa yfir og senda nafn og aðgerð sem skilar tilskipunarskilgreiningarhlut. Tilskipunarskilgreiningarhluturinn hefur marga mögulega eiginleika sem þú getur skilgreint á honum, en við ætlum að nota örfáa í okkar tilgangi hér.

Ég mæli með að þú skoðir AngularJS skjölin til að sjá alla lista yfir eiginleika sem þú getur skilgreint á skilgreiningarhlutnum.

app.directive (‘stickyNote’, virka (fals) {
var linker = virka (umfang, þáttur, attrs) {};

var stjórnandi = aðgerð ($ umfang) {};

skila {
takmarka: ‘A’, // C.1
hlekkur: hlekkur, // C.2
stjórnandi: stjórnandi, // C.3
umfang: {// C.4
athugið: ’=’,
ondelete: ’&’
}
};
});

C.1 Þú getur takmarkað tilskipun þína við ákveðna tegund af HTML frumefni. Tvær algengustu eru frumefni eða eiginleiki sem þú lýsir yfir að sé notað E og A hver um sig. Þú getur líka takmarkað það við CSS bekk eða athugasemd, en þetta er ekki eins algengt.

C.2 Hlekkuraðgerðin er þar sem þú setur allan DOM meðferðarkóða þinn. Það eru nokkrar undantekningar sem ég hef fundið, en þetta er alltaf rétt (að minnsta kosti 99 prósent af tímanum). Þetta er grundvallarregla AngularJS og þess vegna hef ég lagt áherslu á það.

C.3 Stýringaraðgerðin virkar alveg eins og aðalstýringin sem við skilgreindum fyrir forritið en $ umfang hlutur sem við erum að senda inn er sérstakur fyrir DOM-þáttinn sem tilskipunin lifir á.

C.4 AngularJS hefur hugtakið einangrað umfang, sem gerir þér kleift að skilgreina sérstaklega hvernig umfang tilskipunar hefur samskipti við umheiminn. Ef við hefðum ekki lýst yfir gildissviði hefði tilskipunin óbeint erft frá foreldraumfanginu með foreldra-barn sambandi. Í mörgum tilvikum er þetta ekki ákjósanlegt. Með því að einangra svigrúmið mildum við líkurnar á því að umheimurinn geti haft óviljandi og slæm áhrif á stöðu tilskipunar þinnar.

Ég hef lýst tvíhliða gagnabindingum við ath með = tákn og tjáning sem bindur við ondelete með & tákn. Vinsamlegast lestu AngularJS skjölin til að fá fulla skýringu á einangruðu umfangi þar sem það er eitt flóknara viðfangsefni rammans.

Svo við skulum í raun bæta við minnismiða við DOM.

Eins og allir góðir rammar kemur AngularJS með frábæra eiginleika strax úr kassanum. Einn handlagni eiginleikinn er ng-endurtaka. Þessi AngularJS tilskipun gerir þér kleift að senda inn fjölda af hlutum og það afritar hvaða merki sem það er á eins oft og það eru hlutir í fylkinu. Í neðangreindu tilfelli erum við að endurtekna yfir skýringar fylki og afrit af div frumefni og börn þess að lengd skýringar fylki.

div sticky-note ng-repeat = "athugasemd í athugasemdum" athugasemd = "athugasemd" ondelete = "deleteNote (id)">
hnappategund = "hnappur" ng-smellur = "deleteNote (note.id)"> × / hnappur>
inntak ng-model = "note.title" ng-change = "updateNote (athugasemd)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (athugasemd)"
> {{note.body}} / textarea>
/ div>

Fegurðin í ng-endurtaka er að það er bundið við hvaða fylki sem þú sendir inn og þegar þú bætir hlut við fylkið mun DOM þátturinn þinn sjálfkrafa uppfæra. Þú getur tekið þetta skrefi lengra og endurtekið ekki aðeins venjulega DOM þætti heldur aðrar sérsniðnar tilskipanir líka. Þess vegna sérðu minnismiði sem eiginleiki á frumefnið.

Það eru tveir aðrir bitar af sérsniðnum kóða sem þarf að skýra. Við höfum einangrað svigrúmið á límbréf tilskipun um tvær eignir. Sá fyrsti er bindandi skilgreint einangrað umfang á ath eign. Þetta þýðir að alltaf þegar glósuhluturinn breytist í foreldraumfanginu mun hann sjálfkrafa uppfæra samsvarandi glósuhlut í tilskipuninni og öfugt. Annað skilgreint einangrað umfang er á ondelete eiginleiki. Hvað þetta þýðir er að hvenær ondelete er kallað í tilskipuninni, kallar það hvaða orð sem er í ondelete eiginleiki um DOM-þáttinn sem kveikir á tilskipuninni.

Þegar tilskipun er sett fram er henni bætt við DOM og tengilaðgerðin er kölluð. Þetta er fullkomið tækifæri til að setja sjálfgefna DOM eiginleika fyrir frumefnið. Elementfæribreytan sem við erum að senda inn er í raun jQuery hlutur og svo við getum framkvæmt jQuery aðgerðir á honum.

(AngularJS kemur reyndar með undirmengi af jQuery innbyggt í það en ef þú hefur þegar látið fylgja með alla útgáfuna af jQuery mun AngularJS fresta því.)

app.directive (‘stickyNote’, virka (fals) {
var linker = fall (umfang, þáttur, attrs) {
// Einhver DOM upphaf til að gera það gott
element.css (‘vinstri’, ‘10px’);
element.css (‘toppur’, ‘50px’);
element.hide (). fadeIn ();
};
});

Í kóðanum hér að ofan erum við einfaldlega að staðsetja stafabréfið á sviðinu og dofna það inn.

11. Að eyða límmiða

Svo nú þegar við getum bætt við og sýnt seðla er kominn tími til að eyða seðlum. Sköpun og eyðing límmiða er spurning um að bæta við og eyða hlutum úr fylkinu sem glósurnar eru bundnar af. Þetta er á ábyrgð foreldra sviðsins til að viðhalda því fylki og þess vegna erum við upprunnin að eyða beiðninni innan tilskipunarinnar, en láta foreldra sviðið vinna raunverulegar þungar lyftingar.

Þetta er ástæðan fyrir því að við gengum í gegnum öll vandræði við að búa til tjáningarskilgreint einangrað svigrúm tilskipunarinnar: svo tilskipunin gæti tekið á móti eyðingaratburðinum innbyrðis og komið því áfram til foreldris síns til úrvinnslu.

Takið eftir HTML innan tilskipunarinnar.

hnappategund = "hnappur" ng-smellur = "deleteNote (note.id)"> × / hnappur>

Það næsta sem ég ætla að segja kann að virðast langur vegur en mundu að við erum á sömu hlið og það verður skynsamlegt eftir að ég útlista málið. Þegar smellt er á hnappinn efst í hægra horninu á seðlinum hringjum við deleteNote á stjórnanda tilskipunarinnar og brottför í ath.id gildi. Stjórnandinn hringir síðan eyða, sem framkvæmir síðan hvaða tjáningu sem við tengdum við. Svo langt svo gott? Við erum að hringja í staðbundna aðferð á stjórnandanum sem síðan afhendir það með því að kalla hvaða tjáningu sem var skilgreind í einangruðu umfangi. Tjáningin sem kallast á foreldrið kallast bara deleteNote einnig.

app.directive (‘stickyNote’, virka (fals) {
var stjórnandi = aðgerð ($ umfang) {
$ scope.deleteNote = aðgerð (id) {
$ scope.ondelete ({
ég gerði
});
};
};

skila {
takmarka: ‘A’,
hlekkur: hlekkur,
stjórnandi: stjórnandi,
umfang: {
athugið: ’=’,
ondelete: ’&’
}
};
});

(Þegar þú notar tjáningarskilgreint einangrað umfang eru breytur sendar á hlutakort.)

Í foreldraumfanginu, deleteNote hringir og gerir nokkuð staðlaða eyðingu með því að nota hyrndur. fyrir hvern gagnsemi virka til að endurtekna yfir glósufylkið. Þegar aðgerðin hefur sinnt staðbundnum viðskiptum heldur hún áfram og gefur frá sér atburðinn fyrir restina af heiminum til að bregðast við í samræmi við það.

app.controller (‘MainCtrl’, aðgerð ($ scope, socket) {
$ scope.notes = [];

// Komandi
socket.on (‘onNoteDeleted’, virka (gögn) {
$ scope.deleteNote (data.id);
});

// fráfarandi
$ scope.deleteNote = aðgerð (id) {
var oldNotes = $ scope.notes,
newNotes = [];

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

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

12. Uppfærsla límbréfs

Við erum að ná frábærum framförum! Núna vona ég að þú sért farinn að sjá nokkur mynstur koma upp úr þessari hringiðu sem við erum að fara í. Næsta atriði á listanum er uppfærsluaðgerðin.

Við ætlum að byrja á raunverulegum DOM þáttum og fylgja því eftir alla leið á netþjóninn og aftur niður til viðskiptavinarins. Fyrst verðum við að vita hvenær verið er að breyta titli eða meginmáli seðilsins. AngularJS meðhöndlar formþætti sem hluta af gagnalíkaninu svo þú getir tengt tvíhliða gagnabindingu á svipstundu. Notaðu til að gera þetta ng-fyrirmynd tilskipun og setja í eignina sem þú vilt binda við. Í þessu tilfelli ætlum við að nota ath. titill og ath. líkami hver um sig.

Þegar annar hvor þessara eiginleika breytist viljum við ná þeim upplýsingum til að miðla. Við náum þessu með ng-breyting tilskipun og notaðu hana til að hringja updateNote og sendu inn seðilhlutinn sjálfan. AngularJS gerir mjög snjallt óhreint eftirlit til að greina hvort gildi hvað sem er ng-fyrirmynd hefur breyst og framkvæmir síðan tjáninguna sem er í ng-breyting.

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

The hæðir af því að nota ng-breyting er að staðbundin umbreyting hefur þegar gerst og við berum bara ábyrgð á að koma skilaboðunum áfram. Í stjórnandanum, updateNote er kallað og þaðan ætlum við að gefa frá okkur updateNote atburður fyrir netþjóninn okkar til að senda út til annarra viðskiptavina.

app.directive (‘stickyNote’, virka (fals) {
var stjórnandi = aðgerð ($ umfang) {
$ scope.updateNote = aðgerð (athugasemd) {
socket.emit (‘updateNote’, athugasemd);
};
};
});

Og í tilskipunarstjóranum erum við að hlusta eftir onNoteUpdated atburður til að vita hvenær athugasemd frá öðrum viðskiptavini hefur verið uppfærð svo við getum uppfært staðbundnu útgáfuna okkar.

var stjórnandi = aðgerð ($ umfang) {
// Komandi
socket.on (‘onNoteUpdated’, virka (gögn) {
// Uppfæra ef sama athugasemd
ef (data.id == $ scope.note.id) {

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

13. Að flytja límdós

Á þessum tímapunkti höfum við í grundvallaratriðum tekið hring í kringum CRUD barnapottinn og lífið er gott! Bara í þágu stofustikks til að vekja hrifningu af vinum þínum, ætlum við að bæta við getu til að færa glósur um skjáinn og uppfæra hnit í rauntíma. Ekki örvænta - það eru bara nokkrar línur af kóða. Öll þessi mikla vinna á eftir að skila sér. Ég lofa!

Við höfum boðið sérstökum gesti, jQueryUI, til veislunnar og gerðum þetta allt fyrir dráttarvélarnar. Að bæta við getu til að draga minnismiða á staðnum tekur aðeins eina línu af kóða. Ef þú bætir við element.draggable (); í krækjuaðgerðina þína muntu byrja að heyra ‘Eye of the Tiger’ eftir Survivor því þú getur nú dregið minnispunktana þína um.

Við viljum vita hvenær dregið hefur verið úr stöðunni og náðu nýju hnitunum til að fara framhjá. jQueryUI var smíðað af mjög snjöllu fólki, þannig að þegar dregið er að hætta þarftu einfaldlega að skilgreina afturhvarf aðgerð fyrir stöðvunaratburðinn. Við grípum í ath.id utan umfangs hlutar og vinstri og efstu CSS gildi frá ui mótmæla. Með þeirri þekkingu gerum við það sem við höfum verið að gera allan tímann: losaðu!

app.directive (‘stickyNote’, virka (fals) {
var linker = fall (umfang, þáttur, attrs) {
element.draggable ({
stöðva: virka (atburður, ui) {
socket.emit (‘moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (‘onNoteMoved’, virka (gögn) {
// Uppfæra ef sama athugasemd
ef (data.id == scope.note.id) {
element.animate ({
vinstri: data.x,
efst: data.y
});
}
});
};
});

Á þessum tímapunkti ætti það ekki að koma á óvart að við erum líka að hlusta eftir atburði tengdum flutningi frá falsþjónustunni. Í þessu tilfelli er það onNoteMoved atburði og ef athugasemdin er samsvörun þá uppfærum við vinstri og efstu CSS eiginleika. Bam! Gjört!

14. Bónusinn

Þetta er bónushluti sem ég myndi ekki taka með ef ég væri ekki alveg viss um að þú gætir náð því á innan við 10 mínútum. Við ætlum að nota lifandi netþjón (ég er enn undrandi á því hversu auðvelt það er að gera).

Í fyrsta lagi þarftu að fara að skrá þig í ókeypis prufu á Nodejitsu. Réttarhöldin eru ókeypis í 30 daga, sem er fullkomið til að bleyta fæturna.

Þegar þú hefur búið til reikninginn þinn þarftu að setja upp jitsu pakkann, sem þú getur gert frá skipanalínunni í gegnum $ npm setja upp jitsu -g.

Þá þarftu að skrá þig inn frá skipanalínunni um $ jitsu innskráning og sláðu inn heimildir þínar.

Gakktu úr skugga um að þú sért í forritinu þínu beint, sláðu inn $ jitsu dreifa og stíga í gegnum spurningarnar. Ég læt venjulega eins mikið í vanskilum og mögulegt er, sem þýðir að ég gef umsókn minni nafn en ekki undirlén o.s.frv.

Og, kæru vinir mínir, það er allt til í því! Þú færð slóðina að forritinu frá framleiðslu netþjónsins þegar það hefur verið dreift og það er tilbúið til notkunar.

15. Niðurstaða

Við höfum fjallað um mikið af AngularJS jörðu í þessari grein og ég vona að þú hafir haft mjög gaman af því. Mér finnst það mjög sniðugt hvað þú getur áorkað með AngularJS og Socket.io í um það bil 200 línum af kóða.

Það voru nokkur atriði sem ég fjallaði ekki um í því skyni að einbeita mér að aðalatriðunum, en ég hvet þig til að draga upptökuna og leika þér að forritinu. Við höfum byggt upp sterkan grunn en það eru samt margir möguleikar sem þú gætir bætt við. Fáðu þér tölvusnápur!

Lukas Ruebbelke er áhugamaður um tækni og er meðhöfundur AngularJS in Action for Manning Publications. Uppáhalds hlutur hans að gera er að fá fólk eins spennt fyrir nýrri tækni og hann. Hann stýrir notendahópi Phoenix vefforrita og hefur hýst marga hakkathons með félögum sínum í glæpum.

Líkaði þetta? Lestu þessar!

• Hvernig á að búa til app
• Uppáhalds vefritin okkar - og þau kosta ekki krónu
• Uppgötvaðu hvað er næst fyrir aukinn veruleika
• Sæktu ókeypis áferð: háupplausn og tilbúin til notkunar núna