AngularJS együttműködési tábla a Socket.io-val

Tartalom

• 01. A szerver
• 02. A csupasz csontok
• 03. Nyújtsa be függőségeit
• 04. Csatlakoztassa a Socket.io szoftvert
• 05. Indítsa el motorjait!
• 06. Néhány őszinte gondolat, mielőtt továbblépnénk
• 07. Az ügyfél
• 08. A csupasz csontok
• 09. Öntapadó jegyzet készítése
• 10. A cetlik megjelenítése
• 11. Öntapadó jegyzet törlése
• 12. A cetlik frissítése
• 13. cetlik mozgatása
• 14. A bónusz
• 15. Következtetés
• Tetszett ez? Olvassa el ezeket!

• Szükséges tudás: Közbenső JavaScript
• Igényel: Node.js, NPM
• Projekt idő: 2 óra

Az AngularJS különösen alkalmas gazdag kliensoldali alkalmazások létrehozására a böngészőben, és amikor egy kis Socket.io fájlt ad hozzá a keverékhez, a dolgok nagyon érdekessé válnak. Ebben a cikkben egy valós idejű együttműködési táblát fogunk építeni, amely az AngularJS-t használja a kliensoldali alkalmazáshoz és a Socket.io-t az összes csatlakoztatott kliens közötti állapot megosztásához.

Fedezzünk fel egy kis háztartást, mielőtt nekilátnánk. Feltételezem, hogy alapvető ismerete van a HTML-ben és a JavaScript-ben, mivel nem fogom lefedni a kód minden kis sarkát. Például nem fogom felhívni azokat a CSS és JavaScript fájlokat, amelyeket a HTML fájl fejébe tettem, mivel nincsenek új információk.

Javasolom továbbá, hogy kövesse a GitHub-fiókom kódját. Jó barátomnak, Brian Fordnak is van egy kiváló Socket.io magja, amelyre néhány eredeti ötletemet alapoztam.

A négy fő funkció, amelyet az együttműködési táblán szeretnénk, az a lehetőség, hogy jegyzetet készítsünk, elolvassuk a jegyzeteket, frissítsük a jegyzetet, töröljünk egy jegyzetet, és szórakozásból áthelyezhessünk egy táblát. Igen, ez így van, a CRUD szokásos szolgáltatásaira koncentrálunk. Úgy gondolom, hogy ezekre az alapvető jellemzőkre összpontosítva elegendő kódot fogunk lefedni a minták megjelenéséhez, hogy azokat el tudja vinni és másutt is alkalmazhatja.

01. A szerver

Először a Node.js szerverrel fogunk kezdeni, mivel ez lesz az alapja annak, hogy minden mást fel fogunk építeni.

Node.js szervert fogunk építeni az Express és a Socket.io szolgáltatásokkal. Az Express használatának oka az, hogy szép mechanizmust biztosít a statikus eszközszerver beállításához a Node.js-en belül. Az Express egy csomó igazán fantasztikus funkcióval rendelkezik, de ebben az esetben azt fogjuk használni, hogy az alkalmazást tisztán kettévágjuk a szerver és az ügyfél között.

(Feltételezem, hogy telepítve van a Node.js és az NPM. A gyors Google-keresés megmutatja, hogyan lehet ezeket telepíteni, ha nem.)

02. A csupasz csontok

Tehát a szerver csupasz csontjainak felépítéséhez néhány dolgot meg kell tennünk a működésbe lépéshez.

// app.js

A.1
var express = igény (’express’),
app = express ();
szerver = igény (’http’). createServer (alkalmazás),
io = igényel (’socket.io’). hallgat (szerver);

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

A.3
szerver.listen (1337);

A.1 Nyilatkozunk és példányosítjuk Node.js moduljainkat, hogy felhasználhassuk őket az alkalmazásunkban. Deklaráljuk az Express-t, példányosítjuk az Express-t, majd létrehozunk egy HTTP-kiszolgálót, és az Express-példányba küldjük azt. Innentől kezdve a Socket.io-t példányosítjuk, és azt mondjuk neki, hogy tartsa szemmel a szerver példányunkat.

A.2 Ezután azt mondjuk az Express alkalmazásunknak, hogy a nyilvános könyvtárunkat használja a fájlok kiszolgálására.

