„AngularJS“ bendradarbiavimo lenta su „Socket.io“

Turinys

• 01. Serveris
• 02. Pliki kaulai
• 03. Paskelbkite savo priklausomybes
• 04. Sujunkite „Socket.io“
• 05. Užveskite savo variklius!
• 06. Kelios atviros mintys prieš einant toliau
• 07. Klientas
• 08. Pliki kaulai
• 09. Lipduko kūrimas
• 10. Lipnių lapelių rodymas
• 11. Ištrinkite lipduką
• 12. Lipduko atnaujinimas
• 13. Lipduko perkėlimas
• 14. Premija
• 15. Išvada
• Jums tai patiko? Perskaitykite tai!

• Reikalingos žinios: Tarpinis „JavaScript“
• Reikalinga: „Node.js“, NPM
• Projekto laikas: 2 valandos

„AngularJS“ ypač gerai tinka kurti turtingas kliento programas naršyklėje, o kai į mišinį įtraukiate šiek tiek „Socket.io“, viskas tampa tikrai įdomu. Šiame straipsnyje mes sukursime realaus laiko bendradarbiavimo lentą, kuri kliento programai naudoja „AngularJS“ ir „Socket.io“, kad dalytųsi būsena tarp visų prijungtų klientų.

Prieš pradėdami, aprėpkime šiek tiek namų tvarkymo. Darau prielaidą, kad jūs iš esmės suprantate HTML ir „JavaScript“, nes neaprėpsiu kiekvieno mažo kodo kampelio. Pavyzdžiui, neketinu skambinti CSS ir „JavaScript“ failų, kuriuos įtraukiau į HTML failo galvutę, nes ten nėra naujos informacijos.

Be to, raginu jus paimti kodą iš savo „GitHub“ paskyros, kad galėtumėte sekti toliau. Mano geras draugas Brianas Fordas taip pat turi puikią „Socket.io“ sėklą, kuria grindžiau kai kurias savo originalias idėjas.

Keturios pagrindinės funkcijos, kurių norime bendradarbiavimo lentoje, yra galimybė sukurti užrašą, skaityti užrašus, atnaujinti užrašą, ištrinti užrašą ir, savo malonumui, perkelti užrašą lentoje. Taip, tai teisinga, mes sutelkėme dėmesį į standartines CRUD funkcijas. Manau, kad sutelkdami dėmesį į šias pagrindines ypatybes, mes užteksime pakankamai kodo, kad modeliai atsirastų, kad galėtumėte juos paimti ir pritaikyti kitur.

01. Serveris

Pirmiausia pradėsime nuo „Node.js“ serverio, nes jis taps pagrindu, kuriuo remsimės visa kita.

Kursime „Node.js“ serverį su „Express“ ir „Socket.io“. Priežastis, kodėl mes naudojame „Express“, yra ta, kad ji yra puikus mechanizmas statinio turto serveriui nustatyti „Node.js“. „Express“ pateikia daugybę nuostabių funkcijų, tačiau šiuo atveju mes ją naudosime, kad programa būtų švariai padalyta tarp serverio ir kliento.

(Aš veikiu darant prielaidą, kad turite įdiegtus „Node.js“ ir „NPM“. Greita „Google“ paieška parodys, kaip juos įdiegti, jei to nepadarėte.)

02. Pliki kaulai

Taigi, norėdami sukurti plikus serverio kaulus, turime padaryti keletą dalykų, kad galėtume pradėti veikti.

// app.js

A.1
var express = reikalauti (’express’),
programa = express ();
serveris = reikalauti (’http’). createServer (programa),
io = reikalauti (’socket.io’). klausytis (serveris);

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

A.3
serveris.klausyk (1337);

