Tabla za sodelovanje AngularJS s Socket.io

Vsebina

• 01. Strežnik
• 02. Gole kosti
• 03. Prijavite svoje odvisnosti
• 04. Ožičite vtičnico.io
• 05. Zaženite motorje!
• 06. Nekaj ​​iskrenih misli pred nadaljevanjem
• 07. Stranka
• 08. Gole kosti
• 09. Ustvarjanje lepljive note
• 10. Prikaz lepljivih zapiskov
• 11. Brisanje nalepke
• 12. Posodabljanje lepljive note
• 13. Premikanje nalepke
• 14. Bonus
• 15. Zaključek
• Je to všeč? Preberite jih!

• Potrebno znanje: Vmesni JavaScript
• Zahteva: Node.js, NPM
• Čas projekta: 2 uri

AngularJS je še posebej primeren za ustvarjanje bogatih aplikacij na strani odjemalca v brskalniku in ko v mešanico dodate malo Socket.io, postanejo stvari res zanimive. V tem članku bomo ustvarili ploščo za sodelovanje v realnem času, ki uporablja AngularJS za odjemalsko aplikacijo in Socket.io za skupno rabo stanja med vsemi povezanimi odjemalci.

Pokrijmo malo gospodinjstva, preden začnemo. Predvideval bom, da imate osnovno znanje HTML in JavaScript, saj ne bom pokrival vseh majhnih kotičkov kode. Na primer, ne bom klical datotek CSS in JavaScript, ki sem jih vključil v glavo datoteke HTML, saj tam ni novih informacij.

Priporočam vam tudi, da zgrabite kodo z mojega računa GitHub, da ji sledite. Moj dobri prijatelj Brian Ford ima tudi odlično seme Socket.io, na katerem sem temeljil nekaj svojih prvotnih idej.

Štiri glavne značilnosti, ki jih želimo na tabli za sodelovanje, so sposobnost ustvarjanja zapiska, branja zapiskov, posodabljanje zapiska, brisanje zapiska in za zabavo premikanje zapiska na tabli. Da, to je pravilno, osredotočeni smo na standardne funkcije CRUD. Verjamem, da bomo s poudarkom na teh temeljnih lastnostih zajeli dovolj kode, da se bodo pojavili vzorci, da jih boste lahko vzeli in uporabili drugje.

01. Strežnik

Najprej bomo začeli s strežnikom Node.js, saj bo služil kot temelj, na katerem bomo gradili vse ostalo.

Zgradili bomo strežnik Node.js z Express in Socket.io. Razlog, da uporabljamo Express, je ta, da ponuja prijeten mehanizem za nastavitev statičnega strežnika sredstev znotraj Node.js. Express ima veliko izjemnih funkcij, toda v tem primeru ga bomo uporabili za razčlenitev aplikacije med strežnikom in odjemalcem.

(Delujem ob predpostavki, da imate nameščene Node.js in NPM. Hitro iskanje v Googlu vam bo pokazalo, kako jih namestite, če tega ne storite.)

02. Gole kosti

Za gradnjo golih kosti strežnika moramo narediti nekaj stvari, da začnemo delovati.

// app.js

// A.1
var express = require ('express'),
app = express ();
strežnik = zahteva ('http'). createServer (aplikacija),
io = require ('socket.io'). listen (strežnik);

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

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

A.1 Izjavljamo in ustvarjamo primerke za naše module Node.js, da jih bomo lahko uporabili v naši aplikaciji. Deklariramo Express, zaženemo Express in nato ustvarimo strežnik HTTP in vanj pošljemo primerek Express. Od tam naprej ustvarjamo primerke Socket.io in mu sporočamo, naj pazi na primer strežnika.

A.2 Nato govorimo naši aplikaciji Express, naj uporablja naš javni imenik za strežbo datotek.

A.3 Zaženemo strežnik in mu naročimo, naj posluša na vratih 1337.

Do zdaj je bilo to precej neboleče in hitro. Verjamem, da imamo v kodo manj kot 10 vrstic in že imamo delujoč strežnik Node.js. Naprej!

03. Prijavite svoje odvisnosti

