Bord comhoibrithe AngularJS le Socket.io

Ábhar

• 01. An freastalaí
• 02. Na cnámha lom
• 03. Dearbhaigh do spleáchais
• 04. Socket suas Socket.io
• 05. Tosaigh do innill!
• 06. Cúpla smaoineamh candid sula dtéann tú ar aghaidh
• 07. An cliant
• 08. Na cnámha lom
• 09. Nóta greamaitheach a chruthú
• 10. Ag taispeáint na nótaí greamaitheacha
• 11. Ag scriosadh nóta greamaitheach
• 12. Nóta greamaitheach a nuashonrú
• 13. Nóta greamaitheach a bhogadh
• 14. An bónas
• 15. Conclúid
• Thaitin seo leis? Léigh iad seo!

• Eolas de dhíth: JavaScript idirmheánach
• Riachtanais: Node.js, NPM
• Am Tionscadail: 2 uair an chloig

Tá AngularJS an-oiriúnach chun feidhmchláir shaibhir taobh cliaint a chruthú sa bhrabhsálaí agus, nuair a chuireann tú beagán Socket.io isteach sa mheascán, éiríonn rudaí an-spéisiúil. San Airteagal seo, táimid chun bord comhoibrithe fíor-ama a thógáil a úsáideann AngularJS don fheidhmchlár taobh cliaint agus Socket.io chun an stát a roinnt idir na cliaint ceangailte go léir.

Lig dúinn beagán de choinneáil tí a chlúdach sula dtosóimid. Táim chun glacadh leis go bhfuil tuiscint bhunúsach agat ar HTML agus JavaScript mar nílim chun gach cúinne beag den chód a chlúdach. Mar shampla, nílim chun na comhaid CSS agus JavaScript atá curtha isteach agam i gceann an chomhaid HTML a ghlaoch amach mar níl aon fhaisnéis nua ann.

Chomh maith leis sin, molaim duit greim a fháil ar an gcód ó mo chuntas GitHub le leanúint. Tá síol Socket.io den scoth ag mo chara maith Brian Ford freisin, ar bhunaigh mé cuid de mo smaointe bunaidh air.

Is iad na ceithre phríomhghné atá uainn sa bhord comhoibrithe ná an cumas nóta a chruthú, na nótaí a léamh, nóta a nuashonrú, nóta a scriosadh agus, le haghaidh spraoi, nóta a bhogadh ar an gclár. Sea, tá sin ceart, táimid ag díriú ar ghnéithe caighdeánacha CRUD. Creidim, trí dhíriú ar na gnéithe bunúsacha seo, go mbeidh go leor cód clúdaithe againn chun go dtiocfaidh patrúin chun cinn ionas gur féidir leat iad a thógáil agus iad a chur i bhfeidhm in áiteanna eile.

01. An freastalaí

Beimid ag tosú leis an bhfreastalaí Node.js ar dtús ós rud é go mbeidh sé mar bhunús againn chun gach rud eile a thógáil air.

Beimid ag tógáil freastalaí Node.js le Express agus Socket.io. Is é an chúis atá á úsáid againn le Express ná go soláthraíonn sé meicníocht deas chun freastalaí sócmhainní statacha a bhunú laistigh de Node.js. Tá cnuasach gnéithe fíor-uamhnach ag Express ach, sa chás seo, táimid chun é a úsáid chun an feidhmchlár a dháileadh go glan idir an freastalaí agus an cliant.

(Táim ag feidhmiú faoin toimhde go bhfuil Node.js agus NPM suiteáilte agat. Taispeánfaidh cuardach tapa Google duit conas iad seo a shuiteáil mura bhfuil tú.)

02. Na cnámha lom

Mar sin chun cnámha lom an fhreastalaí a thógáil, caithfimid cúpla rud a dhéanamh chun dul i mbun oibre.

// app.js

// A.1
var express = a cheangal (‘express’),
aip = sainráite ();
freastalaí = éilíonn (‘http’). createServer (app),
io = a cheangal (‘socket.io’). éist (freastalaí);

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

// A.3
freastalaí.listen (1337);

A.1 Táimid ag dearbhú agus ag cur ár modúil Node.js ar an toirt ionas gur féidir linn iad a úsáid inár bhfeidhmchlár. Táimid ag dearbhú Express, ag cur Express ar an toirt agus ansin ag cruthú freastalaí HTTP agus ag cur an sampla Express isteach ann. Agus as sin táimid ag cur Socket.io ar an toirt agus ag rá leis súil a choinneáil ar ár bhfreastalaí mar shampla.

