Odbor za suradnju AngularJS sa Socket.io

Sadržaj

• 01. Poslužitelj
• 02. Gole kosti
• 03. Izjavite svoje ovisnosti
• 04. Ožičite utičnicu.io
• 05. Pokrenite motore!
• 06. Nekoliko iskrenih misli prije nego što krenete dalje
• 07. Klijent
• 08. Gole kosti
• 09. Stvaranje ljepljive bilješke
• 10. Prikazivanje ljepljivih bilješki
• 11.Brisanje ljepljive bilješke
• 12. Ažuriranje ljepljive bilješke
• 13. Premještanje ljepljive bilješke
• 14. Bonus
• 15. Zaključak
• Sviđa li vam se ovo? Pročitajte ovo!

• Potrebno znanje: Srednji JavaScript
• Zahtijeva: Node.js, NPM
• Vrijeme projekta: 2 sata

AngularJS je posebno pogodan za stvaranje bogatih aplikacija na strani klijenta u pregledniku, a kada u miks dodate malo Socket.io, stvari postaju doista zanimljive. U ovom ćemo članku izgraditi ploču za suradnju u stvarnom vremenu koja koristi AngularJS za klijentsku aplikaciju i Socket.io za dijeljenje stanja između svih povezanih klijenata.

Pokrijmo malo vođenja domaćinstva prije nego što započnemo. Pretpostavit ću da imate temeljno znanje HTML-a i JavaScript-a jer neću pokriti svaki mali kutak koda. Na primjer, neću prozivati ​​CSS i JavaScript datoteke koje sam uvrstio u glavu HTML datoteke jer tamo nema novih podataka.

Također, potičem vas da uzmete kôd s mog GitHub računa da biste ga slijedili. Moj dobri prijatelj Brian Ford također ima izvrsno sjeme Socket.io, na kojem sam temeljio neke od svojih izvornih ideja.

Četiri glavne značajke koje želimo na ploči za suradnju je mogućnost izrade bilješke, čitanja bilješki, ažuriranja bilješke, brisanja bilješki i, za zabavu, premještanja bilješki na ploči. Da, točno je, fokusiramo se na standardne CRUD značajke. Vjerujem da ćemo se usredotočujući na ove temeljne značajke pokriti dovoljno koda da se pojave obrasci kako biste ih mogli uzeti i primijeniti negdje drugdje.

01. Poslužitelj

Prvo ćemo započeti s poslužiteljem Node.js jer će poslužiti kao temelj na kojem ćemo graditi sve ostalo.

Izgradit ćemo Node.js poslužitelj s Expressom i Socket.io. Razlog zbog kojeg koristimo Express je taj što pruža lijep mehanizam za postavljanje statičkog poslužitelja imovine unutar Node.js. Express dolazi s hrpom doista sjajnih značajki, ali u ovom ćemo ga slučaju koristiti za čisto raspoređivanje aplikacije između poslužitelja i klijenta.

(Radim pod pretpostavkom da ste instalirali Node.js i NPM. Brzo Google pretraživanje pokazat će vam kako ih instalirati ako to ne učinite.)

02. Gole kosti

Dakle, da bismo izgradili gole kosti poslužitelja, moramo napraviti nekoliko stvari kako bismo pokrenuli i pokrenuli.

// app.js

// A.1
var express = require ('express'),
app = express ();
poslužitelj = zahtijeva ('http'). createServer (aplikacija),
io = require ('socket.io'). listen (server);

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

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

A.1 Deklariramo i izrađujemo instance našeg Node.js modula kako bismo ih mogli koristiti u našoj aplikaciji. Deklariramo Express, uspostavljamo Express, a zatim stvaramo HTTP poslužitelj i šaljemo u njega instance Express. A odatle instanciramo Socket.io i poručujemo mu da pripazi na instancu našeg poslužitelja.

A.2 Tada govorimo našoj Express aplikaciji da koristi naš javni direktorij za posluživanje datoteka iz.