// paketi.json
{
"name": "kotna plošča",
"description": "Odbor za sodelovanje AngularJS",
"version": "0.0.1-1",
"private": res,
"odvisnosti": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Ena najlepših lastnosti NPM je zmožnost izjave o vaših odvisnostih v paketi.json in jih nato samodejno namestite prek npm namestite v ukazni vrstici.

04. Ožičite vtičnico.io

Določili smo že osnovne funkcije, ki jih želimo v aplikaciji, zato moramo nastaviti poslušalce dogodkov Socket.io in ustrezno zaporo za obravnavo dogodka za vsako operacijo.

V spodnji kodi boste opazili, da gre v bistvu za konfiguracijo poslušalcev dogodkov in povratnih klicev. Prvi dogodek je povezavo dogodek, ki ga uporabljamo za povezovanje drugih naših dogodkov v zaključku.

io.sockets.on ('povezava', funkcija (vtičnica) {
socket.on ('createNote', funkcija (podatki) {
socket.broadcast.emit ('onNoteCreated', podatki);
});

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

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

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

Od tu dodajamo poslušalce createNote, updateOpomba, deleteOpomba in moveOpomba. In v funkciji povratnega klica preprosto predvajamo, kateri dogodek se je zgodil, tako da je lahko vsaka stranka, ki posluša, obveščena, da se je dogodek zgodil.

O funkcijah povratnega klica v posameznih obravnavalcih dogodkov je vredno opozoriti. Ena, če želite poslati dogodek vsem drugim, razen odjemalcu, ki je oddajal dogodek, ki ste ga vstavili oddaja pred oddajajo klic funkcije. Drugič, koristni dogodek preprosto posredujemo zainteresiranim, da ga lahko obdelajo, kot se jim zdi primerno.

05. Zaženite motorje!

Zdaj, ko smo definirali odvisnosti in aplikacijo Node.js nastavili s pooblastili Express in Socket.io, je strežnik Node.js inicializirati povsem preprosto.

Najprej namestite odvisnosti Node.js tako:

npm namestite

In potem zaženete strežnik takole:

vozlišče app.js

In potem! Pojdite na ta naslov v brskalniku. Bam!

06. Nekaj ​​iskrenih misli pred nadaljevanjem

Jaz sem predvsem razvijalec frontenda in sprva sem bil nekoliko ustrašen, ko sem na svojo aplikacijo priklopil strežnik Node.js. Del AngularJS je bil hiter, a JavaScript na strani strežnika? V čakalno vrsto postavite grozljivo glasbo.

Toda popolnoma sem se zalotil, ko sem ugotovil, da lahko v samo nekaj vrsticah kode nastavim statični spletni strežnik in v nekaj drugih vrsticah uporabljam Socket.io za obdelavo vseh dogodkov med brskalniki. In to je bil še vedno samo JavaScript! Zaradi pravočasnosti pokrivamo le nekaj funkcij, vendar upam, da boste do konca članka videli, da je enostavno plavati - in globok konec bazena ni tako strašen.

07. Stranka

Zdaj, ko imamo trdne temelje s strežnikom, pojdimo na moj najljubši del - stranko! Za del, ki ga je mogoče povleči, bomo uporabili AngularJS, jQueryUI in Twitter Bootstrap za osnovo sloga.

08. Gole kosti

Glede na osebne nastavitve, ko zaženem novo aplikacijo AngularJS, rad hitro določim najnižji minimum, za katerega vem, da ga bom moral začeti, in nato začnem čim hitreje ponavljati.

Vsako aplikacijo AngularJS je treba zagnati z vsaj enim prisotnim krmilnikom, zato na tem mestu vedno začnem.

Če želite aplikacijo samodejno zagnati, jo preprosto dodajte ng-app do vozlišča HTML, v katerem želite, da aplikacija živi. Večino časa bo dodajanje oznake HTML povsem sprejemljivo. Dodala sem tudi atribut ng-app povedati, da želim uporabiti app modul, ki ga bom opredelil v trenutku.

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

Vem, da bom potreboval vsaj enega krmilnika, zato bom to poklical z uporabo ng-krmilnik in mu dodeli lastnost MainCtrl.

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

Zdaj smo na modulu z imenom app in krmilnik z imenom MainCtrl. Ustvarimo jih zdaj.

Ustvarjanje modula je dokaj enostavno. Določite jo s klicem kotni.modul in mu dal ime. Za nadaljnjo referenco je drugi parameter praznega polja, kjer lahko vbrizgate podmodule za uporabo v aplikaciji. Izven obsega te vadnice je, vendar je priročen, ko začne vaša aplikacija naraščati v zapletenosti in potrebah.

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

Razglasili bomo nekaj praznih ograd v app modul, ki se začne z MainCtrl spodaj.Vse bomo izpolnili kasneje, vendar sem želel ponazoriti osnovno strukturo od začetka.

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

Funkcijo Socket.io bomo zavili tudi v vtičnica storitev, tako da lahko enkapsuliramo ta predmet in ga ne pustimo lebdeti v globalnem imenskem prostoru.

app.factory ('vtičnica', funkcija ($ rootScope) {});

In medtem ko smo pri tem, bomo razglasili direktivo, imenovano samolepilni listič ki ga bomo uporabili za vključitev funkcije lepljive note v.

app.directive ('stickyNote', funkcija (vtičnica) {});

Preglejmo torej, kaj smo storili do zdaj. Z uporabo smo zagnali aplikacijo ng-app in v HTML razglasil naš krmilnik aplikacij. Določili smo tudi aplikacijski modul in ustvarili MainCtrl krmilnik, vtičnica storitev in samolepilni listič direktive.

09. Ustvarjanje lepljive note

Zdaj, ko imamo vzpostavljeno okostje aplikacije AngularJS, bomo začeli graditi funkcijo ustvarjanja.

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

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

// Odhodni
$ scope.createNote = function () {// B.4
var note = {
id: nov datum (). getTime (),
naslov: 'Nova opomba',
body: 'V čakanju'
};

$ scope.notes.push (opomba);
socket.emit ('createNote', opomba);
};

B.1 AngularJS ima vgrajeno funkcijo vbrizgavanja odvisnosti, zato vbrizgamo a $ obseg predmet in vtičnica storitev. The $ obseg object služi kot ViewModel in je v bistvu objekt JavaScript, v katerega so vpeti nekateri dogodki, ki omogočajo dvosmerno vezavo podatkov.

B.2 Izjavljamo matriko, v katero bomo vezali pogled.

B.3 Dodajamo poslušalca za onNoteCreated dogodek na vtičnica storitev in potiskanje koristnega tovora dogodka v $ scope.notes matriko.

B.4 Razglasili smo a createNote metoda, ki ustvari privzeto Opomba predmet in ga potisne v $ scope.notes matriko. Uporablja tudi vtičnica storitev za oddajanje createNote dogodek in prenesite nova opomba predmet skupaj.

Torej, kako imamo način za ustvarjanje zapiska, kako ga lahko imenujemo? To je dobro vprašanje! V datoteko HTML dodamo vgrajeno direktivo AngularJS ng-klik na gumb in nato dodajte createNote klic metode kot vrednost atributa.

button id = "createButton" ng-click = "createNote ()"> Ustvari opombo / gumb>

Čas je za hiter pregled tega, kar smo naredili do zdaj. Matriki smo dodali matriko $ obseg predmet v MainCtrl to bo vse opombe k prijavi. Dodali smo tudi a createNote metoda na $ obseg ustvari novo lokalno opombo in jo nato pošlje drugim odjemalcem prek vtičnica storitev. Na. Smo dodali tudi poslušalca dogodkov vtičnica storitev, tako da lahko vemo, kdaj so druge stranke ustvarile zapisek, da ga lahko dodamo v svojo zbirko.

10. Prikaz lepljivih zapiskov

Zdaj imamo možnost ustvariti predmet opombe in ga deliti med brskalniki, toda kako ga dejansko prikažemo? Tu pridejo direktive.

Direktive in njihove zapletenosti so obsežna tema, vendar je kratka različica ta, da omogočajo razširitev elementov in atributov s funkcijo po meri. Direktive so moj najljubši del o AngularJS, ker vam omogoča, da v bistvu ustvarite celoten DSL (Domain Specific Language) okoli svoje aplikacije v HTML-ju.

Seveda je, ker bomo ustvarjali lepljive zapiske za naš odbor za sodelovanje, morali ustvariti samolepilni listič direktive. Direktive se definirajo tako, da se pri modulu, za katerega ga želite prijaviti, prikliče metoda metode in posredujejo ime in funkcija, ki vrne objekt definicije direktive. Objekt definicije direktive ima veliko možnih lastnosti, ki jih lahko definirate na njem, vendar jih bomo tukaj uporabili le nekaj.

Priporočam, da si ogledate dokumentacijo AngularJS in si ogledate celotne sezname lastnosti, ki jih lahko definirate v objektu definicije direktive.

app.directive ('stickyNote', funkcija (vtičnica) {
var linker = funkcija (obseg, element, atributi) {};

var krmilnik = funkcija ($ obseg) {};

vrni {
omeji: 'A', // C.1
povezava: povezovalec, // C.2
krmilnik: krmilnik, // C.3
obseg: {// C.4
opomba: '=',
ondelete: '&'
}
};
});

C.1 Svojo direktivo lahko omejite na določeno vrsto elementa HTML. Najpogostejša sta element ali atribut, ki ga prijavite z uporabo E in A oz. Lahko ga omejite tudi na razred CSS ali komentar, vendar ti niso tako pogosti.

C.2 Funkcija povezave je mesto, kamor vstavite vso svojo manipulacijsko kodo DOM. Nekaj ​​izjem sem našel, vendar to vedno drži (vsaj 99 odstotkov časa). To je temeljno osnovno pravilo AngularJS in zato sem ga poudaril.

C.3 Funkcija krmilnika deluje tako kot glavni krmilnik, ki smo ga določili za aplikacijo, vendar $ obseg predmet, ki ga predajamo, je značilen za element DOM, od katerega direktiva živi.

C.4 AngularJS ima koncept izoliranega obsega, ki vam omogoča, da izrecno določite, kako področje uporabe direktive komunicira z zunanjim svetom. Če ne bi razglasili področja uporabe, bi direktiva implicitno podedovala od nadrejenega področja uporabe z razmerjem starš-otrok. V veliko primerih to ni optimalno. Z izolacijo področja uporabe zmanjšujemo možnosti, da lahko zunanji svet nenamerno in negativno vpliva na stanje vaše direktive.

Razglasil sem dvosmerno vezavo podatkov na Opomba z = simbol in izraz, ki je vezan na ondelete z & simbol. Prosimo, preberite dokumentacijo AngularJS za popolno razlago izoliranega področja uporabe, saj je ena izmed bolj zapletenih tem v okviru.

Torej, dejansko dodajte opombo v DOM.

Kot vsak dober okvir ima tudi AngularJS nekaj res odličnih funkcij že takoj. Ena najprimernejših lastnosti je ng-ponovitev. Ta direktiva AngularJS vam omogoča, da posredujete niz predmetov in podvoji katero koli oznako, na kateri je, tolikokrat, kolikor je elementov v matriki. V spodnjem primeru se ponavljamo nad opombe matriko in podvajanje div element in njegovi podrejeni elementi za dolžino opombe matriko.

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>

Lepota ng-ponovitev je, da je vezan na poljubno polje, ki ga vnesete, in ko elementu dodate element, se bo element DOM samodejno posodobil. To lahko naredite še korak dlje in ponovite ne samo standardne elemente DOM, temveč tudi druge direktive po meri. Zato vidite samolepilni listič kot atribut na elementu.

Obstajata še dva dela kode po meri, ki ju je treba pojasniti. Obseg smo izolirali na lepljive opombe direktivi o dveh lastnostih. Prvi je zavezujoče določen izoliran obseg na Opomba lastnine. To pomeni, da bo vsakič, ko se objekt opombe spremeni v nadrejenem obsegu, samodejno posodobil ustrezni objekt opombe v direktivi in ​​obratno. Drugi opredeljeni izolirani obseg je na ondelete atribut. To pomeni, da kdaj ondelete se pokliče v direktivi, pokliče se kateri koli izraz v ondelete atribut na elementu DOM, ki ustvari direktivo.

Ko je direktiva instantirana, se doda v DOM in pokliče se funkcija povezave. To je odlična priložnost za nastavitev nekaterih privzetih lastnosti DOM za element. Parameter elementa, ki ga posredujemo, je pravzaprav objekt jQuery, zato lahko nad njim izvajamo operacije jQuery.

(AngularJS dejansko prihaja z vgrajeno podmnožico jQuery, če pa ste že vključili celotno različico jQuery, se bo AngularJS temu odložil.)

app.directive ('stickyNote', funkcija (vtičnica) {
var linker = funkcija (obseg, element, atributi) {
// Nekaj ​​iniciacije DOM, da bi bilo lepo
element.css ('levo', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

V zgornji kodi preprosto postavimo lepljivo noto na oder in jo zbledi.

11. Brisanje nalepke

Zdaj, ko lahko dodamo in prikažemo lepljivo opombo, je čas, da jo odstranimo. Ustvarjanje in brisanje samolepilnih zapiskov je stvar dodajanja in brisanja elementov iz polja, na katerega so zapiski vezani. To je odgovornost nadrejenega obsega, da vzdržuje to matriko, zato zahteva za brisanje izviramo iz direktive, vendar naj nadrejeni obseg dejansko dvigne težke dele.

Zato smo šli skozi vse težave pri ustvarjanju izraza, ki je v direktivi definiral izoliran obseg: tako je lahko direktiva interno sprejela dogodek delete in ga predala nadrejenemu v obdelavo.

Upoštevajte HTML znotraj direktive.

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

Že naslednja stvar, ki jo bom rekel, se morda zdi daleč naokoli, vendar ne pozabite, da smo na isti strani in bo smiselno, ko bom podrobneje razložil. Ko kliknemo gumb v zgornjem desnem kotu nalepke, pokličemo deleteOpomba na krmilnik direktive in predajo note.id vrednost. Nato krmilnik pokliče ondelete, ki nato izvrši kateri koli izraz, ki smo ga ožičili. Zaenkrat dobro? Kličemo lokalno metodo na krmilniku, ki jo nato preda tako, da pokliče kateri koli izraz, ki je bil definiran v izoliranem obsegu. Izraz, ki se pokliče na nadrejenem, je preprosto poklican deleteOpomba prav tako.

app.directive ('stickyNote', funkcija (vtičnica) {
var krmilnik = funkcija ($ obseg) {
$ scope.deleteNote = funkcija (id) {
$ scope.ondelete ({
jaz sem
});
};
};

vrni {
omeji: 'A',
povezava: povezovalec,
krmilnik: krmilnik,
Obseg: {
opomba: '=',
ondelete: '&'
}
};
});

(Pri uporabi izoliranega obsega, definiranega z izrazom, se parametri pošljejo v zemljevid objekta.)

V nadrejenem obsegu deleteOpomba pokliče in naredi dokaj standardno brisanje z uporabo kotna.za vsakega pripomoček za iteracijo po zapisu. Ko funkcija opravi svoje lokalno poslovanje, nadaljuje in odda dogodek, da se preostali svet ustrezno odzove.

app.controller ('MainCtrl', funkcija ($ obseg, vtičnica) {
$ scope.notes = [];

// Dohodno
socket.on ('onNoteDeleted', funkcija (podatki) {
$ scope.deleteNote (data.id);
});

// Odhodni
$ scope.deleteNote = funkcija (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. Posodabljanje lepljive note

Fantastično napredujemo! Zdaj upam, da že začenjate opazovati nekaj vzorcev, ki izhajajo iz te vrtinčne turneje, ki jo vodimo. Naslednji element na seznamu je funkcija posodobitve.

Začeli bomo z dejanskimi elementi DOM in mu sledili vse do strežnika in nazaj do odjemalca. Najprej moramo vedeti, kdaj se spremeni naslov ali besedilo nalepke. AngularJS obravnava elemente obrazca kot del podatkovnega modela, tako da lahko v trenutku priklopite dvosmerno vezavo podatkov. Za to uporabite ng-model direktivo in vnesite lastnost, na katero se želite vezati. V tem primeru bomo uporabili opomba.naslov in note.body oz.

Ko se katera od teh lastnosti spremeni, želimo te podatke zajeti, da jih posredujemo naprej. To dosežemo z ng-sprememba direktivo in jo uporabite za klicanje updateOpomba in posredujte sam objekt note. AngularJS naredi zelo pametno preverjanje umazanije, da ugotovi, ali je vrednost ničesar ng-model se je spremenil in nato izvede izraz, ki je v ng-sprememba.

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

Navzgor uporabe ng-sprememba je, da se je lokalna preobrazba že zgodila in smo samo odgovorni za posredovanje sporočila. V krmilniku, updateOpomba in od tam bomo oddali updateOpomba dogodek, ki ga bo naš strežnik predvajal drugim strankam.

app.directive ('stickyNote', funkcija (vtičnica) {
var krmilnik = funkcija ($ obseg) {
$ scope.updateNote = funkcija (opomba) {
socket.emit ('updateNote', opomba);
};
};
});

In v krmilniku direktiv poslušamo onNoteUpdated dogodek, da vemo, kdaj se je posodobila opomba druge stranke, da bomo lahko posodobili svojo lokalno različico.

var krmilnik = funkcija ($ obseg) {
// Dohodno
socket.on ('onNoteUpdated', funkcija (podatki) {
// Posodobi, če ista opomba
če (data.id == $ scope.note.id) {

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

13. Premikanje nalepke

Na tej točki smo v bistvu naredili krog okoli otroškega bazena CRUD in življenje je dobro! Samo zaradi trika v salonu, da bi naredili vtis na svoje prijatelje, bomo dodali možnost premikanja zapiskov po zaslonu in posodabljanje koordinat v realnem času. Brez panike - to je le še nekaj vrstic kode. Vse to trdo delo se bo obrestovalo. Obljubim!

Na zabavo smo povabili posebnega gosta jQueryUI in vse smo naredili za vlečne predmete. Če dodate možnost lokalnega povlečenja zapiska, je potrebna le ena vrstica kode. Če dodate element.draggable (); na svojo povezovalno funkcijo boste začeli slišati 'Eye of the Tiger' avtorja Survivor, ker lahko zdaj svoje zapiske povlečete naokrog.

Zanima nas, kdaj se je vlečenje ustavilo, in zajeti nove koordinate, ki jih bomo nadaljevali. jQueryUI so zgradili nekateri zelo pametni ljudje, zato morate, ko se vlečenje ustavi, preprosto določiti funkcijo povratnega klica za dogodek zaustavitve. Zagrabimo note.id izklopite objekt obsega ter levo in zgornjo vrednost CSS iz ui predmet. S tem znanjem počnemo to, kar smo počeli ves čas: oddajamo!

app.directive ('stickyNote', funkcija (vtičnica) {
var linker = funkcija (obseg, element, atributi) {
element.draggable ({
stop: funkcija (dogodek, uporabniški vmesnik) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', funkcija (podatki) {
// Posodobi, če ista opomba
če (data.id == scope.note.id) {
element.animate ({
levo: data.x,
zgoraj: podatki.y
});
}
});
};
});

Na tej točki ne bi smelo biti presenečenje, da poslušamo tudi dogodek, povezan s selitvijo, iz storitve vtičnice. V tem primeru je onNoteMoved dogodek in če se opomba ujema, posodobimo levo in zgornjo lastnost CSS. Bam! Končano!

14. Bonus

To je bonusni odsek, ki ga ne bi vključil, če nisem popolnoma prepričan, da ga lahko dosežete v manj kot 10 minutah. Uvedli bomo strežnik v živo (še vedno sem presenečen, kako enostavno je to narediti).

Najprej se morate prijaviti na brezplačno preskusno različico Nodejitsu. Preizkus je 30 dni brezplačen, kar je kot nalašč za namakanje nog.

Ko ustvarite svoj račun, morate namestiti paket jitsu, kar lahko storite iz ukazne vrstice prek $ npm namestite jitsu -g.

Nato se morate prijaviti iz ukazne vrstice prek $ jitsu prijava in vnesite svoje poverilnice.

Prepričajte se, da ste neposredno v aplikaciji, vnesite $ jitsu razmestitev in stopite skozi vprašanja. Običajno pustim čim več privzetih vrednosti, kar pomeni, da svoji aplikaciji dam ime, ne pa tudi poddomene itd.

Dragi moji prijatelji, to je vse! Ko je strežnik razvit in je pripravljen za uporabo, boste do URL-ja aplikacije prišli iz izhoda strežnika.

15. Zaključek

V tem članku smo obravnavali veliko tem AngularJS in upam, da ste se pri tem zelo zabavali. Mislim, da je zelo lepo, kaj lahko z AngularJS in Socket.io dosežete v približno 200 vrsticah kode.

Nekaj ​​stvari nisem pokril, da bi se osredotočil na glavne točke, vendar vas spodbujam, da povlečete vir in se poigrate z aplikacijo. Zgradili smo trdne temelje, vendar lahko še vedno dodate veliko funkcij. Pojdi na hekanje!

Lukas Ruebbelke je tehnološki navdušenec in je soavtor AngularJS in Action for Manning Publications. Njegova najljubša stvar je, da ljudi tako navduši nad novo tehnologijo, kot je on. Vodi skupino uporabnikov spletne aplikacije Phoenix in je s svojimi partnerji v zločinih gostil več hackathonov.

Je to všeč? Preberite jih!

• Kako narediti aplikacijo
• Naše najljubše spletne pisave - in ne stanejo niti centa
• Odkrijte, kaj sledi za razširjeno resničnost
• Prenesite brezplačne teksture: visoka ločljivost in pripravljeni za uporabo zdaj