Përmbajtje
- 01. Serveri
- 02. Kockat e zhveshura
- 03. Shpalleni varësitë tuaja
- 04. Foleja e lidhjes.io
- 05. Ndezni motorët tuaj!
- 06. Disa mendime të sinqerta para se të lëvizni përpara
- 07. Klienti
- 08. Kockat e zhveshura
- 09. Krijimi i një shënimi ngjitës
- 10. Shfaqja e shënimeve ngjitëse
- 11. Fshirja e një shënimi ngjitës
- 12. Përditësimi i një shënimi ngjitës
- 13. Lëvizja e një shënimi ngjitës
- 14. Bonusi
- 15. Përfundim
- Te pelqen kjo? Lexoni këto!
- Njohuritë e nevojshme: JavaScript e ndërmjetme
- Kërkon: Nyja.js, NPM
- Koha e Projektit: 2 orë
AngularJS është veçanërisht i përshtatshëm për krijimin e aplikacioneve të pasura nga klienti në shfletuesin dhe, kur shtoni pak Socket.io në përzierje, gjërat bëhen vërtet interesante. Në këtë artikull ne do të ndërtojmë një bord bashkëpunimi në kohë reale që përdor AngularJS për aplikacionin nga klienti dhe Socket.io për të ndarë gjendjen midis të gjithë klientëve të lidhur.
Le të mbulojmë pak shtëpinë përpara se të fillojmë. Unë do të supozoj që ju keni një zotërim themelor të HTML dhe JavaScript pasi nuk do të mbuloj çdo cep të kodit. Për shembull, unë nuk do të thërras skedarët CSS dhe JavaScript që kam përfshirë në kokën e skedarit HTML pasi atje nuk ka informacion të ri.
Gjithashtu, unë ju inkurajoj që të merrni kodin nga llogaria ime GitHub për të ndjekur së bashku. Miku im i mirë Brian Ford gjithashtu ka një farë të shkëlqyeshme Socket.io, mbi të cilën unë bazova disa nga idetë e mia origjinale.
Katër tiparet kryesore që duam në bordin e bashkëpunimit është aftësia për të krijuar një shënim, për të lexuar shënimet, për të azhurnuar një shënim, për të fshirë një shënim dhe, për argëtim, për të lëvizur një shënim në tabelë. Po, kjo është e saktë, ne jemi duke u përqëndruar në tiparet standarde CRUD. Unë besoj se duke u përqëndruar në këto karakteristika themelore, ne do të kemi mbuluar mjaftueshëm kodin për të dalë modelet në mënyrë që ju t'i merrni ato dhe t'i zbatoni ato diku tjetër.
01. Serveri
Ne do të fillojmë me serverin Node.js së pari pasi ai do të shërbejë si themeli mbi të cilin do të ndërtojmë gjithçka tjetër.
Ne do të ndërtojmë një server Node.js me Express dhe Socket.io. Arsyeja që po përdorim Express është se ai siguron një mekanizëm të mirë për vendosjen e një serveri statik të aseteve brenda Node.js. Express vjen me një mori karakteristikash vërtet të mrekullueshme, por, në këtë rast, ne do ta përdorim atë për të përgjysmuar aplikacionin pastër midis serverit dhe klientit.
(Unë veproj nën supozimin se keni të instaluar Node.js dhe NPM. Një kërkim i shpejtë në Google do t'ju tregojë se si t'i instaloni këto nëse nuk i bëni.)
02. Kockat e zhveshura
Pra, për të ndërtuar eshtrat e zhveshura të serverit, ne duhet të bëjmë disa gjëra për t'u ngritur dhe drejtuar.
// app.js
// A.1
var shpreh = kërkoj ('shpreh'),
app = shpreh ();
server = kërkoj ('http'). createServer (aplikacion),
io = kërkoj ('socket.io'). dëgjoj (server);
// A.2
app.configure (funksioni () {
app.use (express.static (__ dirname + ’/ public’));
});
// A.3
server.listen (1337);
A.1 Ne po deklarojmë dhe instantojmë modulet tona Node.js në mënyrë që t'i përdorim ato në aplikacionin tonë. Ne jemi duke deklaruar Express, instantaching Express dhe më pas duke krijuar një server HTTP dhe duke dërguar në të shembullin Express në të. Dhe prej andej ne po instantinojmë Socket.io dhe po i themi që të mbikëqyrë shembullin e serverit tonë.
A.2 Ne po i themi aplikacionit tonë Express të përdorë direktorinë tonë publike për të shërbyer skedarët nga.
A.3 Ne fillojmë serverin dhe i themi që të dëgjojë në port 1337.
Deri më tani kjo ka qenë mjaft e padhimbshme dhe e shpejtë. Besoj se jemi më pak se 10 rreshta në kod dhe tashmë kemi një server funksional Node.js. Tutje!
03. Shpalleni varësitë tuaja
// paketat.json
{
"name": "tabela këndore",
"description": "Bordi i Bashkëpunimit AngularJS",
"version": "0.0.1-1",
"private": e vertete,
"varësitë": {
"express": "3.x",
"socket.io": "0.9.x"
}
}
Një nga tiparet më të mira të NPM është aftësia për të deklaruar varësitë tuaja në një paketat.json skedari dhe më pas instalojini automatikisht përmes npm instaloni në vijën e komandave.
04. Foleja e lidhjes.io
Ne tashmë kemi përcaktuar tiparet thelbësore që duam në aplikacion dhe kështu duhet të vendosim dëgjuesit e ngjarjeve Socket.io dhe një mbyllje të përshtatshme për të trajtuar ngjarjen për secilin operacion.
Në kodin më poshtë do të vini re se në thelb është një konfigurim i dëgjuesve të ngjarjeve dhe kthimit të thirrjeve. Ngjarja e parë është lidhje ngjarje, të cilën e përdorim për të lidhur ngjarjet tona të tjera në mbyllje.
io.sockets.on ('lidhje', funksion (prizë) {
socket.on ('createNote', funksioni (të dhëna) {
socket.broadcast.emit ('onNoteCreated', të dhëna);
});
socket.on ('updateNote', funksioni (të dhëna) {
socket.broadcast.emit ('onNoteUpdated', të dhëna);
});
socket.on ('deleteNote', funksioni (të dhëna) {
socket.broadcast.emit ('onNoteDeleted', të dhëna);
});
socket.on ('moveNote', funksioni (të dhëna) {
socket.broadcast.emit ('onNoteMoved', të dhëna);
});
});
Nga këtu shtojmë dëgjues krijoniShënim, azhurnim, fshi shënim dhe lëvizni shënim. Dhe në funksionin e kthimit, ne thjesht po transmetojmë se çfarë ngjarje ka ndodhur në mënyrë që çdo klient që dëgjon të mund të njoftohet se ngjarja ka ndodhur.
Ekzistojnë disa gjëra që ia vlen të theksohen në lidhje me funksionet e kthimit në menaxherët individualë të ngjarjeve. Një, nëse doni të dërgoni një ngjarje te të gjithë të tjerët, përveç klientit që emetoi ngjarjen që futni transmetimi perpara se lëshoj thirrje funksioni. Së dyti, ne thjesht po ua kalojmë ngarkesën e ngjarjeve palëve të interesuara në mënyrë që ata të mund ta përpunojnë atë siç u duket e përshtatshme.
05. Ndezni motorët tuaj!
Tani që kemi përcaktuar varësitë tona dhe kemi vendosur aplikacionin tonë Node.js me fuqitë Express dhe Socket.io, është mjaft e thjeshtë të inicializosh serverin Node.js.
Së pari ju instaloni varësitë tuaja Node.js si kështu:
npm instaloni
Dhe pastaj ju filloni serverin si kjo:
nyja app.js
Dhe pastaj! Ju shkoni në këtë adresë në shfletuesin tuaj. Bam!
06. Disa mendime të sinqerta para se të lëvizni përpara
Unë jam kryesisht një zhvillues frontend dhe fillimisht u frikësova disi me lidhjen e një serveri Node.js në aplikacionin tim. Pjesa AngularJS ishte JavaScript e parakohshme, por nga ana e serverit? Radhë muzikën mërzitur nga një lëvizje e tmerrshme.
Por, unë isha plotësisht i informuar për të zbuluar se mund të krijoja një server statik në internet vetëm në disa rreshta kodi dhe në disa linja të tjera të përdorja Socket.io për të trajtuar të gjitha ngjarjet midis shfletuesve. Dhe ishte akoma thjesht JavaScript! Për hir të kohës, ne po mbulojmë vetëm disa karakteristika, por shpresoj që deri në fund të artikullit të shihni se është e lehtë të notosh - dhe fundi i thellë i pishinës nuk është aq i frikshëm.
07. Klienti
Tani që kemi themelin tonë të fortë në vend me serverin tonë, le të kalojmë te pjesa ime e preferuar - klienti! Ne do të përdorim AngularJS, jQueryUI për pjesën që tërhiqet dhe Twitter Bootstrap për një bazë stili.
08. Kockat e zhveshura
Si një çështje e preferencës personale, kur filloj një aplikacion të ri AngularJS më pëlqen të përcaktoj shpejt minimumin që di se do të më duhet të filloj dhe pastaj të filloj ta përsëris atë sa më shpejt që të jetë e mundur.
Çdo aplikacion AngularJS duhet të bootstrapohet me të paktën një kontrollues të pranishëm dhe kështu që zakonisht këtu filloj gjithmonë.
Për të bootstrapuar automatikisht aplikacionin duhet thjesht të shtoni ng-aplikacion në nyjen HTML në të cilën dëshironi të jetojë aplikacioni. Shumicën e kohës, shtimi i tij në etiketën HTML do të jetë krejtësisht i pranueshëm. Unë gjithashtu i kam shtuar një atribut ng-aplikacion për t'i thënë se unë dua të përdor aplikacion modul, të cilin do ta përcaktoj vetëm në një moment.
// publik / indeks.html
html ng-app = "app">
E di që do të më duhet të paktën një kontrollues dhe kështu do ta thërras duke përdorur ng-kontrollues dhe caktimin e saj një pronë të MainCtrl.
trupi ng-kontrollues = "MainCtrl"> / trupi>
Deri tani jemi në rregull për një modul të quajtur aplikacion dhe një kontrollues me emrin MainCtrl. Le të shkojmë përpara dhe t'i krijojmë ato tani.
Krijimi i një moduli është mjaft i thjeshtë. Ju e përcaktoni atë duke telefonuar këndore.modul dhe duke i dhënë asaj një emër. Për referencë në të ardhmen, parametri i dytë i një grupi bosh është vendi ku ju mund të injektoni nën-module për përdorim në aplikacion. Outshtë jashtë fushës së këtij tutoriali, por është i dobishëm kur aplikacioni juaj fillon të rritet në kompleksitet dhe nevoja.
// publik / js / collab.js
app var = këndor.modul ('app', []);
Ne do të deklarojmë disa mbajtës bosh në aplikacion moduli duke filluar me MainCtrl më poshtëKëto do t'i plotësojmë më vonë, por unë doja të ilustroja strukturën themelore që nga fillimi.
app.controller ('MainCtrl', funksioni ($ fushë) {});
Ne gjithashtu do të mbështjellim funksionalitetin Socket.io në një fole shërbim në mënyrë që të mund ta kapsulojmë atë objekt dhe të mos e lëmë të lundrojë përreth në hapësirën globale të emrave.
app.factory ('socket', funksioni ($ rootScope) {});
Dhe ndërsa jemi në të, ne do të deklarojmë një direktivë të quajtur ngjitet që do të përdorim për të kapsuluar funksionalitetin e shënimit ngjitës.
app.directive ('stickyNote', funksioni (fole) {});
Pra, le të shqyrtojmë atë që kemi bërë deri më tani. Ne kemi nisur aplikacionin duke përdorur ng-aplikacion dhe deklaroi kontrolluesin tonë të aplikacionit në HTML. Ne gjithashtu kemi përcaktuar modulin e aplikimit dhe kemi krijuar MainCtrl kontrollues, fole shërbimi dhe ngjitet direktiva.
09. Krijimi i një shënimi ngjitës
Tani që kemi skeletin e aplikacionit AngularJS në vend, ne do të fillojmë të ndërtojmë tiparin e krijimit.
app.controller ('MainCtrl', funksioni ($ fushë, fole) {// B.1
$ fushë. shënime = []; // B.2
// Hyrëse
socket.on ('onNoteCreated', funksioni (të dhëna) {// B.3
$ fushë. shënime. shtytje (të dhëna);
});
// në dalje
$ range.createNote = funksioni () {// B.4
var shënim = {
id: Data e re (). getTime (),
titulli: 'Shënim i ri',
trupi: 'Në pritje'
};
$ fushë. shënime. shtytje (shënim);
socket.emit ('krijoni Shënim', shënim);
};
B.1 AngularJS ka një veçori të injektimit të varësisë në të, kështu që ne po injektojmë një fushëveprimi $ objekti dhe fole shërbimi fushëveprimi $ objekti shërben si ViewModel dhe është në thelb një objekt JavaScript me disa ngjarje të pjekura në të për të mundësuar lidhjen e të dhënave me dy drejtime.
B.2 Ne po deklarojmë grupin në të cilin do të përdorim për të lidhur pamjen.
B.3 Po shtojmë një dëgjues për onNoteKrijuar ngjarje në fole shërbimi dhe shtyrja e ngarkesës së ngjarjes në fushëveprimi $. shënime grup
B.4 Ne kemi deklaruar një krijoniShënim metodë që krijon një parazgjedhje shënim objekt dhe e shtyn atë në fushëveprimi $. shënime grup Ai gjithashtu përdor fole shërbim për të lëshuar krijoniShënim ngjarje dhe të kalojë shënim i ri objekt së bashku.
Deri tani që kemi një metodë për të krijuar shënimin, si mund ta quajmë atë? Kjo është një pyetje e mirë! Në skedarin HTML, ne shtojmë direktivën e ndërtuar në AngularJS ng-kliko në buton dhe pastaj shtoni krijoniShënim thirrja e metodës si vlerë e atributit.
butoni id = "createButton" ng-click = "createNote ()"> Krijo shënim / butonin>
Koha për një rishikim të shpejtë të asaj që kemi bërë deri më tani. Ne kemi shtuar një grup në fushëveprimi $ objekt në MainCtrl kjo do të mbajë të gjitha shënimet për aplikacionin. Ne gjithashtu kemi shtuar një krijoniShënim metodë në fushëveprimi $ objekt për të krijuar një shënim të ri lokal dhe më pas t'ia transmetojë atë shënim klientëve të tjerë përmes fole shërbimi Ne gjithashtu kemi shtuar një dëgjues ngjarjesh në fole shërbim në mënyrë që të mund të dimë kur klientët e tjerë kanë krijuar një shënim në mënyrë që ta shtojmë atë në koleksionin tonë.
10. Shfaqja e shënimeve ngjitëse
Tani kemi mundësinë të krijojmë një objekt shënimi dhe ta ndajmë atë ndërmjet shfletuesve, por si mund ta shfaqim atë në të vërtetë? Këtu hyjnë direktivat.
Direktivat dhe ndërlikimet e tyre janë një temë e gjerë, por versioni i shkurtër është se ato ofrojnë një mënyrë për të zgjeruar elemente dhe atribute me funksionalitet të personalizuar. Direktivat janë lehtësisht pjesa ime e preferuar për AngularJS sepse ju lejon të krijoni në thelb një DSL të tërë (Gjuha specifike e domenit) rreth aplikacionit tuaj në HTML.
Naturalshtë e natyrshme që meqenëse do të krijojmë shënime ngjitëse për bordin tonë të bashkëpunimit që duhet të krijojmë një ngjitet direktiva. Direktivat përcaktohen duke thirrur metodën direktive në një modul që dëshironi ta deklaroni dhe duke kaluar në një emër dhe një funksion që kthen një objekt të përcaktimit të direktivës. Objekti i përcaktimit të direktivës ka shumë veti të mundshme që mund të përcaktoni në të, por ne do të përdorim vetëm disa për qëllimet tona këtu.
Unë ju rekomandoj që të shikoni dokumentacionin AngularJS për të parë të gjitha listat e pronave që mund të përcaktoni në objektin e përcaktimit të direktivës.
app.directive ('stickyNote', funksioni (fole) {
var linker = funksioni (fushëveprimi, elementi, përcaktuesit) {};
kontrollues var = funksioni ($ fushë) {};
kthimi {
kufizojnë: 'A', // C.1
lidhja: lidhësi, // C.2
kontrollues: kontrollues, // C.3
fushëveprimi: {// C.4
shënim: '=',
ondelete: '&'
}
};
});
C.1 Ju mund ta kufizoni direktivën tuaj në një lloj të caktuar të elementit HTML. Dy më të zakonshmet janë elementi ose atributi, të cilat ju deklaroni se përdorni E dhe A përkatësisht. Ju gjithashtu mund ta kufizoni atë në një klasë CSS ose në një koment, por këto nuk janë aq të zakonshme.
C.2 Funksioni i lidhjes është vendi ku vendosni të gjithë kodin tuaj të manipulimit DOM. Ka disa përjashtime që kam gjetur, por kjo është gjithmonë e vërtetë (të paktën 99 përqind të kohës). Ky është një rregull themelor themelor i AngularJS dhe kjo është arsyeja pse unë e kam theksuar atë.
C.3 Funksioni i kontrolluesit funksionon ashtu si kontrollori kryesor që kemi përcaktuar për aplikacionin por fushëveprimi $ objekti që po kalojmë është specifik për elementin DOM ku direktiva jeton.
C.4 AngularJS ka një koncept të fushës së izoluar, e cila ju lejon të përcaktoni qartë se si fushëveprimi i një direktive komunikon me botën e jashtme. Nëse nuk do të kishim deklaruar fushëveprimin, direktiva do të kishte trashëguar në mënyrë implicite nga fusha e prindërve me një marrëdhënie prind-fëmijë. Në shumë raste, kjo nuk është optimale. Me izolimin e fushës, ne zbusim shanset që bota e jashtme mund të ndikojë padashur dhe negativisht në gjendjen e direktivës suaj.
Unë kam deklaruar të dhëna dy-drejtimëshe të detyrueshme për të shënim me = simbol dhe një shprehje e detyrueshme për të i fshirë me & simbol. Ju lutemi lexoni dokumentacionin AngularJS për një shpjegim të plotë të fushës së izoluar pasi është një nga temat më të komplikuara në kornizë.
Pra, le të shtojmë në të vërtetë një shënim ngjitës në DOM.
Si çdo kornizë e mirë, AngularJS vjen me disa tipare vërtet të shkëlqyera, jashtë kutisë. Një nga tiparet më të dobishme është ng-përsëritje. Kjo direktivë AngularJS ju lejon të kaloni në një grup objektesh dhe ajo kopjon çfarëdo tagu që është në aq herë sa ka artikuj në koleksion. Në rastin më poshtë, ne po përsërisim mbi shënime varg dhe dublikimi i div elementi dhe fëmijët e tij për gjatësinë e shënime grup
div shënim ngjitës ng-përsëris = "shënim në shënime" shënim = "shënim" ondelete = "fshi shënim (id)">
lloji i butonit = "butoni" ng-kliko = "fshi shënimin (shënimi.id)"> button / butoni>
input ng-model = "shënim. titull" ng-ndryshim = "azhurnim Shënim (shënim)" tip = "tekst">
textarea ng-model = "shënim.rupi" ng-change = "azhurnim Shënim (shënim)"
> {{note.body}} / textarea>
/ div>
Bukuria e ng-përsëritje është se lidhet me çfarëdo grupi që kaloni dhe, kur shtoni një artikull në grup, elementi juaj DOM do të azhurnohet automatikisht. Ju mund ta bëni këtë një hap më tej dhe të përsërisni jo vetëm elementet standarde të DOM por edhe direktivat e tjera me porosi. Kjo është arsyeja pse ju shihni ngjitet-shënim si atribut mbi elementin.
Ekzistojnë dy copa të tjera të kodit personal që duhet të sqarohen. Ne kemi izoluar fushëveprimin në Shenime ngjitese direktiva per dy veti. E para është fusha e izoluar e përcaktuar detyruese shënim pronë. Kjo do të thotë që sa herë që objekti shënim ndryshon në fushën e prindit, ai automatikisht do të azhurnojë objektin përkatës të shënimit në direktivë dhe anasjelltas. Shtrirja tjetër e përcaktuar e izoluar është në i fshirë atribut. Ajo që do të thotë kjo është se kur i fshirë thirret në direktivë, do të thërrasë çdo shprehje që është në i fshirë atribut në elementin DOM që instinkton direktivën.
Kur një direktivë instantohet, ajo shtohet në DOM dhe funksioni i lidhjes thirret. Kjo është një mundësi e përsosur për të vendosur disa veti të paracaktuara DOM në element. Parametri i elementit në të cilin po kalojmë është në të vërtetë një objekt jQuery dhe kështu mund të kryejmë operacione jQuery në të.
(AngularJS në të vërtetë vjen me një nënbashkësi të jQuery të integruar në të, por nëse e keni përfshirë tashmë versionin e plotë të jQuery, AngularJS do të shtyhet për atë.)
app.directive ('stickyNote', funksioni (fole) {
var linker = funksioni (fushëveprimi, elementi, vlerësuesit) {
// Disa iniciativa DOM për ta bërë atë të këndshme
element.css ('majtas', '10px');
element.css ('top', '50px');
element.fshi (). zbehetIn ();
};
});
Në kodin e mësipërm, ne thjesht po pozicionojmë shënimin ngjitës në skenë dhe po e zbehim atë brenda.
11. Fshirja e një shënimi ngjitës
Kështu që tani që mund të shtojmë dhe shfaqim një shënim ngjitës, është koha të fshijmë shënime ngjitëse. Krijimi dhe fshirja e shënimeve ngjitëse është çështje e shtimit dhe fshirjes së artikujve nga grupi për të cilin janë të detyruar shënimet. Kjo është përgjegjësia e fushës së prindit për të mirëmbajtur atë grup, për këtë arsye ne e kemi origjinën e kërkesës për fshirje nga brenda direktivës, por le të shtrihet qëllimi i prindit për ngritjen aktuale të rëndë.
Kjo është arsyeja pse ne kaluam të gjithë problemin e krijimit të shprehjes së përcaktuar fushë të izoluar të direktivës: kështu që direktiva mund të marrë ngjarjen e fshirjes brenda dhe t'ia kalojë prindit të saj për përpunim.
Vini re HTML brenda direktivës.
lloji i butonit = "butoni" ng-kliko = "fshi shënimin (shënimi.id)"> button / butoni>
Gjëja tjetër që do të them mund të duket si një rrugë e gjatë, por mos harroni se jemi në të njëjtën anë dhe do të ketë kuptim pasi të elaboroj. Kur klikohet butoni në këndin e sipërm të djathtë të shënimit ngjitës, ne po telefonojmë fshi shënim mbi kontrolluesin e direktivës dhe kalimin në shënim.id vlera Kontrolluesi më pas telefonon fshij, e cila më pas ekzekuton çfarëdo shprehje që kemi lidhur me të. Deri tani kaq mirë? Ne jemi duke thirrur një metodë lokale në kontrollues i cili më pas e dorëzon atë duke thirrur çfarëdo shprehjeje të përcaktuar në fushën e izoluar. Shprehja që thirret prindi thjesht ndodh të quhet fshi shënim gjithashtu.
app.directive ('stickyNote', funksioni (fole) {
kontrollues var = funksioni ($ fushë) {
$ fushë.deleteNote = funksioni (id) {
$ fushë. e gjërë ({
unë e bëra
});
};
};
kthimi {
kufizojnë: 'A',
link: lidhës,
kontrollues: kontrollues,
fushëveprimi: {
shënim: '=',
ondelete: '&'
}
};
});
(Kur përdorni fushën e izoluar të përcaktuar nga shprehja, parametrat dërgohen në një hartë të objektit.)
Në fushën prindërore, fshi shënim thirret dhe bën një fshirje mjaft standarde duke përdorur këndore.për secilën funksioni i shërbimeve për të përsëritur në vargun e shënimeve. Pasi funksioni të ketë trajtuar biznesin e tij lokal, ajo vazhdon dhe lëshon ngjarjen që pjesa tjetër e botës të reagojë në përputhje me rrethanat.
app.controller ('MainCtrl', funksioni ($ fushë, fole) {
$ fushë. shënime = [];
// Hyrëse
socket.on ('onNoteDeleted', funksioni (të dhëna) {
$ fushë.deleteNote (data.id);
});
// në dalje
$ fushë.deleteNote = funksioni (id) {
var oldNotes = $ fushë. shënime,
Shënime të reja = [];
këndore.për secilën (shënimet e vjetra, funksioni (shënim) {
nëse (shënim.id! == id) newNotes.push (shënim);
});
$ range.notes = newNotes;
socket.emit ('deleteNote', {id: id});
};
});
12. Përditësimi i një shënimi ngjitës
Ne jemi duke bërë përparim fantastik! Tani shpresoj që ju keni filluar të shihni disa modele që dalin nga ky turne i vorbullës që po bëjmë. Artikulli tjetër në listë është tipari i azhurnimit.
Ne do të fillojmë me elementet aktuale të DOM dhe do ta ndjekim atë deri në server dhe do të kthehemi te klienti. Së pari duhet të dimë se kur po ndryshohet titulli ose trupi i letrës ngjitëse. AngularJS trajton elementet e formës si pjesë e modelit të të dhënave, kështu që ju mund të lidhni lidhjen e të dhënave dy-drejtimëshe në një çast. Për ta bërë këtë përdorni ng-model direktivës dhe vendosni në pronën për të cilën dëshironi të lidheni. Në këtë rast ne do të përdorim shënim.titull dhe shënim.rupi përkatësisht.
Kur ndonjë nga këto veti të ndryshojë, ne duam të kapim atë informacion për të kaluar së bashku. Ne e përmbushim këtë me ng-ndryshim direktiva dhe e përdorin atë për të thirrur azhurnim dhe të kalojë në vetë shënimin. AngularJS bën një kontroll shumë të zgjuar të pistë për të zbuluar nëse vlera e gjithçkaje është brenda ng-model ka ndryshuar dhe më pas ekzekuton shprehjen që është në ng-ndryshim.
input ng-model = "shënim. titull" ng-ndryshim = "azhurnim Shënim (shënim)" tip = "tekst">
textarea ng-model = "shënim.rupi" ng-change = "azhurnimi Shënim (shënim)"> {{shënim. trupi}} / textarea>
Përmbysja e përdorimit ng-ndryshim është se transformimi lokal tashmë ka ndodhur dhe ne jemi vetëm përgjegjës për transmetimin e mesazhit. Në kontrollues, azhurnim thirret dhe prej andej do të lëshojmë azhurnim ngjarje që serveri ynë të transmetohet te klientët e tjerë.
app.directive ('stickyNote', funksioni (fole) {
kontrollues var = funksioni ($ fushë) {
$ fushë.updateNote = funksioni (shënim) {
socket.emit ('updateNote', shënim);
};
};
});
Dhe në kontrolluesin e direktivave, ne po dëgjojmë për onNoteUpdated ngjarje për të ditur kur një shënim nga një klient tjetër është azhurnuar në mënyrë që të mund të azhurnojmë versionin tonë lokal.
kontrollues var = funksioni ($ fushë) {
// Hyrëse
socket.on ('onNoteUpdated', funksioni (të dhëna) {
// Azhurnoni nëse shënimi i njëjtë
nëse (data.id == $ fushë. shënim.id) {
$ range.note.title = data.title;
$ range.note.body = data.body;
}
});
};
13. Lëvizja e një shënimi ngjitës
Në këtë pikë, ne kemi bërë në thelb një xhiro rreth pishinës CRUD kiddie dhe jeta është e mirë! Vetëm për hir të një truku të sallonit për të bërë përshtypje miqtë tuaj, ne do të shtojmë aftësinë për të lëvizur shënime nëpër ekran dhe për të azhurnuar koordinatat në kohë reale. Mos u frikësoni - janë vetëm disa rreshta të kodit. E gjithë kjo punë e vështirë do të paguajë. Premtoj!
Ne kemi ftuar mysafir special, jQueryUI, në mbrëmje dhe i kemi bërë të gjitha për zvarritës. Shtimi i aftësisë për të tërhequr një shënim në vend kërkon vetëm një rresht të kodit. Nëse shtoni në element.zhdërvjellët (); në funksionin tuaj lidhës do të filloni të dëgjoni 'Eye of the Tiger' nga Survivor sepse tani mund të tërhiqni shënimet tuaja përreth.
Ne duam të dimë kur zvarritja është ndalur dhe të kapim koordinatat e reja për të kaluar së bashku. jQueryUI u ndërtua nga disa njerëz shumë të zgjuar, kështu që kur zvarritja ndalet, thjesht duhet të përcaktoni një funksion kthyes për ngjarjen e ndaljes. Ne kapim shënim.id jashtë objektit të fushës dhe vlerave të majta dhe të sipërme të CSS nga ui Objekt. Me atë njohuri ne bëjmë atë që kemi bërë gjatë gjithë kohës: lësho!
app.directive ('stickyNote', funksioni (fole) {
var linker = funksioni (fushëveprimi, elementi, vlerësuesit) {
element. tërhiqet ({
ndalimi: funksioni (ngjarja, ui) {
socket.emit ('moveNote', {
id: fushë.notim.id,
x: ui.pozicioni majtas,
y: ui.pozicioni.top
});
}
});
socket.on ('onNoteMoved', funksioni (të dhëna) {
// Azhurnoni nëse shënimi i njëjtë
nëse (data.id == fushë. shënim.id) {
element.animate ({
majtas: data.x,
maja: të dhëna.y
});
}
});
};
});
Në këtë pikë nuk duhet të jetë për t'u habitur që po dëgjojmë gjithashtu një ngjarje të lidhur me lëvizjen nga shërbimi i prizës. Në këtë rast është onNoteMoving ngjarje dhe nëse shënimi përputhet, atëherë ne azhurnojmë vetitë e majta dhe të sipërme të CSS. Bam! Bërë!
14. Bonusi
Ky është një seksion bonus që nuk do ta përfshija nëse nuk do të isha plotësisht i sigurt që mund ta arrinit atë në më pak se 10 minuta. Ne do të vendosemi në një server të drejtpërdrejtë (unë jam ende i habitur nga sa e lehtë është të bësh).
Së pari, duhet të regjistroheni për një provë falas Nodejitsu. Prova është falas për 30 ditë, gjë që është perfekte për hir të lagjes së këmbëve.
Pasi të keni krijuar llogarinë tuaj duhet të instaloni paketën jitsu, të cilën mund ta bëni nga rreshti i komandës përmes $ npm instaloni jitsu -g.
Pastaj duhet të identifikoheni nga rreshti i komandës përmes hyrja $ jitsu dhe futni kredencialet tuaja.
Sigurohu që të jesh direkt në aplikacionin tënd, shkruaj vendos $ jitsu dhe hap përmes pyetjeve. Unë zakonisht lë sa më shumë që të jetë e mundur për të paracaktuar, që do të thotë që i jap aplikacionit tim një emër por jo një nën-domen etj.
Dhe, miqtë e mi të dashur, kjo është gjithçka që ka për të! Ju do të merrni URL-në e aplikacionit tuaj nga rezultati i serverit pasi të jetë vendosur dhe të jetë gati për t'u përdorur.
15. Përfundim
Ne kemi mbuluar shumë terren të AngularJS në këtë artikull dhe shpresoj që të jeni argëtuar shumë gjatë procesit. Unë mendoj se është vërtet e zoti ajo që mund të arrish me AngularJS dhe Socket.io në afërsisht 200 rreshta të kodit.
Kishte disa gjëra që nuk i mbulova për hir të përqendrimit në pikat kryesore, por unë ju inkurajoj që të tërhiqni burimin dhe të luani me aplikacionin. Ne kemi ndërtuar një themel të fortë, por ka akoma shumë karakteristika që mund të shtoni. Merrni pirateri!
Lukas Ruebbelke është një entuziast i teknologjisë dhe është bashkëautor i AngularJS në Veprim për Botimet e Manning. Gjëja e tij e preferuar për të bërë është të bëjë njerëzit aq të ngazëllyer për teknologjinë e re sa ai. Ai drejton Grupin e Përdoruesve të Aplikimit në Web Phoenix dhe ka pritur hakathone të shumta me partnerët e tij në krim.
Te pelqen kjo? Lexoni këto!
- Si të krijoni një aplikacion
- Fontet tona të preferuara të uebit - dhe ato nuk kushtojnë asnjë qindarkë
- Zbuloni se çfarë është më tej për Realitetin e Zgjeruar
- Shkarkoni tekstura falas: rezolucion të lartë dhe gati për t’u përdorur tani