A.3 Pokrećemo poslužitelj i kažemo mu da presluša na priključku 1337.

Do sada je to bilo prilično bezbolno i brzo. Vjerujem da imamo manje od 10 redaka u kodu i već imamo funkcionalan Node.js poslužitelj. Naprijed!

03. Izjavite svoje ovisnosti

// paketi.json
{
"name": "kutna ploča",
"description": "Odbor za suradnju AngularJS",
"inačica": "0.0.1-1",
"private": istina,
"ovisnosti": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Jedna od najljepših značajki NPM-a je sposobnost izjave vaših ovisnosti u a paketi.json datoteku, a zatim ih automatski instalirajte putem npm instalirati na naredbenom retku.

04. Ožičite utičnicu.io

Već smo definirali osnovne značajke koje želimo u aplikaciji, pa moramo postaviti slušatelje događaja Socket.io i odgovarajuće zatvaranje za obradu događaja za svaku operaciju.

U donjem kodu primijetit ćete da je to u osnovi konfiguracija slušatelja događaja i povratnih poziva. Prvi događaj je povezanost događaj koji koristimo za povezivanje ostalih naših događaja u zatvaranju.

io.sockets.on ('veza', funkcija (socket) {
socket.on ('createNote', funkcija (podaci) {
socket.broadcast.emit (’onNoteCreated’, podaci);
});

socket.on ('updateNote', funkcija (podaci) {
socket.broadcast.emit ('onNoteUpdated', podaci);
});

socket.on ('deleteNote', funkcija (podaci) {
socket.broadcast.emit ('onNoteDeleted', podaci);
});

socket.on ('moveNote', funkcija (podaci) {
socket.broadcast.emit (’onNoteMoved’, podaci);
});
});

Odavde dodajemo slušatelje createNote, updateNapomena, deleteNapomena i moveNapomena. A u funkciji povratnog poziva jednostavno emitiramo koji se događaj dogodio kako bi svaki klijent koji sluša može dobiti obavijest da se događaj dogodio.

Postoji nekoliko stvari koje vrijedi istaknuti o funkcijama povratnog poziva u pojedinačnim voditeljima događaja. Prvo, ako želite poslati događaj svima ostalima, osim klijentu koji je emitirao događaj koji ste umetnuli emitirati prije emitirati poziv funkcije. Kao drugo, jednostavno prenosimo korisni teret događaja zainteresiranim stranama kako bi ga mogle obraditi kako im odgovara.

05. Pokrenite motore!

Sad kad smo definirali svoje ovisnosti i postavili našu aplikaciju Node.js s Express i Socket.io ovlastima, vrlo je jednostavno inicijalizirati Node.js poslužitelj.

Prvo instalirate svoje ovisnosti o Node.js ovako:

npm instalirati

A onda pokrenite poslužitelj ovako:

čvor app.js

I onda! Idite na ovu adresu u pregledniku. Bam!

06. Nekoliko iskrenih misli prije nego što krenete dalje

Ja sam prvenstveno razvojni programer i u početku sam bio pomalo zastrašen priključivanjem Node.js poslužitelja na svoju aplikaciju. Dio AngularJS bio je brz, ali JavaScript na strani poslužitelja? Stavite jezivu glazbu iz horora u red.

Ali, bio sam apsolutno podložan otkriću da bih mogao postaviti statički web poslužitelj u samo nekoliko redaka koda, a u još nekoliko redaka koristiti Socket.io za obradu svih događaja između preglednika. I dalje je to bio samo JavaScript! Radi pravovremenosti pokrivamo samo nekoliko značajki, ali nadam se da ćete do kraja članka vidjeti da je lako plivati ​​- a duboki kraj bazena nije tako zastrašujući.

07. Klijent

Sad kad imamo svoje čvrste temelje s našim poslužiteljem, prijeđimo na moj omiljeni dio - klijenta! Koristit ćemo AngularJS, jQueryUI za dio koji se može povući i Twitter Bootstrap za bazu stilova.

08. Gole kosti

Što se tiče osobnih preferencija, kad pokrenem novu aplikaciju AngularJS, volim brzo definirati najmanji minimum za koji znam da će mi trebati za početak, a zatim to početi prevrtati što je brže moguće.

Svaka aplikacija AngularJS mora se pokrenuti s najmanje jednim prisutnim kontrolerom, tako da to obično uvijek počinjem.

Da biste automatski pokrenuli aplikaciju, morate je jednostavno dodati ng-aplikacija na HTML čvor u kojem želite da aplikacija živi. Većinu vremena dodavanje u HTML oznaku bit će sasvim prihvatljivo. Također sam dodao atribut ng-aplikacija da mu kažem da želim koristiti app modul, koji ću definirati za samo trenutak.

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

Znam da će mi trebati barem jedan kontroler, pa ću to nazvati pomoću ng-kontroler i dodijelivši mu svojstvo od MainCtrl.

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

Sad smo na dohvat ruke za modul s imenom app i kontroler imenovan MainCtrl. Krenimo i stvorimo ih sada.

Stvaranje modula prilično je jednostavno. To definirate pozivom kutni.modul i dajući mu ime. Za buduću referencu, drugi parametar praznog niza je mjesto gdje možete ubrizgati podmodule za upotrebu u aplikaciji. To je izvan opsega ovog vodiča, ali je zgodno kad vaša aplikacija počne rasti u složenosti i potrebama.

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

Proglasit ćemo nekoliko praznih rezerviranih mjesta u app modul koji započinje s MainCtrl ispod.Sve ćemo popuniti kasnije, ali želio sam ilustrirati osnovnu strukturu od početka.

app.controller ('MainCtrl', funkcija ($ opseg) {});

Također ćemo umotati funkcionalnost Socket.io u utičnica usluga tako da možemo enkapsulirati taj objekt i ne ostavljati ga da pluta okolo na globalnom prostoru imena.

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

I dok smo u tome, proglasit ćemo direktivu koja se zove ljepljivaNapomena koju ćemo koristiti za uvrštavanje funkcionalnosti ljepljive note u.

app.directive ('stickyNote', funkcija (socket) {});

Pa pregledajmo što smo do sada učinili. Pokrenuli smo aplikaciju pomoću ng-aplikacija i deklarirali naš aplikacijski kontroler u HTML-u. Također smo definirali aplikacijski modul i kreirali MainCtrl kontroler, utičnica usluga i ljepljivaNapomena direktiva.

09. Stvaranje ljepljive bilješke

Sad kad imamo kostur aplikacije AngularJS, počet ćemo graditi značajku stvaranja.

app.controller ('MainCtrl', funkcija ($ opseg, utičnica) {// B.1
$ scope.notes = []; // B.2

// Dolazni
socket.on ('onNoteCreated', funkcija (podaci) {// B.3
$ scope.notes.push (podaci);
});

// Odlazni
$ scope.createNote = function () {// B.4
var note = {
id: novi datum (). getTime (),
naslov: 'Nova bilješka',
body: 'Na čekanju'
};

$ scope.notes.push (bilješka);
socket.emit ('createNote', bilješka);
};

B.1 AngularJS ima ugrađenu značajku ubrizgavanja ovisnosti pa ubrizgavamo a $ opseg objekt i utičnica servis. The $ opseg objekt služi kao ViewModel i u osnovi je JavaScript objekt s uključenim nekim događajima kako bi se omogućilo dvosmjerno vezivanje podataka.

B.2 Izjavljujemo niz u kojem ćemo koristiti vezanje pogleda.

B.3 Dodajemo slušatelja za onNoteCreated događaj na utičnica uslugu i guranje korisnog tereta događaja u $ scope.notes niz.

B.4 Proglasili smo a createNote metoda koja stvara zadani Bilješka objekt i gura ga u $ scope.notes niz. Također koristi utičnica usluga za emitiranje createNote događaj i proći nova nota objekt uz.

Pa kako sada imamo metodu za stvaranje bilješke, kako je nazvati? To je dobro pitanje! U HTML datoteku dodajemo ugrađenu AngularJS direktivu ng-klik na gumb, a zatim dodajte createNote poziv metode kao vrijednost atributa.

button id = "createButton" ng-click = "createNote ()"> Stvori bilješku / gumb>

Vrijeme je za brzi pregled onoga što smo do sada učinili. Dodali smo niz u $ opseg objekt u MainCtrl to će sadržavati sve bilješke za prijavu. Također smo dodali a createNote metoda na $ opseg objekt stvoriti novu lokalnu bilješku, a zatim je poslati ostalim klijentima putem utičnica servis. Također smo dodali slušatelj događaja na utičnica uslugu kako bismo mogli znati kada su drugi klijenti stvorili bilješku kako bismo je mogli dodati u našu kolekciju.

10. Prikazivanje ljepljivih bilješki

Sada imamo mogućnost stvoriti objekt bilješke i podijeliti ga između preglednika, ali kako ga zapravo prikazati? Tu dolaze direktive.

Direktive i njihove zamršenosti velika su tema, ali kratka verzija je da pružaju način za proširivanje elemenata i atributa prilagođenom funkcionalnošću. Direktive su lako moj omiljeni dio o AngularJS-u jer vam omogućuje da u osnovi stvorite čitav DSL (Domain Specific Language) oko svoje aplikacije u HTML-u.

Prirodno je da bismo, budući da ćemo stvarati ljepljive bilješke za naš odbor za suradnju, trebali stvoriti ljepljivaNapomena direktiva. Direktive se definiraju pozivanjem metode direktive na modulu na kojem ga želite prijaviti i prosljeđivanjem imena i funkcije koje vraćaju objekt definicije direktive. Objekt definicije direktive ima mnoštvo mogućih svojstava koja na njemu možete definirati, ali ovdje ćemo upotrijebiti samo nekoliko.

Preporučujem da pogledate dokumentaciju AngularJS kako biste vidjeli cjelokupne popise svojstava koja možete definirati na objektu definicije direktive.

app.directive ('stickyNote', function (socket) {
var linker = funkcija (opseg, element, atributi) {};

var kontroler = funkcija ($ opseg) {};

povratak {
ograniči: 'A', // C.1
veza: povezivač, // C.2
kontroler: kontroler, // C.3
opseg: {// C.4
napomena: ’=’,
ondelete: ‘&’
}
};
});

C.1 Svoju direktivu možete ograničiti na određenu vrstu HTML elementa. Dva najčešća su element ili atribut koji deklarirate pomoću E i A odnosno. Možete ga ograničiti i na CSS klasu ili komentar, ali to nije tako često.

C.2 Funkcija veze je mjesto gdje stavljate sav svoj DOM manipulacijski kôd. Postoji nekoliko iznimaka koje sam pronašao, ali to je uvijek istina (barem 99 posto vremena). Ovo je temeljno osnovno pravilo AngularJS-a i zato sam ga naglasio.

C.3 Funkcija kontrolera radi baš kao i glavni kontroler koji smo definirali za aplikaciju, ali $ opseg objekt koji prenosimo specifičan je za DOM element na kojem direktiva živi.

C.4 AngularJS ima koncept izoliranog opsega, koji vam omogućuje da izričito definirate kako opseg direktive komunicira s vanjskim svijetom. Da nismo proglasili opseg, direktiva bi implicitno naslijedila od roditeljskog opsega s odnosom roditelj-dijete. U puno slučajeva to nije optimalno. Izoliranjem opsega ublažavamo šanse da vanjski svijet može nehotice i negativno utjecati na stanje vaše direktive.

Proglasio sam dvosmjerno vezivanje podataka za Bilješka s = simbol i izraz koji se vežu za ondelete s & simbol. Molimo pročitajte AngularJS dokumentaciju za cjelovito objašnjenje izoliranog opsega jer je to jedna od složenijih tema u okviru.

Pa, dodajmo zapravo ljepljivu bilješku u DOM.

Kao i svaki dobar okvir, AngularJS dolazi s nekim zaista izvrsnim značajkama odmah. Jedna od najprikladnijih karakteristika je ng-ponoviti. Ova AngularJS direktiva omogućuje vam prosljeđivanje niza objekata i duplicira bilo koju oznaku na onoliko puta koliko ima stavki u polju. U slučaju u nastavku, ponavljamo bilješke niz i dupliciranje div element i njegova djeca za duljinu bilješke niz.

div sticky-note ng-repeat = "note in notes" 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 (note)"
> {{note.body}} / textarea>
/ div>

Ljepota ng-ponoviti jest da je vezan za bilo koji niz koji proslijedite i, kada dodate stavku u niz, vaš DOM element automatski će se ažurirati. Možete napraviti ovaj korak dalje i ponoviti ne samo standardne DOM elemente već i druge prilagođene smjernice. Eto zašto vidite ljepljiva bilješka kao atribut na elementu.

Postoje još dva bita prilagođenog koda koja treba razjasniti. Izolirali smo opseg na ljepljive bilješke direktiva o dva svojstva. Prvi je obvezujući definirani izolirani opseg na Bilješka imovine. To znači da će svaki put kada se objekt bilješke promijeni u nadređenom opsegu, automatski ažurirati odgovarajući objekt bilješke u direktivi i obrnuto. Drugi definirani izolirani opseg nalazi se na ondelete atribut. To znači da kada ondelete pozva se u direktivi, pozvat će bilo koji izraz koji je u ondelete atribut na elementu DOM koji instancira direktivu.

Kad se direktiva instancira, ona se dodaje u DOM i poziva se funkcija veze. Ovo je savršena prilika da postavite neka zadana DOM svojstva na element. Parametar elementa koji prosljeđujemo zapravo je objekt jQuery i tako možemo izvršiti jQuery operacije na njemu.

(AngularJS zapravo dolazi s ugrađenom podskupinom jQueryja, ali ako ste već uključili punu verziju jQueryja, AngularJS će to odgoditi.)

app.directive ('stickyNote', function (socket) {
var linker = funkcija (opseg, element, atributi) {
// Neka inicijacija DOM-a da to bude lijepo
element.css ('lijevo', '10px');
element.css ('vrh', '50px');
element.hide (). fadeIn ();
};
});

U gornjem kodu jednostavno postavljamo ljepljivu bilješku na scenu i blijedi je.

11.Brisanje ljepljive bilješke

Dakle, sada kada možemo dodati i prikazati ljepljivu bilješku, vrijeme je da brišemo ljepljive bilješke. Stvaranje i brisanje ljepljivih bilješki pitanje je dodavanja i brisanja predmeta iz niza na koji su bilješke obvezne. Ovo je odgovornost nadređenog opsega za održavanje tog niza, zbog čega zahtjev za brisanje potječemo iz direktive, ali neka roditeljski opseg izvede stvarno dizanje tereta.

Zbog toga smo prošli sve probleme stvaranja izoliranog opsega definiranog izrazom na direktivi: tako da je direktiva mogla interno primiti događaj brisanja i proslijediti ga roditelju na obradu.

Primijetite HTML unutar direktive.

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

Sljedeće što ću reći može se činiti dalekim putem, ali sjetite se da smo na istoj strani i to će imati smisla nakon što razradim. Kad se klikne gumb u gornjem desnom kutu ljepljive ploče, mi zovemo deleteNapomena na kontroloru direktive i predaje bilješka.id vrijednost. Zatim kontroler poziva povratiti, koji zatim izvršava bilo koji izraz koji smo do njega povezali. Zasada je dobro? Pozivamo lokalnu metodu na kontroleru koja je zatim predaje pozivanjem bilo kojeg izraza koji je definiran u izoliranom opsegu. Izraz koji se zove roditelj jednostavno se pozove deleteNapomena također.

app.directive ('stickyNote', function (socket) {
var kontroler = funkcija ($ opseg) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
učinio sam
});
};
};

povratak {
ograniči: „A“,
link: linker,
kontroler: kontroler,
opseg: {
napomena: ’=’,
ondelete: ‘&’
}
};
});

