Obsah
- 01. Server
- 02. Holé kosti
- 03. Deklarujte svoje závislosti
- 04. Zapojte Socket.io
- 05. Naštartujte motory!
- 06. Niekoľko úprimných myšlienok, než pôjdete ďalej
- 07. Klient
- 08. Holé kosti
- 09. Vytvorenie lepiacej poznámky
- 10. Zobrazenie lepiacich poznámok
- 11. Odstránenie lepiacej poznámky
- 12. Aktualizácia lepiacej poznámky
- 13. Posunutie lepiacej poznámky
- 14. Bonus
- 15. Záver
- Páčilo sa vám to? Prečítajte si tieto!
- Potrebné znalosti: Stredný JavaScript
- Vyžaduje: Node.js, NPM
- Čas projektu: 2 hodiny
AngularJS je obzvlášť vhodný na vytváranie bohatých aplikácií na strane klienta v prehliadači, a keď do mixu pridáte trochu Socket.io, veci budú skutočne zaujímavé. V tomto článku sa chystáme vytvoriť dosku pre spoluprácu v reálnom čase, ktorá používa AngularJS pre aplikáciu na strane klienta a Socket.io na zdieľanie stavu medzi všetkými pripojenými klientmi.
Skôr ako začneme, poďme si trochu upratať. Budem predpokladať, že máte základné znalosti HTML a JavaScriptu, pretože nebudem pokrývať všetky malé oblasti kódu. Napríklad nebudem vyvolávať súbory CSS a JavaScript, ktoré som zahrnul do hlavy súboru HTML, pretože tam nie sú žiadne nové informácie.
Odporúčam vám tiež vziať si kód z môjho účtu GitHub a pokračovať. Môj dobrý priateľ Brian Ford má tiež vynikajúce osivo Socket.io, na ktorom som založil niektoré zo svojich pôvodných nápadov.
Štyri hlavné funkcie, ktoré na doske pre spoluprácu chceme, je schopnosť vytvárať poznámky, čítať ich, aktualizovať, mazať a pre zábavu presunúť poznámku na dosku. Áno, je to správne, zameriavame sa na štandardné funkcie CRUD. Verím, že zameraním sa na tieto základné črty pokryjeme dostatok kódu na to, aby vznikli vzory, aby ste ich mohli vziať a použiť inde.
01. Server
Najprv začneme so serverom Node.js, pretože bude slúžiť ako základ, na ktorom budeme stavať všetko ostatné.
Budeme budovať server Node.js s Express a Socket.io. Dôvod, ktorý používame Express, je ten, že poskytuje pekný mechanizmus na nastavenie servera statických aktív v rámci Node.js. Express má množstvo skutočne úžasných funkcií, ale v tomto prípade ho použijeme na čisté rozdelenie aplikácie medzi server a klienta.
(Pracujem za predpokladu, že máte nainštalované súbory Node.js a NPM. Rýchle vyhľadávanie Google vám ukáže, ako ich nainštalovať, ak tak neurobíte.)
02. Holé kosti
Aby sme teda mohli vybudovať holé kosti servera, musíme urobiť niekoľko vecí, aby sme mohli pracovať.
// app.js
// A.1
var express = require (‘express’),
app = expres ();
server = require („http“). createServer (aplikácia),
io = require ('socket.io'). listen (server);
// A.2
app.configure (function () {
app.use (express.static (__ dirname + ‘/ public’));
});
// A.3
server.listen (1337);
A.1 Deklarujeme a inštancujeme naše moduly Node.js, aby sme ich mohli použiť v našej aplikácii. Deklarujeme Express, inštancujeme Express a potom vytvoríme server HTTP a do neho pošleme inštanciu Express. A odtiaľ spustíme inštanciu Socket.io a povieme jej, aby dávala pozor na našu inštanciu servera.
A.2 Potom hovoríme našej aplikácii Express, aby používala náš verejný adresár na poskytovanie súborov z.
A.3 Spustíme server a povieme mu, aby počúval na porte 1337.
Zatiaľ to bolo dosť bezbolestné a rýchle. Verím, že do kódu je menej ako 10 riadkov a že už máme funkčný server Node.js. Ďalej!
03. Deklarujte svoje závislosti
// balíčky.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"version": "0.0.1-1",
"private": pravda,
"závislosti": {
"express": "3.x",
"socket.io": "0.9.x"
}
}
Jednou z najkrajších funkcií NPM je schopnosť deklarovať svoje závislosti v a balíčky.json súbor a potom ich automaticky nainštalovať pomocou inštalácia NPM na príkazovom riadku.
04. Zapojte Socket.io
Už sme si definovali základné funkcie, ktoré chceme v aplikácii požadovať, a preto musíme nastaviť poslucháčov udalostí Socket.io a príslušné uzavretie na spracovanie udalosti pre každú operáciu.
V kóde nižšie si všimnete, že ide v podstate o konfiguráciu poslucháčov udalostí a spätných volaní. Prvou udalosťou je spojenie udalosť, ktorú používame na zapojenie našich ďalších udalostí do uzávierky.
io.sockets.on ('connection', function (socket) {
socket.on ('createNote', function (data) {
socket.broadcast.emit (‘onNoteCreated’, data);
});
socket.on (‘updateNote’, function (data) {
socket.broadcast.emit (‘onNoteUpdated’, data);
});
socket.on ('deleteNote', function (data) {
socket.broadcast.emit (‘onNoteDeleted’, data);
});
socket.on (‘moveNote’, function (data) {
socket.broadcast.emit (‘onNoteMoved’, data);
});
});
Odtiaľto pridávame poslucháčov do createNote, updateNote, deleteNote a moveNote. A vo funkcii spätného volania iba vysielame, ktorá udalosť sa stala, aby sme každému poslucháčovi upozornili, že sa udalosť stala.
Existuje niekoľko vecí, ktoré stojí za to poukázať na funkcie spätného volania v jednotlivých obslužných rutinách udalostí. Jeden, ak chcete poslať udalosť všetkým ostatným okrem klienta, ktorý udalosť vyslal, vložíte vysielať pred vydávať volanie funkcie. Po druhé, jednoducho odovzdáme užitočné zaťaženie podujatia zainteresovaným stranám, aby ich mohli spracovať tak, ako uznajú za vhodné.
05. Naštartujte motory!
Teraz, keď sme definovali naše závislosti a nastavili sme našu aplikáciu Node.js s právomocami Express a Socket.io, je celkom jednoduché inicializovať server Node.js.
Najprv si nainštalujte svoje závislosti Node.js takto:
inštalácia NPM
A potom spustíte server takto:
uzol app.js
A potom! Vo svojom prehliadači prejdete na túto adresu. Bam!
06. Niekoľko úprimných myšlienok, než pôjdete ďalej
Som predovšetkým frontendový vývojár a spočiatku som bol trochu zastrašený pripojením servera Node.js k mojej aplikácii. Časť AngularJS bola hračka, ale JavaScript na strane servera? Zaraďte strašidelnú hudbu do hororového filmu.
Ale bol som absolútne pripravený zistiť, že môžem nastaviť statický webový server iba v niekoľkých riadkoch kódu a v niekoľkých ďalších riadkoch použiť Socket.io na zvládnutie všetkých udalostí medzi prehľadávačmi. A stále to bol iba JavaScript! Kvôli aktuálnosti uvádzame iba niekoľko funkcií, ale dúfam, že do konca článku uvidíte, že sa dá ľahko plávať - a hlboký koniec bazénu nie je taký strašidelný.
07. Klient
Teraz, keď máme so svojím serverom pevné základy, poďme k mojej obľúbenej časti - klientovi! Budeme používať AngularJS, jQueryUI pre presunutú časť a Twitter Bootstrap ako základ pre štýl.
08. Holé kosti
Ako záležitosť osobných preferencií, keď spustím novú aplikáciu AngularJS, rád rýchlo definujem nevyhnutné minimum, o ktorom viem, že budem musieť začať, a potom čo najrýchlejšie začnem iterovať.
Každá aplikácia AngularJS musí byť bootstrapovaná s aspoň jedným prítomným radičom, takže tu obvykle začínam vždy.
Pre automatické zavedenie aplikácie musíte jednoducho pridať ng-app do uzla HTML, v ktorom má aplikácia žiť. Jeho pridanie do značky HTML bude väčšinou úplne prijateľné. Tiež som pridal atribút ng-app povedať, že chcem použiť aplikácia modul, ktorý definujem za chvíľu.
// public / index.html
html ng-app = "aplikácia">
Viem, že budem potrebovať aspoň jeden ovládač, a preto ho zavolám pomocou ng-radič a prideliť mu vlastníctvo MainCtrl.
body ng-controller = "MainCtrl"> / body>
Teraz sme teda na háku s názvom modulu aplikácia a kontrolór s menom MainCtrl. Poďme do toho a vytvorme ich teraz.
Vytvorenie modulu je pomerne jednoduché. Definujete to volaním uhlový.modul a dať mu meno. Pre budúce použitie je druhým parametrom prázdneho poľa miesto, kde môžete vložiť čiastkové moduly na použitie v aplikácii. Je to mimo rozsahu tohto tutoriálu, ale je užitočné, keď vaša aplikácia začne narastať v zložitosti a potrebách.
// public / js / collab.js
var app = angular.module ('app', []);
Chystáme sa vyhlásiť niekoľko prázdnych zástupných znakov v aplikácia modul začínajúci sa na MainCtrl nižšie.Všetky tieto vyplníme neskôr, ale chcel som ilustrovať základnú štruktúru od začiatku.
app.controller ('MainCtrl', function ($ scope) {});
Chystáme sa tiež zabaliť funkčnosť Socket.io do a zásuvka aby sme mohli tento objekt zapuzdriť a nenechať ho plávať v globálnom mennom priestore.
app.factory ('socket', function ($ rootScope) {});
A keď už sme pri tom, vyhlásime smernicu s názvom lepiace poznámky ktoré použijeme na zapuzdrenie funkčnosti lepiacej poznámky v.
app.directive ('stickyNote', function (socket) {});
Pozrime sa teda, čo sme doteraz robili. Aplikáciu sme bootstrapovali pomocou ng-app a deklaroval náš aplikačný radič v HTML. Definovali sme tiež aplikačný modul a vytvorili MainCtrl kontrolór, zásuvka služby a lepiace poznámky smernice.
09. Vytvorenie lepiacej poznámky
Teraz, keď máme vytvorenú kostru aplikácie AngularJS, začneme vytvárať funkciu vytvárania.
app.controller (‘MainCtrl’, function ($ scope, socket) {// B.1
$ scope.notes = []; // B.2
// Prichádzajúce
socket.on ('onNoteCreated', function (data) {// B.3
$ scope.notes.push (údaje);
});
// Vychádzajúce
$ scope.createNote = function () {// B.4
var nota = {
id: new Date (). getTime (),
názov: „Nová poznámka“,
telo: „Čaká sa na“
};
$ scope.notes.push (poznámka);
socket.emit ('createNote', poznámka);
};
B.1 AngularJS má v sebe zabudovanú funkciu vkladania závislostí, takže vkladáme a $ rozsah objekt a zásuvka služby. The $ rozsah objekt slúži ako ViewModel a je to v podstate objekt JavaScript, do ktorého sú zapečené niektoré udalosti, ktoré umožňujú obojsmerné viazanie údajov.
B.2 Deklarujeme pole, v ktorom použijeme na väzbu pohľadu.
B.3 Pridávame poslucháča pre onNoteCreated udalosť na zásuvka služba a zatlačenie užitočného zaťaženia udalosti do $ scope.notes pole.
B.4 Vyhlásili sme a createNote metóda, ktorá vytvorí predvolené Poznámka objekt a zatlačí ho do $ scope.notes pole. Používa tiež zásuvka služba vydávať createNote udalosť a zložiť nová poznámka predmet spolu.
Takže teraz, keď máme metódu na vytvorenie poznámky, ako ju nazveme? To je dobrá otázka! V súbore HTML pridáme zabudovanú smernicu AngularJS ng-klik na tlačidlo a potom pridajte createNote volanie metódy ako hodnota atribútu.
button id = "createButton" ng-click = "createNote ()"> Vytvoriť poznámku / tlačidlo>
Je čas na rýchle preskúmanie toho, čo sme doteraz urobili. Do súboru sme pridali pole $ rozsah objekt v MainCtrl ktorý bude obsahovať všetky poznámky k aplikácii. Pridali sme tiež a createNote metóda na $ rozsah objekt na vytvorenie novej miestnej poznámky a potom túto poznámku odošlite ostatným klientom prostredníctvom servera zásuvka služby. Na server sme pridali aj poslucháča udalostí zásuvka aby sme vedeli, kedy iní klienti vytvorili poznámku, aby sme ju mohli pridať do našej zbierky.
10. Zobrazenie lepiacich poznámok
Teraz máme možnosť vytvoriť objekt poznámky a zdieľať ho medzi prehľadávačmi, ale ako ho vlastne zobrazíme? Tu prichádzajú na rad smernice.
Smernice a ich zložitosti sú rozsiahlym predmetom, ich krátka verzia je však taká, že poskytujú spôsob rozšírenia prvkov a atribútov pomocou vlastných funkcií. Direktívy sú mojou najobľúbenejšou časťou o AngularJS, pretože vám umožňujú v podstate vytvoriť celý DSL (Domain Specific Language) okolo vašej aplikácie v HTML.
Je prirodzené, že keďže budeme pre našu dosku pre spoluprácu vytvárať poznámky s poznámkami, mali by sme vytvoriť lepiace poznámky smernice. Direktívy sú definované volaním direktívnej metódy na module, ktorý chcete deklarovať, a odovzdaním názvu a funkcie, ktorá vráti objekt definície direktívy. Objekt definície smernice má veľa možných vlastností, ktoré na ňom môžete definovať, ale tu pre naše účely použijeme iba niektoré.
Odporúčam vám pozrieť si dokumentáciu AngularJS, aby ste videli celý zoznam vlastností, ktoré môžete definovať v definičnom objekte smernice.
app.directive ('stickyNote', function (socket) {
var linker = funkcia (rozsah, element, attrs) {};
var radič = funkcia ($ scope) {};
návrat {
obmedziť: „A“, // C.1
odkaz: linker, // C.2
radič: radič, // C.3
rozsah: {// C.4
poznámka: ‘=’,
ondelete: ‘&‘
}
};
});
C.1 Svoju smernicu môžete obmedziť na určitý typ prvku HTML. Dva najbežnejšie sú element alebo atribút, ktoré deklarujete použitím E a A resp. Môžete ho tiež obmedziť na triedu CSS alebo komentár, ale nie sú také bežné.
C.2 Funkcia prepojenia je miesto, kam ste vložili všetok svoj manipulačný kód DOM. Existuje niekoľko výnimiek, ktoré som našiel, ale vždy je to pravda (minimálne v 99% prípadov). Toto je základné základné pravidlo AngularJS a preto som ho zdôraznil.
C.3 Funkcia radiča funguje rovnako ako hlavný radič, ktorý sme definovali pre aplikáciu, ale $ rozsah objekt, ktorý odovzdávame, je špecifický pre prvok DOM, v ktorom smernica žije.
C.4 AngularJS má koncept izolovaného rozsahu, ktorý vám umožňuje výslovne definovať, ako rozsah smernice komunikuje s vonkajším svetom. Keby sme nedeklarovali rozsah, smernica by implicitne zdedila z rozsahu rodiča vo vzťahu rodič - dieťa. V mnohých prípadoch to nie je optimálne. Izolovaním rozsahu pôsobnosti zmierňujeme pravdepodobnosť, že vonkajší svet môže neúmyselne a nepriaznivo ovplyvniť stav vašej smernice.
Deklaroval som obojsmerné viazanie údajov na Poznámka s = symbol a výraz viažuci sa k ondelete s & symbol. Prečítajte si dokumentáciu AngularJS, kde nájdete úplné vysvetlenie izolovaného rozsahu, pretože ide o jeden z komplikovanejších predmetov v rámci.
Poďme teda do DOMu pridať poznámku.
Ako každý dobrý rámec, aj AngularJS má hneď po vybalení niekoľko skutočne skvelých funkcií. Jednou z najprísnejších funkcií je ng-opakovať. Táto smernica AngularJS vám umožňuje odovzdať pole objektov a duplikuje ľubovoľnú značku, na ktorej je toľkokrát, koľkokrát sú v nej položky. V prípade uvedenom nižšie iterujeme poznámky pole a duplikovanie súboru div prvok a jeho deti na dĺžku prvku poznámky pole.
div sticky-note ng-repeat = "poznámka v poznámkach" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
vstup ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (poznámka)"
> {{note.body}} / textarea>
/ div>
Krása ng-opakovať je to, že je viazaný na čokoľvek pole, ktoré odovzdáte, a keď do poľa pridáte položku, váš prvok DOM sa automaticky aktualizuje. Môžete to posunúť o krok ďalej a opakovať nielen štandardné prvky DOM, ale aj ďalšie vlastné smernice. Preto vidíš lepiace poznámky ako atribút prvku.
Je potrebné objasniť ďalšie dve časti vlastného kódu. Rozsah sme izolovali od lepiace poznámky smernica o dvoch nehnuteľnostiach. Prvým z nich je väzbou definovaný izolovaný rozsah na serveri Poznámka nehnuteľnosť. To znamená, že vždy, keď sa objekt poznámky zmení v nadradenom rozsahu, automaticky aktualizuje zodpovedajúci objekt poznámky v smernici a naopak. Ďalší definovaný izolovaný rozsah je na ondelete atribút. To znamená, že keď ondelete sa volá v smernici, bude sa volať akýkoľvek výraz v ondelete atribút na prvku DOM, ktorý vytvára inštanciu smernice.
Keď je smernica inštancovaná, pridá sa do DOM a zavolá sa funkcia odkazu. Je to vynikajúca príležitosť na nastavenie niektorých predvolených vlastností modelu DOM na prvku. Parameter prvku, ktorý odovzdávame, je v skutočnosti objekt jQuery, takže s ním môžeme vykonávať operácie jQuery.
(AngularJS skutočne prichádza s podmnožinou jQuery, ktorá je do nej zabudovaná, ale ak ste už zahrnuli úplnú verziu jQuery, AngularJS sa k tomu odloží.)
app.directive ('stickyNote', function (socket) {
var linker = funkcia (rozsah, prvok, attrs) {
// Nejaká iniciácia DOM, aby to bolo pekné
element.css („vľavo“, „10px“);
element.css (‘top’, ‘50px’);
element.hide (). fadeIn ();
};
});
Vo vyššie uvedenom kóde jednoducho umiestnime lepiacu notu na scénu a postupne ju rozladíme.
11. Odstránenie lepiacej poznámky
Takže teraz, keď môžeme pridať a zobraziť rýchlu poznámku, je čas vymazať rýchle poznámky. Vytváranie a mazanie poznámok je otázkou pridávania a mazania položiek z poľa, na ktoré sú poznámky viazané. Toto je zodpovednosť nadradeného rozsahu za udržiavanie tohto poľa, a preto vyvodzujeme požiadavku na vymazanie z rozsahu smernice, ale necháme nadradený rozsah skutočne vykonávať ťažké práce.
To je dôvod, prečo sme prešli všetkými problémami s vytváraním izolovaného rozsahu definovaného výrazom v smernici: aby smernica mohla interne prijať udalosť mazania a odovzdať ju svojmu rodičovi na spracovanie.
Všimnite si HTML vo vnútri smernice.
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
Hneď ďalšia vec, ktorú poviem, sa môže javiť ako dlhá cesta, ale pamätajte, že sme na rovnakej strane a po mojom rozpracovaní to bude mať zmysel. Keď kliknete na tlačidlo v pravom hornom rohu lepiacej poznámky, voláme deleteNote o kontrolórovi smernice a odovzdaní pozn.id hodnotu. Kontrolór potom zavolá vymazať, ktorý potom vykoná akýkoľvek výraz, ktorý sme k nemu pripojili. Zatiaľ je všetko dobré? Voláme lokálnu metódu na radiči, ktorá ju potom odovzdá volaním ľubovoľného výrazu definovaného v izolovanom rozsahu. Výraz, ktorý sa zavolá rodičovi, sa len náhodou zavolá deleteNote tiež.
app.directive ('stickyNote', function (socket) {
var radič = funkcia ($ rozsah) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
urobil som
});
};
};
návrat {
obmedziť: „A“,
link: linker,
radič: radič,
rozsah: {
poznámka: ‘=’,
ondelete: ‘&‘
}
};
});
(Pri použití izolovaného rozsahu definovaného výrazom sa parametre odosielajú v mape objektov.)
V rozsahu rodiča deleteNote sa ozve a pomocou štandardného mazania vykoná pomerne štandardné mazanie hranatý.naKaždý pomocná funkcia na iteráciu nad poľom poznámok. Keď funkcia zvládne svoje miestne podnikanie, ide do toho a vysiela udalosť pre zvyšok sveta, aby zodpovedajúcim spôsobom zareagovala.
app.controller (‘MainCtrl’, function ($ scope, socket) {
$ scope.notes = [];
// Prichádzajúce
socket.on ('onNoteDeleted', function (data) {
$ scope.deleteNote (data.id);
});
// Vychádzajúce
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];
angular.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (poznámka);
});
$ scope.notes = newNotes;
socket.emit ('deleteNote', {id: id});
};
});
12. Aktualizácia lepiacej poznámky
Robíme fantastický pokrok! Dúfam, že už teraz začínate vidieť niektoré vzorce vychádzajúce z tohto víchricového turné, ktoré absolvujeme. Ďalšou položkou v zozname je funkcia aktualizácie.
Začneme od skutočných prvkov DOM a budeme to sledovať až na server a späť ku klientovi. Najskôr musíme vedieť, kedy sa mení nadpis alebo text lepiacej poznámky. AngularJS zaobchádza s formovými prvkami ako s časťou dátového modelu, takže môžete okamžite spojiť obojsmerné viazanie údajov. K tomu použite ng-model direktívu a vložte do majetku, na ktorý sa chcete viazať. V takom prípade použijeme poznámka.názov a poznámka.telo resp.
Keď sa zmení ktorákoľvek z týchto vlastností, chceme tieto informácie zachytiť a odovzdať ich ďalej. Dosahujeme to pomocou ng-zmena smernicu a použiť ju na volanie updateNote a odovzdať samotný objekt poznámky. AngularJS vykonáva veľmi dômyselnú špinavú kontrolu, aby zistil, či je hodnota čohokoľvek ng-model sa zmenil a potom vykoná výraz, ktorý je v ng-zmena.
vstup ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>
Nevýhodou použitia ng-zmena je, že miestna transformácia už prebehla a my sme iba zodpovední za odovzdanie správy. V ovládači updateNote sa volá a odtiaľ budeme emitovať updateNote udalosť pre náš server vysielať ostatným klientom.
app.directive ('stickyNote', function (socket) {
var radič = funkcia ($ rozsah) {
$ scope.updateNote = funkcia (poznámka) {
socket.emit (‘updateNote’, pozn.);
};
};
});
A v direktívnom kontrolóri počúvame onNoteUpdated udalosť vedieť, keď sa aktualizovala poznámka od iného klienta, aby sme mohli aktualizovať našu lokálnu verziu.
var radič = funkcia ($ rozsah) {
// Prichádzajúce
socket.on ('onNoteUpdated', function (data) {
// Aktualizácia, ak je rovnaká nota
if (data.id == $ scope.note.id) {
$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};
13. Posunutie lepiacej poznámky
V tomto okamihu sme v podstate prešli okolo detského bazéna CRUD a život je dobrý! Kvôli salónnemu triku, ktorým urobíte dojem na svojich priateľov, pridáme možnosť presúvať poznámky po obrazovke a aktualizovať súradnice v reálnom čase. Neprepadajte panike - je to len niekoľko ďalších riadkov kódu. Celá táto tvrdá práca sa vyplatí. Sľubujem!
Na večierok sme pozvali špeciálneho hosťa, jQueryUI, a všetko sme zvládli pre draggables. Pridanie možnosti pretiahnuť poznámku lokálne zaberie iba jeden riadok kódu. Ak pridáte element.draggable (); k funkcii vášho linkera začnete počuť „Eye of the Tiger“ od Survivora, pretože teraz môžete svoje poznámky pretiahnuť.
Chceme vedieť, kedy sa zastavilo pretiahnutie a zachytiť nové súradnice, ktoré budú prechádzať ďalej. jQueryUI vytvorili niektorí veľmi šikovní ľudia, takže keď sa pretiahnutie zastaví, musíte jednoducho definovať funkciu spätného volania pre udalosť stop. Chytíme pozn.id mimo objekt rozsahu a ľavú a najvyššiu hodnotu CSS z ui objekt. S týmito vedomosťami robíme to, čo sme robili po celý čas: emit!
app.directive ('stickyNote', function (socket) {
var linker = funkcia (rozsah, prvok, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit („moveNote“, {
id: scope.note.id,
x: ui.position.left,
y: ui.pozícia.top
});
}
});
socket.on ('onNoteMoved', function (data) {
// Aktualizácia, ak je rovnaká nota
if (data.id == scope.note.id) {
element.animate ({
vľavo: data.x,
hore: data.y
});
}
});
};
});
V tomto okamihu by nás nemalo prekvapiť, že zo služby socket počúvame aj udalosť spojenú s presunom. V tomto prípade je to onNoteMoved udalosť a ak je poznámka zhoda, aktualizujeme ľavé a horné vlastnosti CSS. Bam! Hotový!
14. Bonus
Toto je bonusová časť, ktorú by som nezahrnul, ak by som si nebol úplne istý, že to dosiahnete za menej ako 10 minút. Chystáme sa nasadiť na živý server (stále ma prekvapuje, aké ľahké je to urobiť).
Najprv sa musíte zaregistrovať na bezplatné vyskúšanie Nodejitsu. Skúšobná verzia je bezplatná na 30 dní, čo je ideálne na to, aby ste si namočili nohy.
Po vytvorení účtu si musíte nainštalovať balík jitsu, ktorý môžete vykonať z príkazového riadku cez $ npm inštalácia jitsu -g.
Potom sa musíte prihlásiť z príkazového riadku pomocou $ jitsu prihlásenie a zadajte svoje poverenia.
Uistite sa, že ste priamo vo svojej aplikácii, zadajte $ jitsu nasadiť a prechádzajte otázkami. Spravidla ponechávam čo najviac predvolených nastavení, čo znamená, že svojej aplikácii dám meno, ale nie subdoménu atď.
A moji drahí priatelia, to je všetko! Adresu URL svojej aplikácie získate z výstupu servera, akonáhle je nasadený a je pripravený na použitie.
15. Záver
V tomto článku sme sa zaoberali mnohými oblasťami AngularJS a dúfam, že ste si pri tomto procese užili veľa zábavy. Myslím, že je skutočne pekné, čo môžete dosiahnuť pomocou AngularJS a Socket.io v približne 200 riadkoch kódu.
Bolo niekoľko vecí, ktorým som sa nevenoval, aby som sa zameral na hlavné body, ale odporúčam vám stiahnuť zdroj a pohrať sa s aplikáciou. Postavili sme silný základ, ale stále môžete pridať veľa funkcií. Nechajte sa hacknúť!
Lukas Ruebbelke je technologický nadšenec a je spoluautorom publikácie AngularJS in Action for Manning Publications. Najradšej robí ľudí, ktorí sú rovnako nadšení z nových technológií. Vedie skupinu používateľov webových aplikácií Phoenix a so svojimi spolupracovníkmi v oblasti zločinu hostil viacero hackatónov.
Páčilo sa vám to? Prečítajte si tieto!
- Ako vytvoriť aplikáciu
- Naše obľúbené webové písma - a nestoja ani cent
- Objavte, čo bude v oblasti rozšírenej reality nasledovať
- Stiahnite si bezplatné textúry: vysoké rozlíšenie a ihneď pripravené na použitie