A.3 Elindítjuk a szervert, és megadjuk neki, hogy hallgasson a porton 1337.

Eddig ez elég fájdalommentes és gyors volt. Úgy gondolom, hogy kevesebb, mint 10 sor van a kódban, és már van egy funkcionális Node.js szerverünk. Tovább!

03. Nyújtsa be függőségeit

// csomagok.json
{
"name": "szögletes kollaborációs tábla",
"description": "AngularJS Együttműködési Testület",
"verzió": "0.0.1-1",
"privát": igaz,
"függőségek": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Az NPM egyik legszebb tulajdonsága az a képesség, hogy deklarálhatja a függőségeit a csomagok.json fájlt, majd automatikusan telepíti őket a npm telepítés a parancssorban.

04. Csatlakoztassa a Socket.io szoftvert

Az alkalmazásban már meghatároztuk a kívánt alapvető funkciókat, ezért be kell állítanunk a Socket.io eseményhallgatókat és egy megfelelő lezárást az esemény kezeléséhez az egyes műveletekhez.

Az alábbi kódban észreveszi, hogy ez lényegében az esemény hallgatók és visszahívások konfigurációja. Az első esemény a kapcsolat esemény, amellyel a lezárás során bekötjük a többi eseményünket.

io.sockets.on (’kapcsolat’, function (socket) {
socket.on (’createNote’, függvény (adatok) {
socket.broadcast.emit (’onNoteCreated’, adatok);
});

socket.on (’updateNote’, függvény (adatok) {
socket.broadcast.emit (’onNoteUpdated’, adatok);
});

socket.on (’deleteNote’, függvény (adatok) {
socket.broadcast.emit (’onNoteDeleted’, adatok);
});

socket.on (’moveNote’, függvény (adatok) {
socket.broadcast.emit (’onNoteMoved’, adatok);
});
});

Innen felvesszük a hallgatókat createNote, updateNote, deleteNote és moveMegjegyzés. A visszahívási funkcióban pedig egyszerűen közvetítjük, hogy mi történt, hogy minden ügyfelet értesítsünk arról, hogy az esemény megtörtént.

Néhány dologra érdemes felhívni a figyelmet az egyes eseménykezelők visszahívási funkcióival kapcsolatban. Az egyik, ha mindenkinek szeretne eseményt küldeni, kivéve a kliensnek, aki kiadta az Ön által beillesztett eseményt adás előtte kibocsát függvényhívás. Másodszor, egyszerűen továbbadjuk az esemény hasznos terhelését az érdekelt feleknek, hogy azok a saját belátásuk szerint feldolgozhassák.

05. Indítsa el motorjait!

Most, hogy meghatároztuk függőségeinket, és beállítottuk Node.js alkalmazásunkat az Express és a Socket.io képességekkel, meglehetősen egyszerű a Node.js szerver inicializálása.

Először telepítse a Node.js függőségeket, így:

npm telepítés

És akkor a következő módon indítja el a szervert:

csomópont app.js

És akkor! Erre a címre lép a böngészőjében. Bam!

06. Néhány őszinte gondolat, mielőtt továbblépnénk

Elsősorban egy frontend fejlesztő vagyok, és kezdetben kissé megfélemlítettem, hogy egy Node.js szervert csatlakoztassak az alkalmazásomhoz. Az AngularJS rész egy pillanat alatt, de szerveroldali JavaScript volt? Állítsa be a hátborzongató zenét egy horrorfilmből.

De teljesen felkészültem arra, hogy felfedezhessek egy statikus webszervert néhány kódsorban, és még néhány sorban használjam a Socket.io-t a böngészők közötti összes esemény kezelésére. És ez továbbra is csak a JavaScript volt! Az időszerűség kedvéért csak néhány funkcióval foglalkozunk, de remélem, hogy a cikk végére meglátja, hogy könnyű úszni - és a medence mély vége nem is olyan ijesztő.

07. Az ügyfél

Most, hogy megvan a szilárd alapunk a szerverünkkel, térjünk át a kedvenc részemre - az ügyfélre! Az AngularJS-t, a jQueryUI-t fogjuk használni a húzható részhez és a Twitter Bootstrap-et egy stílusalaphoz.

08. A csupasz csontok

Személyes preferenciákként, amikor új AngularJS alkalmazást indítok, szeretném gyorsan meghatározni azt a minimumot, amelyről tudom, hogy az induláshoz szükségem lesz, majd a lehető leggyorsabban el kell kezdeni az iterációt.

Minden AngularJS alkalmazást rendszerindítással kell ellátni, legalább egy vezérlő jelenlétével, így általában mindig itt kezdem.

Az alkalmazás automatikus rendszerbetöltéséhez egyszerűen hozzá kell adnia ng-app HTML csomópontra, amelyben az alkalmazást élni szeretné. Legtöbbször a HTML-címkéhez való hozzáadás tökéletesen elfogadható lesz. Attribútummal is kiegészítettem ng-app hogy elmondjam neki, hogy a kb modul, amelyet csak egy pillanat alatt definiálok.

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

Tudom, hogy legalább egy vezérlőre lesz szükségem, ezért ezt felhasználva felhívom ng-controller és tulajdonítunk neki egy tulajdonságot MainCtrl.

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

Tehát most egy elnevezett modul horgán állunk kb és egy nevezett vezérlő MainCtrl. Menjünk előre, és hozzuk létre őket most.

A modul létrehozása meglehetősen egyszerű. Hívással határozhatja meg szögletes.modul és nevet ad neki. Jövőbeni felhasználás céljából az üres tömb második paramétere az, ahol az almodulokat injektálhatja az alkalmazásban való használatra. Ez az oktatóanyag kívül esik, de hasznos, ha az alkalmazás bonyolultabbá és igényesebbé válik.

// public / js / cooper.js
var app = szögletes.modul (’app’, []);

Nyilatkozni fogunk néhány üres helyőrzőt a kb -vel kezdődő modul MainCtrl lent.Ezeket később kitöltjük, de már az elejétől kezdve szemléltetni akartam az alapszerkezetet.

app.controller (’MainCtrl’, function ($ hatókör) {});

A Socket.io funkcionalitást a foglalat szolgáltatást, hogy be tudjuk kapszulázni az objektumot, és ne hagyjuk lebegni a globális névtérben.

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

És amíg itt tartunk, úgynevezett irányelvet fogunk deklarálni ragadós cetli amelyet a cetlik funkcionalitásának beágyazására fogunk használni.

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

Tekintsük át tehát, mit tettünk eddig. A rendszerindítóval feltöltöttük az alkalmazást ng-app és deklarálta az alkalmazásvezérlőnket a HTML-ben. Meghatároztuk az alkalmazás modult és létrehoztuk a MainCtrl vezérlő, a foglalat szolgáltatás és a ragadós cetli irányelv.

09. Öntapadó jegyzet készítése

Most, hogy a helyén van az AngularJS alkalmazás csontváza, elkezdjük kiépíteni a létrehozási funkciót.

app.controller (’MainCtrl’, function ($ hatókör, socket) {// B.1
$ hatókör.jegyzetek = []; B.2

// Beérkező
socket.on (’onNoteCreated’, függvény (adatok) {// B.3
$ hatókör.jegyzetek.push (adatok);
});

// Kimenő
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
cím: ’New Note’,
törzs: „függőben”
};

$ hatókör.jegyzetek.push (megjegyzés);
socket.emit (’createNote’, jegyzet);
};

A B.1 AngularJS beépített függőség-injektálási funkcióval rendelkezik, ezért a $ hatókör tárgy és a foglalat szolgáltatás. A $ hatókör Az objektum ViewModel-ként szolgál, és alapvetően egy JavaScript-objektum, amelybe egyes események bele vannak sütve a kétirányú adatbázis-összekapcsolás lehetővé tételére.

B.2 Kijelentjük a tömböt, amellyel a nézetet lekötjük.

B.3 Hozzáadunk egy hallgatót a onNoteCreated esemény a foglalat szolgáltatás és az esemény hasznos terhelésének a $ hatókör.jegyzetek sor.

B.4 Kijelentettük a createNote metódus, amely létrehoz egy alapértelmezettet jegyzet tárgyat és belöki a $ hatókör.jegyzetek sor. Használja a foglalat szolgáltatás kibocsátására createNote esemény, és adja át a új jegyzet objektum mentén.

Tehát most, hogy van módszerünk a jegyzet létrehozására, hogyan hívhatjuk? Ez jó kérdés! A HTML fájlban hozzáadjuk a beépített AngularJS irányelvet ng kattintás a gombra, majd adja hozzá a createNote metódushívás attribútumértékként.

gomb id = "createButton" ng-click = "createNote ()"> Jegyzet / gomb létrehozása>

Ideje egy gyors áttekintés az eddigiekről. Hozzáadtunk egy tömböt a $ hatókör objektum a MainCtrl ez fogja tartani az alkalmazás összes jegyzetét. Hozzáadtuk a createNote módszer a $ hatókör objektumot egy új helyi jegyzet létrehozásához, majd a jegyzet továbbítását a többi ügyfélhez a foglalat szolgáltatás. Egy eseményhallgatót is felvettünk a foglalat szolgáltatást, hogy megtudhassuk, mikor készítettek más ügyfelek jegyzetet, hogy hozzáadhassuk gyűjteményünkhöz.

10. A cetlik megjelenítése

Most már képesek vagyunk létrehozni egy jegyzetobjektumot és megosztani azt a böngészők között, de valójában hogyan jelenítjük meg? Itt jönnek be az irányelvek.

Az irányelvek és azok bonyolultsága óriási téma, de a rövid változat az, hogy lehetőséget nyújtanak az elemek és attribútumok egyéni funkciókkal való kibővítésére. Az irányelvek a kedvenc részem az AngularJS-ről, mivel lehetővé teszik, hogy HTML-ben létrehozzon egy teljes DSL-t (tartományspecifikus nyelv) az alkalmazás körül.

Természetes, hogy mivel cetliket fogunk készíteni az együttműködési fórumunk számára, ezért létre kell hoznunk a ragadós cetli irányelv. Az irányelveket úgy definiáljuk, hogy meghívjuk az irányelv metódust egy deklarálandó modulon, és átadunk egy olyan nevet és függvényt, amely egy direktíva definíciós objektumot ad vissza. Az irányelvdefiníció objektumnak rengeteg lehetséges tulajdonsága van, amelyeket meghatározhat rajta, de itt csak néhányat fogunk használni céljainkra.

Javaslom, hogy nézze meg az AngularJS dokumentációt, hogy megtekintse a tulajdonságok teljes listáját, amelyeket meghatározhat az irányelvdefiníció objektumon.

app.directive (’stickyNote’, function (socket) {
var linker = function (hatókör, elem, attrs) {};

var vezérlő = függvény ($ hatókör) {};

Visszatérés {
korlátozás: ’A’, // C.1
link: linker, // C.2
vezérlő: vezérlő, // C.3
hatókör: {// C.4
megjegyzés: ’=’,
ondelete: ’&’
}
};
});

C.1 Szűkítheti az irányelvét egy bizonyos típusú HTML elemre. A két leggyakoribb elem vagy attribútum, amelyet deklarálva használ E és A illetőleg. Szűkítheti CSS osztályra vagy megjegyzésre is, de ezek nem annyira gyakoriak.

C.2 A link funkció az a hely, ahová az összes DOM-manipulációs kódot beírja. Van néhány kivétel, amelyet találtam, de ez mindig igaz (az esetek legalább 99 százaléka). Ez az AngularJS alapvető alapszabálya, ezért hangsúlyoztam.

C.3 A vezérlő funkció ugyanúgy működik, mint a fő vezérlő, amelyet az alkalmazáshoz definiáltunk, de a $ hatókör az általunk átadott objektum az irányelv által élt DOM elemre jellemző.

C.4. Az AngularJS az elszigetelt hatókör fogalmával rendelkezik, amely lehetővé teszi, hogy egyértelműen meghatározza, hogyan kommunikál egy irányelv hatálya a külvilággal. Ha nem deklaráltuk volna az alkalmazási kört, az irányelv implicit módon örökölte volna a szülő hatóköréből a szülő-gyermek kapcsolatot. Sok esetben ez nem optimális. A hatókör elkülönítésével csökkentjük annak esélyét, hogy a külvilág akaratlanul és hátrányosan befolyásolhatja az Ön irányelvének állapotát.

Kétirányú adat-kötelezőnek nyilvánítottam a következőt: jegyzet a ... val = szimbólum és a kifejezéshez kötődő kifejezés ondelete a ... val & szimbólum. Kérjük, olvassa el az AngularJS dokumentációját az elszigetelt hatókör teljes magyarázatához, mivel ez a keret egyik bonyolultabb témája.

Tehát adjunk hozzá egy cetlit a DOM-hoz.

Mint minden jó keretrendszer, az AngularJS valóban remek funkciókkal rendelkezik, már a dobozból. Az egyik legkézenfekvőbb tulajdonság az ng-ismétlés. Ez az AngularJS irányelv lehetővé teszi egy tömb objektum átadását, és megismétli a címkén lévő címkéket annyiszor, ahány elem van a tömbben. Az alábbi esetben iterálunk a jegyzetek tömb és a div elem és gyermekei a jegyzetek sor.

div sticky-note ng-repeat = "jegyzet a jegyzetekben" note = "note" ondelete = "deleteNote (id)">
gomb típusa = "gomb" ng-click = "deleteNote (note.id)"> × / gomb>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

A szépség ng-ismétlés az, hogy bármilyen tömbhöz van kötve, amelyet átad, és amikor hozzáad egy elemet a tömbhöz, a DOM elem automatikusan frissül. Ezt megteheti egy lépéssel tovább, és megismételheti nemcsak a standard DOM elemeket, hanem más egyedi irányelveket is. Ezért látja ragadós cetli attribútumként az elemen.

Az egyéni kódnak további két bitje van, amelyeket tisztázni kell. Elszigeteltük a hatókört a cetlik irányelv két tulajdonságról. Az első a kötelezően meghatározott, izolált hatókör a jegyzet ingatlan. Ez azt jelenti, hogy amikor a megjegyzésobjektum megváltozik a szülő hatókörében, automatikusan frissíti a megfelelő megjegyzésobjektumot az irányelvben és fordítva. A másik meghatározott elszigetelt hatókör a ondelete tulajdonság. Ez azt jelenti, hogy mikor ondelete nevezzük az irányelvben, akkor bármilyen nevet fog hívni a ondelete attribútum a DOM elemen, amely példányosítja az irányelvt.

Amikor egy irányelv példányos, hozzáadódik a DOM-hoz, és meghívja a link funkciót. Ez kiváló lehetőség néhány alapértelmezett DOM tulajdonság beállítására az elemen. Az elemparaméter, amelyen átadunk, valójában egy jQuery objektum, így jQuery műveleteket hajthatunk végre rajta.

(Az AngularJS valójában a jQuery egy részhalmazával rendelkezik, de ha már hozzáadta a jQuery teljes verzióját, az AngularJS erre halaszt.)

app.directive (’stickyNote’, function (socket) {
var linker = function (hatókör, elem, attrs) {
// Néhány DOM-beavatás, hogy szép legyen
elem.css (’bal’, ’10px’);
elem.css (’top’, ’50px’);
elem.hide (). fadeIn ();
};
});

A fenti kódban egyszerűen elhelyezzük a cetlit a színpadon és elhalványítjuk.

11. Öntapadó jegyzet törlése

Tehát most, hogy felvehetünk és megjeleníthetünk cetlit, itt az ideje törölni a cetliket. A cetlik létrehozása és törlése olyan elemek hozzáadása és törlése a tömbből, amelyekhez a jegyzetek kötve vannak. Ez a szülő hatókörének felelőssége, hogy fenntartsa ezt a tömböt, ezért a törlési kérelmet az irányelv belsejéből eredeztetjük, de hagyjuk, hogy a szülő hatóköre elvégezze a tényleges nehéz emelést.

Éppen ezért átéltük az összes problémát, hogy kifejezést definiáltunk egy elszigetelt hatókörön az irányelven: így az irányelv belsőleg megkapta a törlési eseményt és továbbadhatta a szülőjének feldolgozásra.

Figyelje meg a HTML-t az irányelvben.

gomb típusa = "gomb" ng-click = "deleteNote (note.id)"> × / gomb>

A következő dolog, amit mondani fogok, hosszúnak tűnhet, de ne feledje, hogy ugyanazon az oldalon állunk, és lesz értelme, miután kifejtem. Amikor a cetlik jobb felső sarkában lévő gombra kattintunk, hívjuk deleteNote az irányelv vezérlőjéről és a megjegyzés.id érték. Ezután a vezérlő felhív ondelete, amely aztán bármilyen kifejezést végrehajt, amire bekötöttük. Eddig jó? Helyi metódust hívunk meg a vezérlőn, amely aztán átadja az elkülönített hatókörben definiált kifejezés meghívásával. Az a kifejezés, amelyet felhívnak a szülőre, véletlenül hívják deleteNote is.

app.directive (’stickyNote’, function (socket) {
var vezérlő = függvény ($ hatókör) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
én csináltam
});
};
};