A.2 Táimid ag rá ansin lenár n-aip Express ár n-eolaire poiblí a úsáid chun comhaid a sheirbheáil.

A.3 Cuirimid tús leis an bhfreastalaí agus deirimid leis éisteacht ar an gcalafort 1337.

Go dtí seo bhí go leor gan phian agus gasta. Creidim go bhfuil muid níos lú ná 10 líne sa chód agus cheana féin tá freastalaí feidhmiúil Node.js. Ar aghaidh!

03. Dearbhaigh do spleáchais

// pacáistí.json
{
"name": "angular-coope-board",
"description": "Bord Comhoibrithe AngularJS",
"leagan": "0.0.1-1",
"príobháideach": fíor,
"spleáchais": {
"sainráite": "3.x",
"socket.io": "0.9.x"
}
}

Ceann de na gnéithe is deise de NPM is ea an cumas do spleáchais a dhearbhú in a pacáistí.json comhad agus ansin iad a shuiteáil go huathoibríoch trí npm shuiteáil ar an líne ordaithe.

04. Socket suas Socket.io

Tá na croíghnéithe atá uainn san iarratas sainithe againn cheana féin agus mar sin caithfimid éisteoirí imeachta Socket.io a chur ar bun agus dúnadh iomchuí chun an ócáid ​​a láimhseáil do gach oibríocht.

Sa chód thíos tabharfaidh tú faoi deara gur cumraíocht éisteoirí imeachta agus aisghlaonna atá ann go bunúsach. Is é an chéad imeacht an nasc imeacht, a úsáidimid chun ár n-imeachtaí eile a dhúnadh suas.

io.sockets.on (‘nasc’, feidhm (soicéad) {
socket.on (‘createNote’, feidhm (sonraí) {
socket.broadcast.emit (‘onNoteCreated’, sonraí);
});

socket.on (‘updateNote’, feidhm (sonraí) {
socket.broadcast.emit (‘onNoteUpdated’, sonraí);
});

socket.on (‘deleteNote’, feidhm (sonraí) {
socket.broadcast.emit (‘onNoteDeleted’, sonraí);
});

socket.on (‘moveNote’, feidhm (sonraí) {
socket.broadcast.emit (‘onNoteMoved’, sonraí);
});
});

Ón áit seo cuirimid éisteoirí leis createNote, updateNote, deleteNote agus moveNote. Agus san fheidhm aisghlao, nílimid ag craoladh ach an teagmhas a tharla ionas gur féidir a chur in iúl d'aon chliant a d'éist gur tharla an teagmhas.

Tá cúpla rud is fiú a lua faoi na feidhmeanna aisghlao sna láimhseálaithe imeachtaí aonair. Ceann amháin, más mian leat imeacht a sheoladh chuig gach duine eile ach an cliant a astaíonn an ócáid ​​a chuireann tú isteach craoladh roimh an astaíonn glao feidhm. Ar an dara dul síos, nílimid ach ag íoc ualach pá na hócáide chuig na páirtithe leasmhara ionas gur féidir leo é a phróiseáil mar is cuí leo.

05. Tosaigh do innill!

Anois go bhfuil ár spleáchais sainithe againn agus ár bhfeidhmchlár Node.js curtha ar bun againn le cumhachtaí Express agus Socket.io, tá sé simplí go leor an freastalaí Node.js a thionscnamh.

Ar dtús suiteálann tú do spleáchais Node.js mar sin:

npm shuiteáil

Agus ansin tosaíonn tú an freastalaí mar seo:

app app.js.

Agus ansin! Téann tú chuig an seoladh seo i do bhrabhsálaí. Bam!

06. Cúpla smaoineamh candid sula dtéann tú ar aghaidh

Is forbróir frontend mé go príomha agus bhí mé beagáinín imeaglaithe ar dtús le freastalaí Node.js a cheangal le m'iarratas. Léim a bhí sa chuid AngularJS ach taobh an fhreastalaí JavaScript? Scuaine an ceol creepy ó flick uafáis.