A.1 Mes deklaruojame ir greitiname savo „Node.js“ modulius, kad galėtume juos naudoti savo programoje. Mes deklaruojame „Express“, ekspresuojame „Express“, tada kuriame HTTP serverį ir siunčiame „Express“ egzemplioriuje į jį. Iš ten mes išaiškiname „Socket.io“ ir liepiame stebėti mūsų serverio egzempliorių.

A.2 Tada liepiame „Express“ programai naudoti mūsų viešąjį katalogą failams aptarnauti.

A.3 Paleidžiame serverį ir liepiame klausytis uoste 1337.

Iki šiol tai buvo gana neskausminga ir greita. Manau, kad kode esame mažiau nei 10 eilučių ir jau turime funkcinį „Node.js“ serverį. Pirmyn!

03. Paskelbkite savo priklausomybes

// paketai.json
{
"name": "kampinis kolaboratorius",
"description": "AngularJS bendradarbiavimo taryba",
„versija“: „0.0.1-1“,
„privatus“: tiesa,
„priklausomybės“: {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Viena iš gražiausių NPM savybių yra galimybė deklaruoti savo priklausomybę a paketai.json failą ir automatiškai juos įdiegti per npm įdiegti komandinėje eilutėje.

04. Sujunkite „Socket.io“

Mes jau apibrėžėme pagrindines norimas ypatybes programoje, todėl turime nustatyti „Socket.io“ įvykių klausytojus ir atitinkamą uždarymą, kad galėtumėte tvarkyti įvykį kiekvienai operacijai.

Žemiau pateiktame kode pastebėsite, kad tai iš esmės yra įvykių klausytojų ir atgalinių skambučių konfigūracija. Pirmasis įvykis yra ryšį įvykis, kurį mes panaudojame kitiems savo renginiams uždaryti.

io.sockets.on (’connection’, function (socket) {
socket.on (’createNote’, funkcija (duomenys) {
socket.broadcast.emit (’onNoteCreated’, duomenys);
});

socket.on (’updateNote’, funkcija (duomenys) {
socket.broadcast.emit (’onNoteUpdated’, duomenys);
});

socket.on (’deleteNote’, funkcija (duomenys) {
socket.broadcast.emit (’onNoteDeleted’, duomenys);
});

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

Iš čia mes įtraukiame klausytojus createNote, updateNote, deleteNote ir pastabaPastaba. Atgalinio skambučio funkcijoje mes tiesiog transliuojame įvykį, kuris įvyko, kad bet kuris klientas, kuris klausosi, galėtų būti informuotas apie įvykį.

Yra keletas dalykų, kuriuos verta atkreipti dėmesį į atskirų įvykių tvarkytojų atgalinio skambinimo funkcijas. Vienas, jei norite išsiųsti įvykį visiems kitiems, išskyrus klientą, kuris išleido įvykį, kurį įterpėte transliacija prieš skleisti funkcijos iškvietimas. Antra, mes tiesiog perduodame renginio naudingąjį krūvį suinteresuotoms šalims, kad jie galėtų jį apdoroti taip, kaip jiems atrodo tinkama.

05. Užveskite savo variklius!

Apibrėžę savo priklausomybes ir sukūrę „Node.js“ programą naudodami „Express“ ir „Socket.io“ galias, gana paprasta inicializuoti „Node.js“ serverį.

Pirmiausia įdiekite tokias „Node.js“ priklausomybes:

npm įdiegti

Tada paleidžiate serverį taip:

mazgas app.js

Ir tada! Šiuo adresu einate savo naršyklėje. Bam!

06. Kelios atviros mintys prieš einant toliau

Aš pirmiausia esu „frontend“ kūrėjas ir iš pradžių buvau šiek tiek įbaugintas prijungęs „Node.js“ serverį prie savo programos. „AngularJS“ dalis buvo greita, bet serverio pusė „JavaScript“? Eilė šiurpi muzika iš siaubo brūkštelėjimo.

Bet aš buvau visiškai įsitikinęs, kad galiu sukurti statinį žiniatinklio serverį tik keliose kodo eilutėse ir dar keliose eilutėse naudoti „Socket.io“, kad galėtumėte tvarkyti visus įvykius tarp naršyklių. Ir tai vis tiek buvo tik „JavaScript“! Laiku pateikiame tik keletą funkcijų, tačiau tikiuosi, kad iki straipsnio pabaigos pamatysite, kad plaukti yra lengva - o gilus baseino galas nėra toks baisus.

07. Klientas

Dabar, kai turime tvirtą pagrindą savo serveryje, pereikime prie mano mėgstamiausios dalies - kliento! Stiliaus bazei naudosime „AngularJS“, „jQueryUI“ ir „Twitter Bootstrap“.

08. Pliki kaulai

Asmeninių pageidavimų dėka, kai paleidžiu naują „AngularJS“ programą, norėčiau greitai apibrėžti minimumą, kurį žinau, kad reikės pradėti, ir tada kuo greičiau pradėti kartoti.

Kiekviena „AngularJS“ programa turi būti įkelta naudojant bent vieną valdiklį, todėl aš visada ten pradedu.

Norėdami automatiškai paleisti programą, turite ją tiesiog pridėti „ng-app“ į HTML mazgą, kuriame norite, kad programa veiktų. Dažniausiai tai bus visiškai priimtina pridėti prie HTML žymos. Aš taip pat pridėjau atributą „ng-app“ pasakyti jai, kad noriu naudoti programa modulis, kurį apibrėžsiu vos per akimirką.

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

Aš žinau, kad man reikės bent vieno valdiklio, todėl aš jį iškviesiu naudodamasis ng-valdiklis ir priskirti jai nuosavybę „MainCtrl“.

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

Taigi dabar mes esame ant modulio pavadinimo programa ir kontrolierius pavadintas „MainCtrl“. Eikime į priekį ir sukurkime juos dabar.

Kurti modulį yra gana paprasta. Apibrėžkite jį paskambinę kampinis.modulis ir suteikdamas jai vardą. Ateities tikslais antrasis tuščio masyvo parametras yra tas, kur galite švirkšti submodulius naudoti programoje. Tai nepatenka į šios mokymo programos taikymo sritį, tačiau yra patogu, kai jūsų programa tampa vis sudėtingesnė ir labiau reikalinga.

// public / js / cooper.js
var app = kampinis.modulis (’app’, []);

Deklaruosime keletą tuščių vietos rezervavimo ženklų programa modulis, prasidedantis raide „MainCtrl“ žemiau.Viską užpildysime vėliau, bet aš norėjau iliustruoti pagrindinę struktūrą nuo pat pradžių.

app.controller (’MainCtrl’, funkcija ($ sritis) {});

Mes taip pat ketiname apjungti „Socket.io“ funkciją a lizdas paslaugą, kad galėtume apimti tą objektą ir nepalikti jo plūduriuojančio pasaulinėje vardų srityje.

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

Ir kol mes tai įgyvendinsime, mes paskelbsime vadinamą direktyvą lipniPastaba kurį ketiname panaudoti lipdukų funkcijoms.

app.directive (’stickyNote’, funkcija (lizdas) {});

Taigi apžvelkime, ką iki šiol padarėme. Mes paleidome programą naudodami „ng-app“ ir deklaravome mūsų programos valdiklį HTML. Mes taip pat apibrėžėme programos modulį ir sukūrėme „MainCtrl“ valdiklis, lizdas tarnyba ir lipniPastaba direktyvą.

09. Lipduko kūrimas

Dabar, kai turime „AngularJS“ programos griaučius, pradėsime kurti kūrimo funkciją.

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

// Gaunamasis
socket.on (’onNoteCreated’, funkcija (duomenys) {// B.3
$ sritis.notai.push (duomenys);
});

// Išeinantis
$ scope.createNote = function () {// B.4
var pastaba = {
id: nauja data (). getTime (),
pavadinimas: „Nauja pastaba“,
kūnas: „Laukiama“
};

$ sritis.notos.push (pastaba);
socket.emit (’createNote’, pastaba);
};

B.1 „AngularJS“ turi integruotą priklausomybės įpurškimo funkciją, todėl švirkščiame a $ sritis objektas ir lizdas paslaugą. The $ sritis objektas tarnauja kaip „ViewModel“ ir iš esmės yra „JavaScript“ objektas, į kurį įtraukiami kai kurie įvykiai, kad būtų galima įjungti abipusį duomenų susiejimą.

B.2 Deklaruojame masyvą, kurį naudosime susieti vaizdą.

B.3 Pridedame klausytoją onNoteCreated įvykis lizdas paslauga ir renginio naudingosios apkrovos stumimas į $ aprėptis.notai masyvas.

B.4 Mes paskelbėme a createNote metodas, sukuriantis numatytąjį pastaba objektą ir stumia jį į $ aprėptis.notai masyvas. Jis taip pat naudoja lizdas tarnyba skleisti createNote įvykį ir praeiti nauja pastaba objektas kartu.

Taigi dabar, kai turime metodą, kaip sukurti užrašą, kaip jį pavadinsime? Tai geras klausimas! HTML faile pridedame įmontuotą „AngularJS“ direktyvą spustelėkite mygtuką prie mygtuko ir tada pridėkite createNote metodo iškvietimas kaip atributo reikšmė.

mygtukas id = "createButton" ng-click = "createNote ()"> Kurti pastabą / mygtuką>

Laikas greitai apžvelgti, ką iki šiol padarėme. Prie „.“ Pridėjome masyvą $ sritis objektas „MainCtrl“ tai laikys visus programos užrašus. Mes taip pat pridėjome a createNote metodas $ sritis objektas sukurti naują vietinį užrašą ir tada transliuoti tą užrašą kitiems klientams per lizdas paslaugą. Mes taip pat pridėjome įvykių klausytoją lizdas paslaugą, kad galėtume žinoti, kada kiti klientai sukūrė užrašą, kad galėtume jį pridėti prie savo kolekcijos.

10. Lipnių lapelių rodymas

Dabar mes turime galimybę sukurti užrašo objektą ir dalytis juo tarp naršyklių, bet kaip mes jį iš tikrųjų rodome? Čia atsiranda direktyvos.

Direktyvos ir jų sudėtingumas yra didžiulis dalykas, tačiau trumpa versija yra ta, kad jie suteikia galimybę išplėsti elementus ir atributus pritaikytais funkcionalumais. Direktyvos yra mano mėgstamiausia dalis apie „AngularJS“, nes tai leidžia iš esmės sukurti visą DSL (specifinę domeno kalbą) aplink jūsų programą HTML formatu.

Natūralu, kad kadangi sukursime lipdukus savo bendradarbiavimo lentai, turėtume sukurti lipniPastaba direktyvą. Direktyvos apibrėžiamos iškviečiant direktyvos metodą modulyje, kuriame norite jį deklaruoti, ir perduodant pavadinimą bei funkciją, kuri grąžina direktyvos apibrėžimo objektą. Direktyvos apibrėžimo objekte yra daugybė galimų ypatybių, kurias galite apibrėžti, tačiau čia savo tikslams naudosime tik keletą.

Aš rekomenduoju peržiūrėti „AngularJS“ dokumentaciją, kad pamatytumėte visus ypatybių sąrašus, kuriuos galite apibrėžti direktyvos apibrėžimo objekte.

app.directive (’stickyNote’, funkcija (lizdas) {
var linker = funkcija (apimtis, elementas, attrai) {};

var valdiklis = funkcija ($ sritis) {};

grįžti {
apriboti: „A“, // C.1
nuoroda: linkeris, // C.2
valdiklis: valdiklis, // C.3
taikymo sritis: {// C.4
pastaba: ’=’,
ondelete: ’&’
}
};
});

C.1 Galite apriboti savo direktyvą tam tikro tipo HTML elementais. Du dažniausiai pasitaikantys elementai arba atributai, kuriuos deklaruojate naudodami E ir A atitinkamai. Taip pat galite apriboti CSS klasę ar komentarą, tačiau tai nėra taip įprasta.

C.2 Nuorodos funkcija yra vieta, kur įdėsite visą savo DOM manipuliavimo kodą. Yra keletas išimčių, kurias radau, bet tai visada tiesa (bent 99 proc. Laiko). Tai yra pagrindinė „AngularJS“ pagrindinė taisyklė, todėl aš ją ir pabrėžiau.

C.3 Valdiklio funkcija veikia kaip ir pagrindinis valdiklis, kurį nustatėme programai, bet $ sritis objektas, kurį perduodame, yra specifinis DOM elementui, kuriuo gyvena direktyva.

C.4 „AngularJS“ turi izoliuotos taikymo srities sąvoką, kuri leidžia aiškiai apibrėžti, kaip direktyvos taikymo sritis bendrauja su išoriniu pasauliu. Jei nebūtume deklaravę taikymo srities, direktyva būtų netiesiogiai paveldėta iš tėvų srities su tėvų ir vaikų santykiais. Daugeliu atvejų tai nėra optimalu. Izoliuodami taikymo sritį, sumažiname tikimybę, kad išorinis pasaulis gali netyčia ir neigiamai paveikti jūsų direktyvos būklę.

Aš paskelbiau, kad dvipusis duomenų įpareigojimas pastaba su = simbolis ir išraiška, privaloma ondelete su & simbolis. Perskaitykite „AngularJS“ dokumentaciją, jei norite išsamiai paaiškinti izoliuotą taikymo sritį, nes tai yra vienas iš sudėtingesnių sistemos dalykų.

Taigi iš tikrųjų pridėkime lipnią pastabą prie DOM.

Kaip ir bet kuris geras pagrindas, „AngularJS“ turi tikrai puikių funkcijų iš karto. Viena iš patogiausių savybių yra ng-pakartoti. Ši „AngularJS“ direktyva leidžia perduoti objektų masyvą ir ji pakartoja bet kokią žymą tiek kartų, kiek yra masyvo elementų. Toliau nurodytu atveju kartojame Pastabos masyvas ir kopijavimas div elementas ir jo vaikai Pastabos masyvas.

div lipdukas ng-repeat = "pastaba užrašuose" note = "note" ondelete = "deleteNote (id)">
mygtuko tipas = "mygtukas" ng-click = "deleteNote (note.id)"> × / button>
įvestis ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Gražuolė ng-pakartoti yra tai, kad jis yra susietas su bet kokiu masyvu, kurį perduodate, ir, pridėjus elementą prie masyvo, jūsų DOM elementas bus automatiškai atnaujintas. Galite žengti šį žingsnį toliau ir pakartoti ne tik standartinius DOM elementus, bet ir kitas pritaikytas direktyvas. Štai kodėl jūs matote lipdukas kaip elemento atributas.

Yra dar du pritaikyto kodo bitai, kuriuos reikia patikslinti. Mes išskyrėme taikymo sritį Lipnūs lapeliai direktyva dėl dviejų savybių. Pirmasis yra privalomas apibrėžtas izoliuotas taikymo sritis pastaba nuosavybė. Tai reiškia, kad kai užrašo objektas pasikeičia pirminėje srityje, jis automatiškai atnaujins atitinkamą pastabos objektą direktyvoje ir atvirkščiai. Kita apibrėžta izoliuota taikymo sritis yra ondelete atributas. Tai reiškia, kad kada ondelete yra vadinamas direktyvoje, jis vadins bet kokią išraišką ondelete atributas DOM elemente, kuris sukuria direktyvą.

Kai direktyva yra supaprastinta, ji įtraukiama į DOM ir iškviečiama susiejimo funkcija. Tai puiki galimybė nustatyti tam tikras numatytąsias DOM ypatybes elementui. Elemento parametras, kurį mes perduodame, iš tikrųjų yra „jQuery“ objektas, todėl galime juo atlikti „jQuery“ operacijas.

(„AngularJS“ iš tikrųjų yra įmontuotas „jQuery“ pogrupis, bet jei jau įtraukėte pilną „jQuery“ versiją, „AngularJS“ tai atliks.)

app.directive (’stickyNote’, funkcija (lizdas) {
var linker = funkcija (apimtis, elementas, attrai) {
// DOM inicijavimas, kad būtų malonu
element.css (’kairė’, ’10px’);
element.css (’viršuje’, ’50px’);
element.hide (). fadeIn ();
};
});

Aukščiau pateiktame kode mes paprasčiausiai padedame lipnią natą ant scenos ir ją išblukiname.

11. Ištrinkite lipduką

Taigi dabar, kai galime pridėti ir rodyti lipduką, atėjo laikas ištrinti lipdukus. Lanksčių užrašų kūrimas ir ištrynimas yra elementų pridėjimas ir ištrinimas iš masyvo, prie kurio užrašai yra susieti. Tai yra tėvų srities atsakomybė išlaikyti tą masyvą, todėl mes išvedame užklausą ištrinti iš direktyvos, bet leiskite tėvų sritims atlikti sunkų kėlimą.

Štai kodėl mes patyrėme visas sunkumus kurdami išraiškos apibrėžtą izoliuotą direktyvos taikymo sritį: kad direktyva galėtų ištrinti įvykį viduje ir perduoti jį savo tėvams perdirbti.

Atkreipkite dėmesį į HTML, esantį direktyvoje.

mygtuko tipas = "mygtukas" ng-click = "deleteNote (note.id)"> × / button>

Kitas dalykas, kurį pasakysiu, gali atrodyti labai ilgas kelias, tačiau atminkite, kad esame vienoje pusėje, ir tai bus prasminga, kai aš ją išsiaiškinsiu. Spustelėjus mygtuką viršutiniame dešiniajame lipduko kampe, mes skambiname deleteNote dėl direktyvos valdiklio ir perduodant pastaba.id vertė. Tada kontrolierius skambina ondelete, kuris tada vykdo bet kokią išraišką, kurią mes prie jos prijungėme. Kol kas viskas gerai? Mes paskambiname valdikliui į vietinį metodą, kuris jį perduoda iškviesdamas bet kurią išraišką, apibrėžtą izoliuotoje srityje. Tėvui iškviečiama išraiška tiesiog būna vadinama deleteNote taip pat.

app.directive (’stickyNote’, funkcija (lizdas) {
var valdiklis = funkcija ($ sritis) {
$ scope.deleteNote = funkcija (id) {
$ sritis.ondelete ({
aš padariau
});
};
};

grįžti {
apriboti: „A“,
nuoroda: nuoroda,
valdiklis: valdiklis,
apimtis: {
pastaba: ’=’,
ondelete: ’&’
}
};
});

(Naudojant išraiškos apibrėžtą izoliuotą sritį, parametrai siunčiami objekto žemėlapyje.)

Tėvų srityje deleteNote paskambina ir atlieka gana standartinį ištrynimą naudodamas kampinis.kiekvienam naudingumo funkcija pakartoti užrašų masyvą. Kai funkcija susitvarkys su vietiniu verslu, ji eina į priekį ir skleidžia renginį, kad visas pasaulis galėtų atitinkamai reaguoti.

app.controller (’MainCtrl’, funkcija ($ sritis, lizdas) {
$ sritis.notai = [];

// Gaunamasis
socket.on (’onNoteDeleted’, funkcija (duomenys) {
$ sritis.deleteNote (data.id);
});

// Išeinantis
$ scope.deleteNote = funkcija (id) {
var oldNotes = $ scope.notes,
newNotes = [];

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

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

12. Lipduko atnaujinimas

Mes darome fantastišką pažangą! Dabar tikiuosi, kad jūs pradėsite matyti keletą modelių, kylančių iš šio viesulo turo, kuriame dalyvaujame. Kitas sąrašo punktas yra atnaujinimo funkcija.

Pradėsime nuo tikrųjų DOM elementų ir stebėsime jį iki serverio ir atgal prie kliento. Pirmiausia turime žinoti, kada keičiamas lipduko pavadinimas ar turinys. „AngularJS“ formos elementus traktuoja kaip duomenų modelio dalį, todėl vienu metu galite prijungti dvipusį duomenų įrišimą. Norėdami tai padaryti, naudokite ng-modelis direktyvą ir įdėkite nuosavybę, su kuria norite susieti. Šiuo atveju mes ketiname naudoti pastaba.pavadinimas ir pastaba.kūnas atitinkamai.

Kai kuri nors iš šių savybių pasikeičia, mes norime užfiksuoti tą informaciją, kad ji būtų perduota. Tai pasiekiame ng-pokytis direktyvą ir naudokite ją skambindami updateNote ir perduoti patį užrašo objektą. „AngularJS“ atlieka labai protingą purviną patikrinimą, kad nustatytų, ar yra kokio nors elemento vertė ng-modelis pasikeitė ir tada vykdo išraišką, esančią ng-pokytis.

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

Aukštyn naudojimas ng-pokytis yra tai, kad vietinė transformacija jau įvyko ir mes esame tik atsakingi už žinutės perdavimą. Valdiklyje updateNote yra vadinamas ir iš ten mes ketiname skleisti updateNote įvykį, kurį mūsų serveris galėtų transliuoti kitiems klientams.

app.directive (’stickyNote’, funkcija (lizdas) {
var valdiklis = funkcija ($ sritis) {
$ scope.updateNote = funkcija (pastaba) {
socket.emit (’updateNote’, pastaba);
};
};
});

Ir direktyvos valdiklyje mes klausomės onNoteUpdated įvykis, kurį reikia žinoti, kai atnaujinta kito kliento pastaba, kad galėtume atnaujinti savo vietinę versiją.

var valdiklis = funkcija ($ sritis) {
// Gaunamasis
socket.on (’onNoteUpdated’, funkcija (duomenys) {
// Atnaujinti, jei ta pati pastaba
jei (duomenys.id == $ apimtis.pastaba.id) {

$ sritis.pastaba.title = data.title;
$ aprėptis.pastaba.body = data.body;
}
});
};

13. Lipduko perkėlimas

Šiuo metu mes iš esmės padarėme ratą aplink CRUD vaikų baseiną ir gyvenimas yra geras! Siekdami padaryti įspūdį savo draugams, mes norėsime pridėti galimybę perkelti užrašus ekrane ir atnaujinti koordinates realiuoju laiku. Neišsigąskite - tai tik dar kelios kodo eilutės. Visas šis sunkus darbas pasiteisins. Aš pažadu!

Mes pakvietėme ypatingą svečią „jQueryUI“ į vakarėlį ir viską padarėme dėl „draggables“. Pridėjus galimybę vilkti užrašą vietoje reikia tik vienos kodo eilutės. Jei pridėsite elementas.tempiamas (); prie savo susiejimo funkcijos pradėsite girdėti „Survivor“ „Tigro akis“, nes dabar galite vilkti savo užrašus.

Norime sužinoti, kada vilkimas sustojo, ir užfiksuoti naujas koordinates, kad galėtume važiuoti. „jQueryUI“ sukūrė labai protingi žmonės, todėl, kai vilkimas sustoja, tiesiog reikia nustatyti „stop“ įvykio atgalinio skambinimo funkciją. Mes griebiame pastaba.id iš taikymo srities objekto ir kairiosios bei viršutinės CSS reikšmių ui objektas. Turėdami tas žinias darome tai, ką darėme visą laiką: skleiskite!

app.directive (’stickyNote’, funkcija (lizdas) {
var linker = funkcija (apimtis, elementas, attrai) {
element.draggable ({
stop: funkcija (įvykis, ui) {
socket.emit (’moveNote’, {
id: taikymo sritis.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, funkcija (duomenys) {
// Atnaujinti, jei ta pati pastaba
jei (duomenys.id == apimtis.pastaba.id) {
element.animate ({
kairėje: duomenys.x,
viršuje: duomenys.y
});
}
});
};
});

Šiuo metu nenuostabu, kad mes taip pat klausomės su judėjimu susijusio įvykio iš „socket“ tarnybos. Šiuo atveju tai yra „onNoteMoved“ įvykis ir jei pastaba yra atitiktis, mes atnaujiname kairę ir viršutinę CSS ypatybes. Bam! Padaryta!

14. Premija

Tai yra premijos skyrius, kurio neįtraukčiau, jei nebūčiau visiškai įsitikinęs, kad galite tai pasiekti greičiau nei per 10 minučių. Mes ketiname įdiegti į tiesioginį serverį (aš vis dar stebiuosi, kaip lengva tai padaryti).

Pirmiausia turite užsiregistruoti į nemokamą „Nodejitsu“ bandymą. Bandymas nemokamas 30 dienų, o tai puikiai tinka norint sušlapti kojas.

Sukūrę savo sąskaitą turite įdiegti „jitsu“ paketą, kurį galite padaryti naudodami komandų eilutę $ npm įdiekite „jitsu -g“.

Tada turite prisijungti iš komandinės eilutės per $ jitsu prisijungimas ir įveskite savo įgaliojimus.

Įsitikinkite, kad esate tiesiogiai programoje, įveskite dislokuoti $ jitsu ir peržvelk klausimus. Paprastai palieku kuo daugiau numatytųjų, tai reiškia, kad savo programai suteikiu pavadinimą, bet ne padomenį ir pan.

Ir, mano mieli draugai, viskas, ko čia yra! Programos URL gausite iš serverio išvesties, kai jis bus įdiegtas ir jis bus paruoštas naudoti.

15. Išvada

Šiame straipsnyje aptarėme daug „AngularJS“ pagrindo ir tikiuosi, kad šiame procese jums buvo labai smagu. Manau, kad yra tikrai tvarkinga, ką galite pasiekti naudodami „AngularJS“ ir „Socket.io“ maždaug 200 kodo eilučių.

Buvo keli dalykai, kurių nepadariau, kad sutelkčiau dėmesį į pagrindinius dalykus, tačiau aš raginu jus nutraukti šaltinį ir pažaisti su programa. Mes sukūrėme tvirtą pagrindą, tačiau vis dar yra daugybė funkcijų, kurias galėtumėte pridėti. Gaukite įsilaužimą!

Lukas Ruebbelke yra technologijų entuziastas ir yra „AngularJS in Action for Mananning Publications“ bendraautorius. Jo mėgstamiausias dalykas yra priversti žmones taip jaudintis dėl naujų technologijų kaip jis. Jis vadovauja „Phoenix“ žiniatinklio programų vartotojų grupei ir yra surengęs kelis hakatonus su savo kolegomis nusikalstamumu.

Jums tai patiko? Perskaitykite tai!

• Kaip sukurti programą
• Mūsų mėgstamiausi žiniatinklio šriftai - ir jie nekainuoja nė cento
• Sužinokite, kas toliau yra papildytoje realybėje
• Atsisiųskite nemokamas tekstūras: didelės skiriamosios gebos ir paruoštas naudoti dabar