(Kada se koristi izolirani opseg definiran izrazom, parametri se šalju u mapi objekata.)

U nadređenom opsegu, deleteNapomena dobiva poziv i izvršava prilično standardno brisanje pomoću kutni.zaSvakog uslužna funkcija za iteraciju preko polja bilješki. Jednom kada funkcija riješi svoje lokalno poslovanje, ona nastavlja i emitira događaj da bi ostatak svijeta reagirao u skladu s tim.

app.controller ('MainCtrl', funkcija ($ opseg, socket) {
$ scope.notes = [];

// Dolazni
socket.on ('onNoteDeleted', function (data) {
$ scope.deleteNote (data.id);
});

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

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

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

12. Ažuriranje ljepljive bilješke

Napredujemo fantastično! Do sada se nadam da počinjete vidjeti neke obrasce koji nastaju iz ove vrtložne turneje koju vodimo. Sljedeća stavka na popisu je značajka ažuriranja.

Krenut ćemo od stvarnih DOM elemenata i slijediti ih sve do poslužitelja i nazad do klijenta. Prvo moramo znati kada se mijenja naslov ili tijelo ljepljive bilješke. AngularJS obrađuje elemente obrasca kao dio podatkovnog modela, tako da možete brzo povezati dvosmjerno vezivanje podataka. Da biste to učinili, koristite ng-model direktivu i stavite u svojstvo za koje se želite vezati. U ovom ćemo slučaju koristiti bilješka.naslov i napomena.tijelo odnosno.

Kada se bilo koje od ovih svojstava promijeni, želimo uhvatiti te podatke kako bi prošli dalje. To postižemo s ng-promjena direktivu i upotrijebite ga za poziv updateNapomena i proslijedite u sam objekt bilješke. AngularJS provodi vrlo pametne prljave provjere kako bi otkrio je li vrijednost bilo čega ng-model se promijenio, a zatim izvršava izraz koji je u ng-promjena.

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

Naopako korištenje ng-promjena jest da se lokalna transformacija već dogodila i mi smo samo odgovorni za prenošenje poruke. U upravljaču, updateNapomena zove se i odatle ćemo emitirati updateNapomena događaj za naš poslužitelj za prijenos ostalim klijentima.

app.directive ('stickyNote', function (socket) {
var kontroler = funkcija ($ opseg) {
$ scope.updateNote = funkcija (napomena) {
socket.emit (’updateNote’, napomena);
};
};
});

A u upravljaču direktivama slušamo onNoteUpdated događaj da bismo znali kada se bilješka drugog klijenta ažurira kako bismo mogli ažurirati našu lokalnu verziju.

var kontroler = funkcija ($ opseg) {
// Dolazni
socket.on ('onNoteUpdated', function (data) {
// Ažuriranje ako ista bilješka
if (data.id == $ scope.note.id) {

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

13. Premještanje ljepljive bilješke

U ovom trenutku u osnovi smo napravili krug oko CRUD dječjeg bazena i život je dobar! Samo radi trika salona kako biste impresionirali svoje prijatelje, dodati ćemo mogućnost kretanja bilješki po zaslonu i ažuriranje koordinata u stvarnom vremenu. Ne paničarite - to je samo još nekoliko redaka koda. Sav ovaj naporan rad isplatit će se. Obećajem!

Pozvali smo specijalnog gosta, jQueryUI, na zabavu, a sve smo to napravili za povlačenje. Dodavanje mogućnosti lokalnog povlačenja bilješke traje samo jedan redak koda. Ako dodate element.draggable (); na svoju povezničku funkciju počet ćete čuti Survivorovu 'Eye of the Tiger' jer Survivor sada možete povlačiti bilješke.

Želimo znati kada je povlačenje zaustavljeno i zabilježiti nove koordinate koje će proći dalje. jQueryUI su izgradili neki vrlo pametni ljudi, pa kad povlačenje prestane, jednostavno trebate definirati funkciju povratnog poziva za zaustavni događaj. Zgrabimo bilješka.id s područja opsega i lijeve i gornje CSS vrijednosti iz ui objekt. S tim znanjem radimo ono što smo radili cijelo vrijeme: emitiraj!

app.directive ('stickyNote', function (socket) {
var linker = funkcija (opseg, element, atributi) {
element.draggable ({
stop: function (event, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.pozicija.vrh
});
}
});

socket.on ('onNoteMoved', funkcija (podaci) {
// Ažuriraj ako je ista bilješka
if (data.id == scope.note.id) {
element.animate ({
lijevo: data.x,
vrh: podaci.y
});
}
});
};
});

U ovom trenutku ne treba čuditi da također slušamo događaj povezan s premještanjem iz usluge socket. U ovom slučaju to je onNoteMoved događaja i ako se bilješka podudara, tada ažuriramo lijeva i gornja CSS svojstva. Bam! Gotovo!

14. Bonus

Ovo je bonus odjeljak koji ne bih uključio da nisam posve uvjeren da ga možete postići za manje od 10 minuta. Postavit ćemo se na aktivni poslužitelj (još uvijek sam zapanjen koliko je to lako učiniti).

Prvo se morate prijaviti za besplatno testiranje Nodejitsua. Probno je razdoblje besplatno 30 dana, što je savršeno za vlaženje nogu.

Nakon što stvorite svoj račun, morate instalirati jitsu paket, što možete učiniti iz naredbenog retka putem $ npm instaliraj jitsu -g.

Tada se morate prijaviti iz naredbenog retka putem $ jitsu prijava i unesite svoje vjerodajnice.

Utipkajte da ste izravno u svojoj aplikaciji $ jitsu implementacija i zakoračite kroz pitanja. Obično ostavljam što više zadanih zadataka, što znači da svojoj aplikaciji dajem ime, ali ne i poddomenu itd.

I, dragi moji prijatelji, to je sve! URL aplikacije primit ćete iz rezultata poslužitelja nakon što se ona postavi i bude spremna za rad.

15. Zaključak

U ovom smo članku pokrili puno AngularJS-a i nadam se da ste se pritom jako zabavili. Mislim da je stvarno lijepo što možete postići s AngularJS i Socket.io u otprilike 200 redaka koda.

Bilo je nekoliko stvari koje nisam obrađivao radi fokusiranja na glavne točke, ali potičem vas da povučete izvor i poigrate se aplikacijom. Izgradili smo snažne temelje, ali još uvijek postoji mnogo značajki koje biste mogli dodati. Uzmite hakiranje!

Lukas Ruebbelke je tehnološki entuzijast i koautor je AngularJS-a u akciji za popunjavanje publikacija. Najdraže mu je učiniti ljude oduševljene novom tehnologijom kao i on. Vodi korisničku grupu za web-aplikacije Phoenix i s kolegama u zločinu ugostio je više hackathona.

Sviđa li vam se ovo? Pročitajte ovo!

• Kako napraviti aplikaciju
• Naši omiljeni web fontovi - i ne koštaju ni lipe
• Otkrijte što slijedi za proširenu stvarnost
• Preuzmite besplatne teksture: visoke razlučivosti i spremne za upotrebu sada