Ach, bhí mé ar snámh go hiomlán chun a fháil amach go bhféadfainn freastalaí gréasáin statach a chur ar bun i díreach cúpla líne de chód agus i gcúpla líne eile bain úsáid as Socket.io chun na himeachtaí go léir idir na brabhsálaithe a láimhseáil. Agus ní raibh ann fós ach JavaScript! Ar mhaithe le tráthúlacht, nílimid ag clúdach ach cúpla gné, ach tá súil agam go bhfeicfidh tú faoi dheireadh an ailt go bhfuil sé éasca snámh - agus nach bhfuil deireadh domhain na linne chomh scanrúil.

07. An cliant

Anois go bhfuil an dúshraith dhaingean againn i bhfeidhm lenár bhfreastalaí, déanaimis bogadh ar aghaidh go dtí an chuid is fearr liom - an cliant! Beimid ag baint úsáide as AngularJS, jQueryUI don chuid in-tarraingthe agus Twitter Bootstrap le haghaidh bonn stíle.

08. Na cnámha lom

Mar rogha pearsanta, nuair a thosaím feidhmchlár nua AngularJS is maith liom an t-íosmhéid lom a shainiú go tapa a bhfuil a fhios agam go gcaithfidh mé tosú agus ansin tosú ag aithris air sin chomh tapa agus is féidir.

Is gá gach feidhmchlár AngularJS a thosú le rialtóir amháin ar a laghad a bheith i láthair agus mar sin is iondúil go dtosaím i gcónaí.

Chun an feidhmchlár a thosú go huathoibríoch ní mór duit a chur leis ng-app chuig an nód HTML inar mian leat go mairfeadh an feidhmchlár. An chuid is mó den am, beidh sé inghlactha go hiomlán é a chur leis an gclib HTML. Chuir mé tréith leis ng-app a rá leis gur mhaith liom an aip modúl, a shainmhíneoidh mé i díreach nóiméad.

// poiblí / index.html
html ng-app = "aip">

Tá a fhios agam go mbeidh rialtóir amháin ar a laghad ag teastáil uaim agus mar sin iarrfaidh mé air sin a úsáid rialtóir ng agus maoin de chuid MainCtrl.

body ng-rialaitheoir = "MainCtrl"> / comhlacht>

Mar sin anois táimid ar an bhfód le haghaidh modúil darb ainm aip agus rialtóir ainmnithe MainCtrl. Lig dúinn dul ar aghaidh agus iad a chruthú anois.

Tá sé éasca modúl a chruthú. Sainmhíníonn tú é trí ghlaoch modúl uilleach agus ainm a thabhairt dó. Le haghaidh tagartha sa todhchaí, is é an dara paraiméadar de eagar folamh áit ar féidir leat fo-mhodúil a instealladh le húsáid san fheidhmchlár. Tá sé lasmuigh de scóip an teagaisc seo, ach tá sé áisiúil nuair a thosaíonn d’iarratas ag fás i gcastacht agus i riachtanais.

// poiblí / js / coope.js
app var = angular.module (‘app’, []);

Táimid chun cúpla áitritheoir folamh a dhearbhú sa aip modúl ag tosú leis an MainCtrl thíos.Líonfaimid iad seo go léir níos déanaí ach theastaigh uaim an bunstruchtúr a léiriú ón tús.

app.controller (‘MainCtrl’, feidhm ($ raon feidhme) {});

Táimid chun feidhmiúlacht Socket.io a fhilleadh ar a soicéad seirbhís ionas gur féidir linn an réad sin a chuimsiú agus gan é a fhágáil ag snámh timpeall ar an spásainm domhanda.

app.factory (‘soicéad’, feidhm ($ rootScope) {});

Agus muidne ann, táimid chun treoir ar a dtugtar a dhearbhú greamaitheachNóta atá á úsáid againn chun feidhmiúlacht na nótaí greamaitheacha a chuimsiú i.

app.directive (‘stickyNote’, feidhm (soicéad) {});

Mar sin, déanaimis athbhreithniú ar a bhfuil déanta againn go dtí seo. Tá an feidhmchlár tosaithe againn ag úsáid ng-app agus dhearbhaigh muid ár rialtóir feidhmchláir sa HTML. Tá an modúl feidhmchláir sainithe againn freisin agus chruthaíomar an MainCtrl rialtóir, an soicéad seirbhís agus an greamaitheachNóta treoir.

09. Nóta greamaitheach a chruthú

Anois go bhfuil cnámharlach an fheidhmchláir AngularJS i bhfeidhm againn, tosóimid ag tógáil gné an chruthaithe amach.