Visszatérés {
korlátozás: ’A’,
link: linker,
vezérlő: vezérlő,
hatókör: {
megjegyzés: ’=’,
ondelete: ’&’
}
};
});

(Kifejezés által meghatározott izolált hatókör használatakor a paraméterek egy objektumtérképen kerülnek elküldésre.)

A szülői körben deleteNote meghívást kap, és meglehetősen szokásos törlést végez a szögletes.mindhez segédprogram függvény a Notes tömbön való iteráláshoz. Miután a funkció kezelte a helyi üzleti tevékenységét, tovább megy, és a világ többi részének kiadja az eseményt, hogy ennek megfelelően reagáljon.

app.controller (’MainCtrl’, function ($ hatókör, socket) {
$ hatókör.jegyzetek = [];

// Beérkező
socket.on (’onNoteDeleted’, függvény (adatok) {
$ scope.deleteNote (data.id);
});

// Kimenő
$ scope.deleteNote = function (id) {
var oldNotes = $ hatókör.jegyzetek,
newNotes = [];

angular.forEach (oldNotes, függvény (megjegyzés) {
if (note.id! == id) newNotes.push (megjegyzés);
});

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

12. A cetlik frissítése

Fantasztikusan haladunk! Mostanra remélem, hogy kezd látni néhány mintát ebből a forgószél turnéból, amelyet mi tartunk. A lista következő eleme a frissítési szolgáltatás.

Kezdjük a tényleges DOM elemekkel, és nyomon követjük egészen a szerverig, majd vissza az ügyfélig. Először tudnunk kell, hogy mikor változik a cetlik címe vagy törzse. Az AngularJS az űrlapelemeket az adatmodell részeként kezeli, így egy pillanat alatt összekapcsolhatja a kétirányú adatkötést. Ehhez használja a ng-modell irányelvet, és tedd be azt a tulajdonságot, amelyhez kötni szeretnél. Ebben az esetben használni fogjuk megjegyzés.cím és megjegyzés.test illetőleg.

Amikor ezek a tulajdonságok megváltoznak, meg akarjuk ragadni az információt, hogy továbbadhassuk őket. Ezt a ng-változás irányelv, és használja a hívásra updateNote és adja át magát a jegyzetobjektumot. Az AngularJS nagyon okosan piszkosan ellenőrzi, hogy kiderül-e bármi értéke ng-modell megváltozott, majd végrehajtja a benne lévő kifejezést ng-változás.

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

A használat előnye ng-változás az, hogy a helyi átalakulás már megtörtént, és csak mi vagyunk felelősek az üzenet továbbításáért. A vezérlőben updateNote hívják, és onnan fogjuk kibocsátani a updateNote esemény, hogy szerverünk közvetíthessen a többi kliens számára.

app.directive (’stickyNote’, function (socket) {
var vezérlő = függvény ($ hatókör) {
$ scope.updateNote = függvény (megjegyzés) {
socket.emit (’updateNote’, megjegyzés);
};
};
});

És az irányelv-vezérlőben a onNoteUpdated esemény, hogy megtudja, mikor frissült egy másik ügyfél jegyzete, hogy frissíteni tudjuk a helyi verziónkat.

var vezérlő = függvény ($ hatókör) {
// Beérkező
socket.on (’onNoteUpdated’, function (adatok) {
// Frissítés, ha ugyanaz a jegyzet
if (data.id == $ hatókör.jegyzet.id) {

$ hatókör.jegyzet.cím = adat.cím;
$ hatókör.jegyzet.test = adat.test;
}
});
};

13. cetlik mozgatása

Ezen a ponton alapvetően megtettünk egy kört a CRUD gyerekmedence körül, és az élet jó! Csak egy szalon trükk kedvéért, hogy lenyűgözze barátait, hozzáadjuk a jegyzetek mozgatását a képernyőn és a koordináták valós idejű frissítését. Ne essen pánikba - ez csak néhány kódsor. Ez a kemény munka megtérül. Ígérem!

Meghívtunk egy különleges vendéget, a jQueryUI-t a buliba, és mindezt megcsináltuk a draggable-okért. A jegyzet helyi áthúzásának hozzáadásához csak egy kódsor szükséges. Ha hozzáteszi elem.húzható (); linker funkciójához elkezdi hallani a Survivor ’Eye of the Tiger’ szavát, mert most már körbehúzhatja a jegyzeteket.

Szeretnénk tudni, mikor állt le a húzás, és rögzítsük az új koordinátákat, amelyek továbbhaladnak. A jQueryUI-t néhány nagyon okos ember készítette, így amikor a húzás leáll, egyszerűen meg kell határoznia egy visszahívási funkciót a stop eseményhez. Fogjuk a megjegyzés.id a hatókör objektumról, valamint a bal és felső CSS értékekről a ui tárgy. Ezzel a tudással azt csináljuk, amit végig csináltunk: bocsáss ki!

app.directive (’stickyNote’, function (socket) {
var linker = function (hatókör, elem, attrs) {
element.draggable ({
stop: függvény (esemény, ui) {
socket.emit (’moveNote’, {
id: hatókör.jegyzet.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (adatok) {
// Frissítés, ha ugyanaz a jegyzet
if (data.id == hatókör.jegyzet.id) {
elem.animate ({
balra: data.x,
top: adatok.y
});
}
});
};
});

Ezen a ponton nem lehet meglepő, hogy a socket szolgáltatásról is költözéssel kapcsolatos eseményeket hallgatunk. Ebben az esetben ez a onNoteMoved esemény, és ha a jegyzet egyezik, akkor frissítjük a bal és a legfelső CSS tulajdonságokat. Bam! Kész!

14. A bónusz

Ez egy olyan bónusz szakasz, amelyet nem vennék fel, ha nem lennék teljesen biztos abban, hogy kevesebb mint 10 perc alatt el tudja érni. Élő szerverre fogunk telepíteni (még mindig csodálkozom, hogy milyen könnyű ezt megtenni).

Először regisztrálnia kell egy ingyenes Nodejitsu próbára. A próbaidő 30 napig ingyenes, ami tökéletes a lábad nedvesítése érdekében.

Miután létrehozta a fiókját, telepítenie kell a jitsu csomagot, amelyet a parancssorból keresztül tehet meg $ npm a jitsu -g telepítése.

Ezután be kell jelentkeznie a parancssorból a következőn keresztül: $ jitsu bejelentkezés és adja meg hitelesítő adatait.

Győződjön meg arról, hogy közvetlenül az alkalmazásában van, írja be $ jitsu bevetése és lépjen végig a kérdéseken. Általában a lehető legtöbbet hagyom az alapértelmezettnek, ami azt jelenti, hogy nevet adok az alkalmazásomnak, de aldomainet nem stb.

És kedves barátaim, csak ennyi van benne! Az alkalmazás URL-jét a kiszolgáló kimenetéből kapja meg, miután telepítette és készen áll a használatra.

15. Következtetés

Ebben a cikkben sok AngularJS területtel foglalkoztunk, és remélem, hogy közben nagyon jól érezte magát. Szerintem nagyon ügyes, amit elérhet az AngularJS és a Socket.io segítségével körülbelül 200 kódsorban.

Néhány dologgal nem foglalkoztam azzal a céllal, hogy a főbb pontokra összpontosítsak, de arra biztatom, hogy húzza le a forrást, és játsszon el az alkalmazással. Erős alapot építettünk, de még mindig sok funkcióval bővítheti. Hackelj!

Lukas Ruebbelke technológiai rajongó, társszerzője az AngularJS in Action for Man Publications. Kedvenc dolga, hogy az embereket annyira izgassa az új technológia, mint ő. Ő vezeti a Phoenix webalkalmazás felhasználói csoportját, és több hackathont is rendezett bűnözéssel küzdő társaival.

Tetszett ez? Olvassa el ezeket!

• Hogyan készítsünk alkalmazást
• Kedvenc webes betűtípusaink - és ezek egy fillérbe sem kerülnek
• Fedezze fel a kibővített valóság következő lépéseit
• Ingyenes textúrák letöltése: nagy felbontású és használatra kész