AngularJS-yhteistyötaulu Socket.io: n kanssa

Sisältö

• 01. Palvelin
• 02. Paljaat luut
• 03. Ilmoita riippuvuutesi
• 04. Kytke Socket.io
• 05. Käynnistä moottorit!
• 06. Muutama vilpitön ajatus ennen kuin jatkat
• 07. Asiakas
• 08. Paljaat luut
• 09. Tarralapun luominen
• 10. Tarralaput näytetään
• 11.Poista muistilappu
• 12. Tarralapun päivittäminen
• 13. Tarralapun siirtäminen
• 14. Bonus
• 15. Päätelmä
• Piditkö tästä? Lue nämä!

• Tarvittava tieto: Välitasoinen JavaScript
• Edellyttää: Node.js, NPM
• Projektin aika: 2 tuntia

AngularJS soveltuu erityisen hyvin rikkaiden asiakaspuolen sovellusten luomiseen selaimessa, ja kun lisäät pienen Socket.io: n sekoitukseen, asiat muuttuvat todella mielenkiintoisiksi. Tässä artikkelissa aiomme rakentaa reaaliaikaisen yhteistyötaulun, joka käyttää AngularJS: ää asiakaspuolen sovelluksessa ja Socket.io: ta tilan jakamiseen kaikkien liitettyjen asiakkaiden välillä.

Katetaan vähän taloudenhoitoa ennen kuin aloitamme. Oletan, että sinulla on perusteellinen käsitys HTML: stä ja JavaScriptistä, koska en aio kattaa koodin jokaista pienen kulmaa. En esimerkiksi aio kutsua HTML-tiedoston päähän sisällyttämiäni CSS- ja JavaScript-tiedostoja, koska siellä ei ole uusia tietoja.

Kehotan myös tarttumaan koodiin GitHub-tililtäni seuraamaan. Hyvällä ystäväni Brian Fordilla on myös erinomainen Socket.io-siemen, johon perustin joitain alkuperäisiä ideoitani.

Neljä pääominaisuutta, jotka haluamme yhteistyötaululta, on kyky luoda muistiinpano, lukea muistiinpanoja, päivittää muistiinpano, poistaa muistiinpano ja huvin vuoksi siirtää muistiinpano taululle. Kyllä, se on oikein, keskitymme vakio-CRUD-ominaisuuksiin. Uskon, että keskittymällä näihin perusominaisuuksiin olemme peittäneet tarpeeksi koodia kuvioiden syntymiseen, jotta voit ottaa ne käyttöön ja soveltaa niitä muualla.

01. Palvelin

Aloitamme ensin Node.js-palvelimella, koska se toimii perustana, johon aiomme rakentaa kaiken muun.

Rakennamme Node.js-palvelinta Express- ja Socket.io-palvelimilla. Syy, miksi käytämme Expressiä, on se, että se tarjoaa mukavan mekanismin staattisen omaisuuden palvelimen määrittämiseen Node.js: ssä. Expressissä on joukko todella mahtavia ominaisuuksia, mutta tässä tapauksessa aiomme jakaa sovelluksen puhtaasti palvelimen ja asiakkaan välillä.

(Toimin olettaen, että sinulla on Node.js ja NPM asennettuna. Nopea Google-haku näyttää, kuinka voit asentaa nämä, jos et.)

02. Paljaat luut

Joten palvelimen paljaiden luiden rakentamiseksi meidän on tehtävä pari asiaa pääsemään toimintaan.

// app.js

// A.1
var express = vaatia (’express’),
app = ilmaista ();
palvelin = vaatia (’http’). createServer (sovellus),
io = vaatia (’socket.io’). kuuntele (palvelin);

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

// A.3
palvelin. kuuntele (1337);

A.1 Julistamme ja välitämme Node.js-moduulejamme, jotta voimme käyttää niitä sovelluksessamme. Julistamme Expressin, välitämme Expressin ja luomme sitten HTTP-palvelimen ja lähetämme siihen Express-ilmentymän. Ja sieltä me välitämme Socket.io: n ja käskemme sitä pitämään silmällä palvelinilmentämäämme.

A.2 Käskemme sitten Express-sovelluksemme käyttämään julkista hakemistoa tiedostojen palvelemiseen.

A.3 Käynnistämme palvelimen ja käskemme sitä kuuntelemaan portissa 1337.