app.controller (‘MainCtrl’, feidhm ($ raon feidhme, soicéad) {// B.1
$ cwmpas.notes = []; // B.2

// Isteach
socket.on (’onNoteCreated’, feidhm (sonraí) {// B.3
$ cwmpas.notes.push (sonraí);
});

// Amach
$ cwmpas.createNote = feidhm () {// B.4
var nóta = {
id: Dáta nua (). getTime (),
teideal: ‘Nóta Nua’,
comhlacht: ‘Ar feitheamh’
};

$ cwmpas.notes.push (nóta);
socket.emit (‘createNote’, nóta);
};

B.1 Tá gné insteallta spleáchais ag AngularJS agus mar sin táimid ag instealladh a $ scóip réad agus an soicéad seirbhís. Tá an $ raon feidhme feidhmíonn an réad mar ViewModel agus go bunúsach is réad JavaScript é le roinnt imeachtaí bácáilte isteach ann chun bunachar sonraí dhá bhealach a chumasú.

B.2 Táimid ag dearbhú an tsraith a úsáidfimid chun an radharc a cheangal.

B.3 Táimid ag cur éisteoir leis an onNoteCreated imeacht ar an soicéad seirbhís agus ualach pá na hócáide a bhrú isteach sa $ raon.nótaí eagar.

B.4 Tá sé dearbhaithe againn a createNote modh a chruthaíonn réamhshocrú Nóta réad agus é a bhrú isteach sa $ raon.nótaí eagar. Úsáideann sé an soicéad seirbhís chun an createNote imeacht agus pas a fháil sa nóta nua réad chomh maith.

Mar sin anois go bhfuil modh againn chun an nóta a chruthú, conas a ghlaoimid air? Is ceist mhaith í sin! Sa chomhad HTML, cuirimid an treoir AngularJS tógtha leis ng-cliceáil leis an gcnaipe agus ansin cuir an createNote glao modh mar luach na tréithe.

button id = "createButton" ng-click = "createNote ()"> Cruthaigh Nóta / cnaipe>

Am le haghaidh athbhreithniú tapa ar a bhfuil déanta againn go dtí seo. Chuireamar sraith leis an $ raon feidhme réad sa MainCtrl beidh na nótaí go léir don iarratas i seilbh. Tá a createNote modh ar an $ raon feidhme cur i gcoinne nóta áitiúil nua a chruthú agus ansin an nóta sin a chraoladh do na cliaint eile tríd an soicéad seirbhís. Chuireamar éisteoir imeachta leis an soicéad seirbhís ionas go mbeidh a fhios againn nuair a bheidh nóta cruthaithe ag cliaint eile ionas gur féidir linn é a chur lenár mbailiúchán.

10. Ag taispeáint na nótaí greamaitheacha

Tá sé de chumas againn anois réad nóta a chruthú agus é a roinnt idir brabhsálaithe ach conas a dhéanaimid é a thaispeáint i ndáiríre? Seo an áit a dtagann treoracha isteach.

Is ábhar fairsing iad treoracha agus a gcuid intricacies, ach is é an leagan gairid ná go soláthraíonn siad bealach chun eilimintí agus tréithe a leathnú le feidhmiúlacht saincheaptha. Is furasta na treoracha an chuid is fearr liom faoi AngularJS toisc go gceadaíonn sé duit DSL iomlán (Teanga Sonrach Fearainn) a chruthú timpeall d’iarratas i HTML.

Tá sé nádúrtha, ós rud é go mbeimid ag cruthú nótaí greamaitheacha dár mbord comhoibrithe, gur cheart dúinn a greamaitheachNóta treoir. Sainmhínítear treoracha tríd an modh treorach a ghlaoch ar mhodúl ar mhaith leat é a dhearbhú agus ainm agus feidhm a chur ar aghaidh a chuireann réad sainmhínithe treorach ar ais. Tá go leor airíonna féideartha ag an réad sainmhínithe treorach is féidir leat a shainiú air, ach nílimid ag úsáid ach cúpla chun ár gcuspóirí anseo.

Molaim duit seiceáil ar dhoiciméadú AngularJS chun na liostaí iomlána airíonna is féidir leat a shainiú ar an réad sainmhínithe treorach a fheiceáil.

app.directive (‘stickyNote’, feidhm (soicéad) {
var linker = feidhm (raon feidhme, eilimint, attrs) {};

var rialaitheoir = feidhm ($ raon feidhme) {};

filleadh {
srian: ‘A’, // C.1
nasc: nascóir, // C.2
rialtóir: rialaitheoir, // C.3
raon feidhme: {// C.4
nóta: ’=’,
ondelete: ’&’
}
};
});

C.1 Féadfaidh tú do threoir a theorannú do chineál áirithe eilimint HTML. Is iad an dá cheann is coitianta eilimint nó tréith, a dhearbhaíonn tú a úsáid E. agus A. faoi ​​seach. Is féidir leat é a shrianadh freisin chuig rang CSS nó trácht, ach níl siad seo chomh coitianta.

C.2 Is í an fheidhm nasc an áit a gcuireann tú do chód ionramhála DOM go léir. Tá cúpla eisceacht aimsithe agam, ach tá sé seo fíor i gcónaí (99 faoin gcéad ar a laghad den am). Is bunriail bhunúsach é seo de AngularJS agus sin an fáth ar leag mé béim air.

C.3 Oibríonn feidhm an rialaitheora díreach cosúil leis an bpríomh-rialtóir a shainíomar don iarratas ach an $ scóip tá an réad atá á rith againn sainiúil don ghné DOM a bhfuil an treoir ina cónaí ann.

C.4 Tá coincheap de raon feidhme iargúlta ag AngularJS, a ligeann duit sainiú sainráite a dhéanamh ar an gcaoi a ndéanann raon feidhme treorach cumarsáid leis an domhan lasmuigh. Mura raibh scóip dearbhaithe againn bheadh ​​an treoir le hoidhreacht intuigthe ó scóip an tuismitheora le caidreamh tuismitheora-linbh. I go leor cásanna ní hé seo an rud is fearr. Tríd an scóip a aonrú déanaimid na seansanna a mhaolú gur féidir leis an domhan lasmuigh dul i bhfeidhm go neamhaireach agus go diúltach ar staid do threorach.

Tá dearbhaithe agam go bhfuil sonraí dhá bhealach ceangailteach le Nóta leis an = siombail agus slonn ceangailteach le ondelete leis an & siombail. Léigh cáipéisíocht AngularJS le do thoil chun míniú iomlán a fháil ar scóip iargúlta mar go bhfuil sé ar cheann de na hábhair is casta sa chreat.

Mar sin, déanaimis nóta greamaitheach a chur leis an DOM i ndáiríre.

Cosúil le haon chreat maith, tagann AngularJS le roinnt gnéithe iontacha taobh amuigh den bhosca. Is é ceann de na gnéithe is handiest ng-athdhéanamh. Ligeann an treoir AngularJS seo duit sraith rudaí a chur isteach agus dúblaíonn sé cibé tag atá air a mhéad uair agus atá míreanna san eagar. Sa chás thíos, táimid ag atriall thar an nótaí eagar agus dúbailt an div eilimint agus a leanaí ar feadh fad an nótaí eagar.

div sticky-note ng-ailadrodd = "nóta i nótaí" nóta = "nóta" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / cnaipe>
input ng-model = "note.title" ng-change = "updateNote (nóta)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (nóta)"
> {{note.body}} / textarea>
/ div>

Áilleacht na ng-athdhéanamh ná go bhfuil sé faoi cheangal cibé eagar a chuireann tú isteach agus, nuair a chuireann tú mír leis an eagar, nuashonróidh d’eilimint DOM go huathoibríoch. Féadfaidh tú é seo a thógáil céim eile agus ní amháin eilimintí caighdeánacha DOM a athdhéanamh ach treoracha saincheaptha eile freisin. Sin é an fáth a fheiceann tú nóta greamaitheach mar tréith ar an eilimint.

Tá dhá ghiotán eile de chód saincheaptha nach mór a shoiléiriú. Táimid tar éis an scóip ar an nótaí greamaitheacha treoir ar dhá airí. Is é an chéad cheann an raon feidhme iargúlta sainithe ceangailteach ar an Nóta maoin. Ciallaíonn sé seo, aon uair a athraíonn réad an nóta i scóip an tuismitheora, go ndéanfaidh sé an réad nóta comhfhreagrach a nuashonrú go huathoibríoch sa treoir agus a mhalairt. Tá an raon feidhme iargúlta sainithe eile ar an ondelete tréith. Is é a chiallaíonn sé seo ná nuair ondelete ar a dtugtar sa treoir, iarrfaidh sí cibé léiriú atá sa ondelete tréith ar an eilimint DOM a chuireann an treoir ar an toirt.

Nuair a chuirtear treoir ar an toirt cuirtear í leis an DOM agus tugtar an fheidhm nasc. Is deis iontach é seo roinnt airíonna réamhshocraithe DOM a shocrú ar an eilimint. Is réad jQuery é an paraiméadar eiliminte a bhfuilimid ag dul isteach ann agus mar sin is féidir linn oibríochtaí jQuery a dhéanamh air.

(Tagann AngularJS i ndáiríre le fo-thacar de jQuery atá ionsuite ann ach má chuir tú an leagan iomlán de jQuery san áireamh cheana, cuirfidh AngularJS siar é sin.)

app.directive (‘stickyNote’, feidhm (soicéad) {
var linker = feidhm (raon feidhme, eilimint, attrs) {
// Roinnt tionscnamh DOM chun é a dhéanamh deas
element.css (‘ar chlé’, ‘10px’);
eilimint.css (‘barr’, ‘50px’);
eilimint.hide (). fadeIn ();
};
});

Sa chód thuas nílimid ach ag socrú an nóta greamaitheach ar an stáitse agus á lasadh isteach.

11. Ag scriosadh nóta greamaitheach

Mar sin anois go bhféadfaimis nóta greamaitheach a chur leis agus a thaispeáint, tá sé thar am nótaí greamaitheacha a scriosadh. Is éard atá i gceist le cruthú agus scriosadh nótaí greamaitheacha ná míreanna a chur leis an eagar a bhfuil na nótaí faoi cheangal léi agus iad a scriosadh. Tá sé de fhreagracht ar scóip na dtuismitheoirí an tsraith sin a choinneáil, agus sin an fáth go dtionscnóimid an iarraidh scriosadh laistigh den treoir, ach lig dúinn scóip an tuismitheora an t-ardú trom iarbhír a dhéanamh.

Sin é an fáth go ndeachaigh muid tríd an dtrioblóid ar fad chun scóip shainithe sainmhínithe sainráite a chruthú ar an treoir: ionas go bhféadfadh an treoir an teagmhas scriosadh a fháil go hinmheánach agus í a chur ar aghaidh chuig a tuismitheoir lena phróiseáil.

Tabhair faoi deara an HTML taobh istigh den treoir.

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

B’fhéidir go bhfuil an chuma ar an gcéad rud eile a bheidh mé ag rá go bhfuil sé i bhfad timpeall ach cuimhnigh go bhfuilimid ar an taobh céanna agus beidh ciall leis tar éis dom mionléiriú a dhéanamh. Nuair a chliceáiltear an cnaipe sa chúinne uachtarach ar thaobh na láimhe deise den nóta greamaitheach táimid ag glaoch deleteNote ar rialtóir na treorach agus ag dul isteach sa nóta.id luach. Glaonn an rialaitheoir ansin ondelete, a fhorghníomhaíonn ansin cibé léiriú a chaith muid leis. Go dtí seo chomh maith? Táimid ag glaoch ar mhodh áitiúil ar an rialtóir a thugann cead dó ansin trí ghlaoch ar cibé slonn a shainmhínítear sa scóip iargúlta. Tarlaíonn sé go nglaofar an abairt a ghlaoitear ar an tuismitheoir deleteNote freisin.

app.directive (‘stickyNote’, feidhm (soicéad) {
var rialaitheoir = feidhm ($ raon feidhme) {
$ cwmpas.deleteNote = feidhm (id) {
$ cwmpas.ondelete ({
rinne mé
});
};
};

filleadh {
srian: ‘A’,
nasc: nascóir,
rialtóir: rialaitheoir,
raon feidhme: {
nóta: ’=’,
ondelete: ’&’
}
};
});

(Agus scóip iargúlta sainmhínithe slonn á úsáid agat, seoltar paraiméadair ar mhapa réada.)

I raon feidhme na dtuismitheoirí, deleteNote glaoitear air agus déantar scriosadh measartha caighdeánach air ag úsáid an uilleach.forEach feidhm áirgiúlachta chun eagar na nótaí a athrá. Chomh luath agus a láimhseáil an fheidhm a gnó áitiúil téann sé ar aghaidh agus astaíonn sé an ócáid ​​don chuid eile den domhan freagairt dá réir.

app.controller (‘MainCtrl’, feidhm ($ raon feidhme, soicéad) {
$ cwmpas.notes = [];

// Isteach
socket.on (’onNoteDeleted’, feidhm (sonraí) {
$ cwmpas.deleteNote (data.id);
});

// Amach
$ cwmpas.deleteNote = feidhm (id) {
var oldNotes = $ raon.nótaí,
newNotes = [];

angular.forEach (oldNotes, feidhm (nóta) {
más rud é (note.id! == id) newNotes.push (nóta);
});

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

12. Nóta greamaitheach a nuashonrú

Tá dul chun cinn iontach á dhéanamh againn! Tá súil agam anois go bhfuil tú ag tosú ar roinnt patrún a fheiceáil ag teacht chun cinn ón turas guairneáin seo atá á thógáil againn. Is í an chéad mhír eile ar an liosta an ghné nuashonraithe.

Beimid ag tosú ar na heilimintí DOM iarbhír agus é a leanúint an bealach ar fad chuig an bhfreastalaí agus ar ais chuig an gcliant. Ar dtús ní mór dúinn a fháil amach cathain a athraítear teideal nó corp an nóta greamaitheach. Déileálann AngularJS le heilimintí foirme mar chuid den tsamhail sonraí ionas gur féidir leat ceangailteach sonraí dhá bhealach a dhéanamh i ribe. Chun é seo a dhéanamh bain úsáid as an samhail ng treoir a thabhairt agus an mhaoin a theastaíonn uait a cheangal léi a chur isteach. Sa chás seo táimid chun úsáid a bhaint as nóta.title agus nóta.body faoi ​​seach.

Nuair a athraíonn ceachtar de na hairíonna seo ba mhaith linn an fhaisnéis sin a ghabháil le pas a fháil. Déanaimid é seo leis an ng-athrú treoir agus é a úsáid chun glaoch updateNote agus pas a fháil sa réad nóta féin. Déanann AngularJS roinnt seiceáil salach an-chliste chun a fháil amach an bhfuil luach gach a bhfuil ann samhail ng athraithe agus ansin déanann sé an abairt atá i ng-athrú.

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

An bun os cionn le húsáid ng-athrú ná gur tharla an claochlú áitiúil cheana féin agus táimid díreach freagrach as an teachtaireacht a athsheoladh. Sa rialtóir, updateNote Glaoitear air agus uaidh sin táimid chun an updateNote imeacht dár bhfreastalaí craoladh chuig na cliaint eile.

app.directive (‘stickyNote’, feidhm (soicéad) {
var rialaitheoir = feidhm ($ raon feidhme) {
$ cwmpas.updateNote = feidhm (nóta) {
socket.emit (‘updateNote’, nóta);
};
};
});

Agus sa rialtóir treorach, táimid ag éisteacht le haghaidh an onNoteUpdated imeacht le fios nuair a bheidh nóta ó chliant eile nuashonraithe ionas gur féidir linn ár leagan áitiúil a nuashonrú.

var rialaitheoir = feidhm ($ raon feidhme) {
// Isteach
socket.on (’onNoteUpdated’, feidhm (sonraí) {
// Nuashonraigh más é an nóta céanna é
más rud é (data.id == $ cwmpas.note.id) {

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

13. Nóta greamaitheach a bhogadh

Ag an bpointe seo tá lap déanta againn go bunúsach timpeall linn snámha kiddie CRUD agus tá an saol go maith! Ar mhaithe le cleas parlús chun dul i bhfeidhm ar do chairde, táimid chun an cumas nótaí a bhogadh timpeall an scáileáin agus comhordanáidí a nuashonrú i bhfíor-am. Ná bí buartha - níl ann ach cúpla líne eile de chód. Tá an obair chrua seo ar fad le híoc as. Geallaim!

Thugamar cuireadh don aoi speisialta, jQueryUI, chuig an gcóisir, agus rinneamar é ar fad do na draggables. Ní thógann sé ach líne amháin de chód ach an cumas nóta a tharraingt go háitiúil. Má chuireann tú isteach eilimint.draggable (); le d’fheidhm nascóra tosóidh tú ag éisteacht le ‘Eye of the Tiger’ le Survivor mar is féidir leat do chuid nótaí a tharraingt timpeall anois.

Ba mhaith linn a fháil amach cathain a stop an tarraingt agus na comhordanáidí nua a ghabháil le pas a fháil. Thóg roinnt daoine an-chliste jQueryUI, mar sin nuair a stopann an tarraingt ní gá duit ach feidhm aisghlao a shainiú don ócáid ​​stad. Glacaimid leis an nóta.id as an réad scóip agus na luachanna CSS clé agus barr ón ui réad. Leis an eolas sin déanaimid gach a raibh á dhéanamh againn ar fad: astaíonn!

app.directive (‘stickyNote’, feidhm (soicéad) {
var linker = feidhm (raon feidhme, eilimint, attrs) {
eilimint.draggable ({
stad: feidhm (imeacht, ui) {
socket.emit (‘moveNote’, {
id: raon feidhme.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, feidhm (sonraí) {
// Nuashonraigh más é an nóta céanna é
más rud é (data.id == cwmpas.note.id) {
element.animate ({
ar chlé: data.x,
barr: data.y
});
}
});
};
});

Ag an bpointe seo níor chóir go mbeadh aon iontas ann go bhfuilimid ag éisteacht le haghaidh imeachta a bhaineann le bogadh ón tseirbhís soicéad. Sa chás seo is é an onNoteMoved imeacht agus más cluiche é an nóta ansin déanaimid nuashonrú ar airíonna CSS ar chlé agus ar bharr. Bam! Arna dhéanamh!

14. An bónas

Is roinn bónais é seo nach gcuirfinn san áireamh mura mbeinn lán-mhuiníneach go bhféadfá é a bhaint amach i níos lú ná 10 nóiméad. Táimid chun imscaradh chuig freastalaí beo (tá iontas orm fós cé chomh furasta agus atá sé a dhéanamh).

Ar dtús, ní mór duit clárú le haghaidh trialach Nodejitsu saor in aisce. Tá an triail saor in aisce ar feadh 30 lá, rud atá foirfe ar mhaithe le do chosa a fhliuchadh.

Nuair a bheidh do chuntas cruthaithe agat ní mór duit an pacáiste jitsu a shuiteáil, ar féidir leat a dhéanamh ón líne ordaithe trí $ npm shuiteáil jitsu -g.

Ansin ní mór duit logáil isteach ón líne ordaithe trí logáil isteach $ jitsu agus cuir isteach do dhintiúir.

Déan cinnte go bhfuil tú i d’aip go díreach, clóscríobh $ jitsu imscaradh agus céim tríd na ceisteanna. De ghnáth fágaim an oiread agus is féidir agus is féidir, rud a chiallaíonn go dtugann mé ainm do m'iarratas ach ní fo-fhearann ​​srl.

Agus, a chairde, is é sin go léir atá ann! Gheobhaidh tú an URL le d’iarratas ó aschur an fhreastalaí nuair a bheidh sé imscartha agus réidh le dul.

15. Conclúid

Tá go leor talún AngularJS clúdaithe againn san alt seo agus tá súil agam go raibh an-spraoi agat sa phróiseas. Sílim go bhfuil sé néata i ndáiríre an méid is féidir leat a chur i gcrích le AngularJS agus Socket.io i thart ar 200 líne de chód.

Bhí cúpla rud nár chlúdaigh mé ar mhaithe le díriú ar na príomhphointí, ach molaim duit an fhoinse a tharraingt anuas agus imirt timpeall leis an bhfeidhmchlár. Tá bunús láidir tógtha againn, ach tá go leor gnéithe ann fós a d’fhéadfá a chur leis. Faigh hacking!

Is díograiseoir teicneolaíochta í Lukas Ruebbelke agus tá sí ag comhúdar AngularJS in Action for Manning Publications. Is é an rud is fearr leis a dhéanamh ná daoine a chur ar bís faoin teicneolaíocht nua agus atá sé. Reáchtálann sé Grúpa Úsáideoirí Feidhmchlár Gréasáin an Fhionnuisce agus óstáil sé iliomad hackathons lena chomh-chomhpháirtithe sa choireacht.

Thaitin seo leis? Léigh iad seo!

• Conas aip a dhéanamh
• Na clónna gréasáin is fearr linn - agus ní chosnaíonn siad pingin
• Faigh amach céard atá i ndán do Augmented Reality
• Íoslódáil uigeachtaí saor in aisce: ardtaifeach agus réidh le húsáid anois