Toistaiseksi se on ollut melko kivutonta ja nopeaa. Uskon, että koodiin on alle 10 riviä, ja meillä on jo toimiva Node.js-palvelin. Eteenpäin!

03. Ilmoita riippuvuutesi

// paketit.json
{
"name": "kulma-yhteistyö-lauta",
"description": "AngularJS-yhteistyölauta",
"versio": "0.0.1-1",
"yksityinen": totta,
"riippuvuudet": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Yksi NPM: n mukavimmista ominaisuuksista on kyky ilmoittaa riippuvuutesi a paketit.json ja asenna ne sitten automaattisesti npm asentaa komentorivillä.

04. Kytke Socket.io

Olemme jo määrittäneet haluamasi ydinominaisuudet sovelluksessa, joten meidän on määritettävä Socket.io -tapahtumakuuntelijat ja sopiva suljin tapahtuman käsittelemiseksi jokaiselle toiminnolle.

Alla olevassa koodissa huomaat, että se on lähinnä tapahtumakuuntelijoiden ja soittopyyntöjen kokoonpano. Ensimmäinen tapahtuma on yhteys tapahtuma, jota käytämme kytkemään muita tapahtumiamme sulkemiseen.

io.sockets.on (’yhteys’, toiminto (socket) {
socket.on (’createNote’, funktio (data) {
socket.broadcast.emit (’onNoteCreated’, data);
});

socket.on (’updateNote’, toiminto (data) {
socket.broadcast.emit (’onNoteUpdated’, data);
});

socket.on (’deleteNote’, toiminto (data) {
socket.broadcast.emit (’onNoteDeleted’, data);
});

socket.on (’moveNote’, function (data) {
socket.broadcast.emit (’onNoteMoved’, data);
});
});

Täältä lisäämme kuuntelijoita createNote, updateNote, deleteHuomautus ja moveHuomautus. Ja soittopyynnössä lähetämme yksinkertaisesti tapahtuman, jotta jokaiselle asiakkaalle, joka kuuntelee, voidaan ilmoittaa tapahtumasta.

Yksittäisten tapahtumakäsittelijöiden takaisinkutsutoiminnoista on syytä mainita muutama asia. Yksi, jos haluat lähettää tapahtuman kaikille muille paitsi asiakkaalle, joka lähetti tapahtuman lähettää ennen säteillä toimintokutsu. Toiseksi välitämme tapahtuman hyötykuorman edelleen asianomaisille osapuolille, jotta he voivat käsitellä sitä haluamallaan tavalla.

05. Käynnistä moottorit!

Nyt kun olemme määrittäneet riippuvuutemme ja perustaneet Node.js-sovelluksemme Express- ja Socket.io-voimilla, Node.js-palvelimen alustaminen on melko helppoa.

Ensin asennat Node.js-riippuvuutesi, kuten:

npm asentaa

Ja sitten käynnistät palvelimen näin:

solmu app.js

Ja sitten! Siirry tähän osoitteeseen selaimessasi. Bam!

06. Muutama vilpitön ajatus ennen kuin jatkat

Olen ensisijaisesti käyttöliittymän kehittäjä, ja minut alun perin pelotteli Node.js-palvelimen liittäminen sovellukseeni. AngularJS-osa oli helppoa, mutta palvelinpuolen JavaScript? Jonottaa kammottavaa musiikkia kauhuelokuvasta.

Mutta minulla oli aivan lattialla huomata, että voisin perustaa staattisen verkkopalvelimen vain muutamassa rivissä koodia ja muutamassa muussa rivissä käyttää Socket.io-ohjelmaa kaikkien selainten välisten tapahtumien käsittelemiseen. Ja se oli silti vain JavaScript! Ajantasaisuuden vuoksi käsittelemme vain muutamia ominaisuuksia, mutta toivon, että artikkelin loppuun mennessä huomaat, että uinti on helppoa - eikä uima-altaan syvä pää ole niin pelottava.

07. Asiakas

Nyt kun meillä on vankka perusta palvelimellamme, siirrymme suosikkini osaan - asiakas! Aiomme käyttää AngularJS: ää, jQueryUI: tä vedettävässä osassa ja Twitter Bootstrapia tyylityypiksi.

08. Paljaat luut

Henkilökohtaisten mieltymysten vuoksi, kun aloitan uuden AngularJS-sovelluksen, haluan määritellä nopeasti sen vähimmäismäärän, jonka tiedän tarvitsevani aloittaa, ja sitten aloittaa iterointi siitä mahdollisimman nopeasti.

Jokainen AngularJS-sovellus on käynnistettävä vähintään yhdellä ohjaimella, joten yleensä aloitan aina.

Jos haluat käynnistää sovelluksen automaattisesti, sinun on lisättävä ng-sovellus HTML-solmuun, jossa haluat sovelluksen elävän. Suurimman osan ajasta sen lisääminen HTML-tagiin on täysin hyväksyttävää. Olen lisännyt myös attribuutin ng-sovellus kertoa sille, että haluan käyttää sovellus moduuli, jonka määrittelen hetkessä.

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

Tiedän, että tarvitsen ainakin yhden ohjaimen, joten soitan sen käyttämällä ng-ohjain ja osoittamalla sille ominaisuus MainCtrl.

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

Joten nyt olemme koukussa nimettyyn moduuliin sovellus ja nimetty ohjain MainCtrl. Mennään eteenpäin ja luodaan ne nyt.

Moduulin luominen on melko yksinkertaista. Voit määrittää sen soittamalla kulmainen moduuli ja antaa sille nimen. Tulevaa käyttöä varten tyhjän taulukon toinen parametri on paikka, johon voit injektoida alimoduuleja sovelluksessa käytettäväksi. Se ei kuulu tämän opetusohjelman piiriin, mutta on kätevä, kun sovelluksesi monimutkaisuus ja tarpeet alkavat kasvaa.

// public / js / cooper.js
var app = kulmamoduuli (’sovellus’, []);

Ilmoitamme muutaman tyhjän paikkamerkin sovellus moduuli, joka alkaa MainCtrl alla.Täydennämme nämä kaikki myöhemmin, mutta halusin havainnollistaa perusrakennetta alusta alkaen.

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

Aiomme myös kääri Socket.io-toiminnot a pistorasiaan palvelua, jotta voimme kapseloida objektin emmekä jätä sitä kellumaan globaalissa nimitilassa.

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

Ja kun olemme siinä, julistamme direktiivin nimeltä muistilappu jota käytämme kapseloimaan muistilapputoiminnot.

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

Katsotaanpa siis, mitä olemme tähän mennessä tehneet. Olemme käynnistäneet sovelluksen käyttämällä ng-sovellus ja ilmoitti sovelluksen ohjaimen HTML-muodossa. Olemme myös määrittäneet sovellusmoduulin ja luoneet MainCtrl ohjain, pistorasiaan palvelu ja muistilappu direktiivi.

09. Tarralapun luominen

Nyt kun AngularJS-sovelluksen luuranko on paikallaan, aloitamme luomisominaisuuden rakentamisen.

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

// Saapuva
socket.on (’onNoteCreated’, function (data) {// B.3
$ scope.notes.push (data);
});

// Lähtevä
$ scope.createNote = function () {// B.4
var Huomautus = {
id: uusi päivämäärä (). getTime (),
otsikko: ”Uusi muistiinpano”,
body: odottaa
};

$ scope.notes.push (huomautus);
socket.emit (’createNote’, huomautus);
};

B.1 AngularJS: ssä on sisäänrakennettu riippuvuuden ruiskutusominaisuus, joten injektoimme a $ -ulottuvuus esine ja pistorasiaan palvelu. $ -ulottuvuus objekti toimii ViewModelina ja on pohjimmiltaan JavaScriptiobjekti, johon on paistettu joitain tapahtumia kaksisuuntaisen tietokohtien luomisen mahdollistamiseksi.

B.2 Julistamme taulukon, johon käytämme sitomaan näkymää.

B.3 Lisäämme kuuntelijan onNoteCreated tapahtuma pistorasiaan palvelu ja työntämällä tapahtuman hyötykuorma $ soveltamisala. huomautuksia taulukko.

B.4 Olemme ilmoittaneet a createNote menetelmä, joka luo oletusarvon merkintä esine ja työntää sen $ soveltamisala. huomautuksia taulukko. Se käyttää myös pistorasiaan palvelu päästää createNote tapahtuma ja läpäise uusi muistiinpano esine pitkin.

Joten nyt, kun meillä on menetelmä muistiinpanon luomiseksi, miten me kutsumme sitä? Se on hyvä kysymys! HTML-tiedostoon lisätään sisäänrakennettu AngularJS-direktiivi napsauta -painikkeeseen ja lisää sitten createNote method-kutsu määritteen arvoksi.

button id = "createButton" ng-click = "createNote ()"> Luo huomautus / painike>

Aika tarkistaa nopeasti tähän mennessä tekemämme. Olemme lisänneet taulukon taulukon $ -ulottuvuus esine MainCtrl siinä on kaikki sovelluksen muistiinpanot. Olemme myös lisänneet a createNote menetelmä $ -ulottuvuus objektin luoda uusi paikallinen muistiinpano ja lähettää sitten muistiinpano muille asiakkaille pistorasiaan palvelu. Olemme myös lisänneet tapahtumakuuntelijan pistorasiaan palvelua, jotta voimme tietää, kun muut asiakkaat ovat luoneet muistiinpanon, jotta voimme lisätä sen kokoelmaamme.

10. Tarralaput näytetään

Meillä on nyt mahdollisuus luoda muistiinpanoobjekti ja jakaa se selainten kesken, mutta miten se todella näytetään? Täältä tulevat direktiivit.

Direktiivit ja niiden monimutkaisuus on laaja aihe, mutta lyhyt versio on, että ne tarjoavat tavan laajentaa elementtejä ja määritteitä mukautetuilla toiminnoilla. Direktiivit ovat helposti suosikkiosani AngularJS: stä, koska sen avulla voit luoda käytännössä kokonaisen DSL: n (verkkotunnuskohtainen kieli) sovelluksesi ympärille HTML-muodossa.

On luonnollista, että koska aiomme luoda muistilappuja yhteistyötaululle, meidän pitäisi luoda muistilappu direktiivi. Direktiivit määritellään kutsumalla direktiivimenetelmä moduulille, jolle haluat julistaa sen, ja välittämällä nimi ja funktio, joka palauttaa direktiivin määrittelyobjektin. Direktiivin määrittelyobjektilla on paljon mahdollisia ominaisuuksia, jotka voit määritellä siihen, mutta aiomme käyttää vain muutamia tarkoituksiimme tässä.

Suosittelen, että tutustut AngularJS-dokumentaatioon, jotta näet kaikki luettelot ominaisuuksista, jotka voit määrittää direktiivimäärittelyobjektissa.

app.directive (’stickyNote’, function (socket) {
var linker = funktio (laajuus, elementti, attrit) {};

var-ohjain = toiminto ($ -alue) {};

paluu {
rajoittaa: ’A’, // C.1
linkki: linkkijä, // C.2
ohjain: ohjain, // C.3
soveltamisala: {// C.4
huomautus: ’=’,
ondelete: ’&’
}
};
});

C.1 Voit rajoittaa direktiivisi tietyntyyppiseen HTML-elementtiin. Kaksi yleisintä ovat elementti tai attribuutti, jonka ilmoitat käyttävän E ja A vastaavasti. Voit myös rajoittaa sen CSS-luokkaan tai kommenttiin, mutta nämä eivät ole niin yleisiä.

C.2 Linkkitoiminto on paikka, johon laitat kaikki DOM-manipulointikoodisi. Olen löytänyt muutaman poikkeuksen, mutta tämä on aina totta (ainakin 99 prosenttia ajasta). Tämä on AngularJS: n perussääntö, ja siksi olen korostanut sitä.

C.3 Ohjaintoiminto toimii aivan kuten sovellukselle määrittelemämme pääohjain, mutta $ -ulottuvuus esine, jonka ohitamme, on nimenomaan DOM-elementti, josta direktiivi elää.

C.4 AngularJS: llä on eristetyn soveltamisalan käsite, jonka avulla voit määritellä nimenomaisesti, miten direktiivin soveltamisala on yhteydessä ulkomaailmaan. Jos emme olisi ilmoittaneet soveltamisalaa, direktiivi olisi implisiittisesti perinyt vanhempien soveltamisalasta vanhempien ja lasten välisellä suhteella. Monissa tapauksissa tämä ei ole optimaalista. Eristämällä soveltamisalaa lievennämme mahdollisuuksia, että ulkomaailma voi vahingossa ja haitallisesti vaikuttaa direktiivisi tilaan.

Olen julistanut kaksisuuntaisen dataa sitovan merkintä kanssa = symboli ja lauseke, joka sitoo ondelete kanssa & symboli. Lue AngularJS-dokumentaatiosta täydellinen selitys eristetystä soveltamisalasta, koska se on yksi monimutkaisimmista aiheista puitteissa.

Joten lisätään todella muistilappu DOM: iin.

Kuten kaikilla hyvillä kehyksillä, AngularJS: ssä on todella hyviä ominaisuuksia heti alusta alkaen. Yksi kätevimmistä ominaisuuksista on ng-toista. Tämän AngularJS-direktiivin avulla voit välittää joukon objekteja ja se kopioi minkä tahansa tunnisteen sillä on niin monta kertaa kuin taulukossa on kohteita. Seuraavassa tapauksessa toistamme muistiinpanoja taulukko ja kopiointi div elementti ja sen lapset muistiinpanoja taulukko.

div sticky-note ng-repeat = "muistiinpano muistiinpanossa" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (huomautus)"
> {{note.body}} / textarea>
/ div>

Kauneus ng-toista on, että se on sidottu mihin tahansa matriisiin, jonka syötät, ja kun lisäät kohteen matriisiin, DOM-elementtisi päivittyy automaattisesti. Voit ottaa tämän askeleen pidemmälle ja toistaa paitsi DOM-vakioelementit myös muut mukautetut direktiivit. Siksi näet muistilappu elementin attribuuttina.

Mukautettua koodia on kaksi muuta bittiä, jotka on selvitettävä. Olemme eristäneet soveltamisalan tarramuistilaput direktiivi kahdesta ominaisuudesta. Ensimmäinen on sitovasti määritelty eristetty soveltamisala merkintä omaisuus. Tämä tarkoittaa, että aina kun huomautusobjekti muuttuu ylätason laajuudessa, se päivittää automaattisesti vastaavan huomautusobjektin direktiivissä ja päinvastoin. Toinen määritelty eristetty soveltamisala on ondelete määritteen. Tämä tarkoittaa sitä, että milloin ondelete kutsutaan direktiivissä, se kutsuu mitä tahansa ilmaisua ondelete attribuutti DOM-elementissä, joka välittää direktiivin.

Kun käsky on instantoitu, se lisätään DOM: iin ja linkitystoimintoa kutsutaan. Tämä on täydellinen tilaisuus asettaa joitain DOM-oletusominaisuuksia elementille. Elementtiparametri, jonka välitämme, on itse asiassa jQuery-objekti, joten voimme suorittaa jQuery-operaatiot sillä.

(AngularJS: n mukana on itse asiassa jQuery-osajoukko, mutta jos olet jo sisällyttänyt jQueryn täysversion, AngularJS lykkää sitä.)

app.directive (’stickyNote’, function (socket) {
var linker = funktio (laajuus, elementti, attrs) {
// Jotkut DOM-aloitukset, jotta se olisi mukavaa
element.css (’vasen’, ’10px’);
element.css (’top’, ’50px’);
element.hide (). fadeIn ();
};
});

Yllä olevassa koodissa yksinkertaisesti sijoitamme tarralapun lavalle ja häivytämme sen sisään.

11.Poista muistilappu

Joten nyt, kun voimme lisätä ja näyttää muistilapun, on aika poistaa tarralaput. Tarralaput luodaan ja poistetaan lisäämällä ja poistamalla taulukosta kohteita, joihin muistiinpanot ovat sidottuja. Tämä on vanhemman laajuuden vastuulla ylläpitää tätä taulukkoa, minkä vuoksi olemme saaneet lähtökohdan poistopyynnöstä direktiivin sisällä, mutta annamme vanhemman laajuuden tehdä varsinainen raskas nosto.

Siksi kävi läpi kaikki vaikeudet luoda lausekkeelle määritelty eristetty soveltamisala direktiiviin: jotta direktiivi voisi vastaanottaa poistotapahtuman sisäisesti ja välittää sen vanhemmalleen käsittelyä varten.

Huomaa HTML-koodi direktiivin sisällä.

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

Seuraava asia, jonka aion sanoa, saattaa tuntua kaukaa, mutta muista, että olemme samalla puolella, ja sillä on järkeä, kun olen tarkentanut. Kun muistilapun oikeassa yläkulmassa olevaa painiketta napsautetaan, soitamme deleteHuomautus direktiivin rekisterinpitäjälle ja siirtäminen note.id arvo. Ohjain soittaa sitten ondelete, joka sitten suorittaa minkä tahansa ilmaisun, jonka olemme siihen liittäneet. Toistaiseksi niin hyvä? Kutsumme ohjaimelle paikallista menetelmää, joka antaa sen sitten kutsumalla mitä tahansa lauseketta, joka määriteltiin eristetyssä laajuudessa. Vanhemmalle kutsuttu ilmaisu vain sattuu olemaan kutsuttu deleteHuomautus yhtä hyvin.

app.directive (’stickyNote’, function (socket) {
var-ohjain = toiminto ($ -alue) {
$ scope.deleteNote = funktio (id) {
$ scope.ondelete ({
minä tein
});
};
};

paluu {
rajoittaa: ”A”,
linkki: linkki,
ohjain: ohjain,
laajuus: {
huomautus: ’=’,
ondelete: ’&’
}
};
});

(Kun käytetään lausekkeen määrittelemää eristettyä laajuutta, parametrit lähetetään kohdekarttaan.)

Vanhemman laajuudessa deleteHuomautus saa kutsun ja poistaa melko tavallisen poiston käyttämällä kulmikas. jokaiselle apuohjelma-toiminto iteroida muistiinpanoryhmän yli. Kun toiminto on hoitanut paikallisen liiketoimintansa, se menee eteenpäin ja lähettää tapahtuman muulle maailmalle reagoimaan vastaavasti.

app.controller (’MainCtrl’, function ($ -alue, socket) {
$ scope.notes = [];

// Saapuva
socket.on (’onNoteDeleted’, funktio (data) {
$ scope.deleteNote (data.id);
});

// Lähtevä
$ scope.deleteNote = funktio (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (oldNotes, funktio (huomautus) {
if (note.id! == id) newNotes.push (huomautus);
});

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

12. Tarralapun päivittäminen

Edistymme upeasti! Toivon nyt, että olet alkanut nähdä joitain malleja tästä pyörremyrskystä, jota käymme. Seuraava luettelon kohta on päivitysominaisuus.

Aloitamme todellisista DOM-elementeistä ja seuraamme sitä aina palvelimelle ja takaisin asiakkaalle. Ensin meidän on tiedettävä, milloin muistilapun otsikkoa tai tekstiä muutetaan. AngularJS käsittelee lomake-elementtejä osana tietomallia, jotta voit liittää kaksisuuntaisen tiedonsiirron hetkessä. Voit tehdä tämän käyttämällä ng-malli ja aseta kiinteistö, johon haluat sitoutua. Tässä tapauksessa aiomme käyttää note.title ja huom. keho vastaavasti.

Kun jompikumpi näistä ominaisuuksista muuttuu, haluamme kaapata nämä tiedot kulkemaan eteenpäin. Saavutamme tämän ng-muutos ja käytä sitä soittaaksesi updateNote ja anna itse muistiinpanokohde. AngularJS tekee joitain erittäin älykkäitä likaisia ​​tarkastuksia havaitakseen, onko minkä tahansa arvo sisällä ng-malli on muuttunut ja suorittaa sitten siinä olevan lausekkeen ng-muutos.

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

Käyttö ylösalaisin ng-muutos on, että paikallinen muutos on jo tapahtunut ja olemme vain vastuussa viestin välittämisestä. Ohjaimessa updateNote kutsutaan ja sieltä aiomme lähettää updateNote tapahtuma palvelimellemme lähetettäväksi muille asiakkaille.

app.directive (’stickyNote’, function (socket) {
var-ohjain = funktio ($ -alue) {
$ scope.updateNote = funktio (huomautus) {
socket.emit (’updateNote’, huomautus);
};
};
});

Ja direktiivien ohjaimessa kuuntelemme onNoteUpdated tapahtuma tietää, kun toisen asiakkaan muistiinpano on päivitetty, jotta voimme päivittää paikallisen version.

var-ohjain = funktio ($ -alue) {
// Saapuva
socket.on (’onNoteUpdated’, toiminto (data) {
// Päivitä, jos sama muistiinpano
if (data.id == $ kattavuus.note.id) {

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

13. Tarralapun siirtäminen

Tässä vaiheessa olemme periaatteessa tehneet kierroksen CRUD-lastenaltaan ympärillä ja elämä on hyvää! Pelkästään salitoiminnon vuoksi, jotta voimme tehdä vaikutuksen ystävillesi, lisätään mahdollisuus siirtää muistiinpanoja ruudulla ja päivittää koordinaatit reaaliajassa. Älä paniikkia - se on vain muutama koodirivi lisää. Kaikki tämä kova työ tulee maksamaan. Lupaan!

Olemme kutsuneet juhliin erikoisvieraan, jQueryUI: n, ja teimme kaiken vetämällä. Muistiinpanon vetämisen paikallisesti lisääminen vie vain yhden koodirivin. Jos lisäät element.draggable (); linkkintoimintoosi alkaa kuulla Survivorin Eye of the Tiger -silmä, koska voit nyt vetää muistiinpanojasi.

Haluamme tietää, milloin vetäminen on loppunut, ja kaapata uudet koordinaatit kulkemaan eteenpäin. jQueryUI: n ovat rakentaneet jotkut erittäin älykkäät ihmiset, joten kun vetäminen pysähtyy, sinun on vain määritettävä pysäytystapahtumalle takaisinsoittotoiminto. Otamme kiinni note.id pois laajuusobjektista ja vasemmasta ja ylimmästä CSS-arvosta ui esine. Tämän tiedon avulla teemme sen, mitä olemme tehneet koko ajan: päästäkää!

app.directive (’stickyNote’, function (socket) {
var linker = funktio (laajuus, elementti, attrs) {
element.draggable ({
stop: funktio (tapahtuma, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, toiminto (data) {
// Päivitä, jos sama muistiinpano
if (data.id == soveltamisala.note.id) {
element.animate ({
vasen: data.x,
alkuun: data.y
});
}
});
};
});

Tässä vaiheessa ei pitäisi olla yllätys, että kuuntelemme myös muuttoihin liittyvää tapahtumaa pistorasiapalvelusta. Tässä tapauksessa se on onNoteMoved tapahtuma ja jos nuotti on ottelu, päivitämme vasemman ja ylimmän CSS-ominaisuudet. Bam! Tehty!

14. Bonus

Tämä on bonusosa, jota en sisällytä, jos en ole aivan varma, että voit saavuttaa sen alle 10 minuutissa. Aiomme ottaa käyttöön live-palvelimen (olen edelleen hämmästynyt siitä, kuinka helppoa se on tehdä).

Ensinnäkin, sinun on mentävä ilmoittautumaan ilmaiseen Nodejitsu-kokeiluun. Kokeilu on ilmainen 30 päivän ajan, mikä sopii täydellisesti jalkojesi kastelemiseen.

Kun olet luonut tilisi, sinun on asennettava jitsu-paketti, jonka voit tehdä komentoriviltä $ npm asenna jitsu -g.

Sitten sinun on kirjauduttava sisään komentoriviltä $ jitsu -kirjautuminen ja anna tunnuksesi.

Kirjoita, että olet suoraan sovelluksessasi $ jitsu käyttöönotto ja selaa kysymyksiä. Jätän yleensä niin paljon oletusarvoihin kuin mahdollista, mikä tarkoittaa, että annan sovellukselleni nimen, mutta en aliverkkotunnusta jne.

Ja rakkaat ystäväni, siinä on kaikki! Saat sovelluksesi URL-osoitteen palvelimen ulostulosta, kun se on otettu käyttöön ja se on käyttövalmis.

15. Päätelmä

Olemme käsitelleet paljon AngularJS-kenttää tässä artikkelissa, ja toivon, että sinulla oli hauskaa prosessissa. Mielestäni on todella siistiä, mitä voit saavuttaa AngularJS: n ja Socket.io: n avulla noin 200 koodirivillä.

Oli joitain asioita, joita en katsonut pääkohtien keskittämisen vuoksi, mutta kehotan teitä vetämään lähteen alas ja pelaamaan sovelluksen kanssa. Olemme rakentaneet vahvan perustan, mutta voit silti lisätä monia ominaisuuksia. Hanki hakkerointi!

Lukas Ruebbelke on tekniikan harrastaja ja mukana AngularJS in Action for Manning Publications -lehdessä. Hänen suosikki tehtävä on saada ihmiset yhtä innostumaan uudesta tekniikasta kuin hän on. Hän johtaa Phoenix-verkkosovellusten käyttäjäryhmää ja on isännöinyt useita hakkerointeja rikostovereidensa kanssa.

Piditkö tästä? Lue nämä!

• Kuinka tehdä sovellus
• Suosikkiverkkofontimme - ja ne eivät maksa penniäkään
• Tutustu laajennetun todellisuuden seuraaviin vaiheisiin
• Lataa ilmaiset tekstuurit: korkea resoluutio ja käyttövalmis nyt