AngularJS sadarbības dēlis ar Socket.io

Saturs

• 01. Serveris
• 02. Kailie kauli
• 03. Paziņojiet savas atkarības
• 04. Pieslēdziet Socket.io
• 05. Sāciet savus dzinējus!
• 06. Dažas vaļsirdīgas domas pirms došanās tālāk
• 07. Klients
• 08. Kailie kauli
• 09. Līmlapas izveidošana
• 10. Līmlapiņu parādīšana
• 11. Līmlapiņas dzēšana
• 12. Līmlapiņas atjaunināšana
• 13. Līmlapiņas pārvietošana
• 14. Bonuss
• 15. Secinājums
• Patika tas? Izlasiet šos!

• Nepieciešamās zināšanas: Starpposma JavaScript
• Nepieciešama: Node.js, NPM
• Projekta laiks: 2 stundas

AngularJS ir īpaši labi piemērots, lai pārlūkprogrammā izveidotu bagātīgas klienta puses lietojumprogrammas, un, ja maisījumā pievienojat nelielu Socket.io, viss kļūst patiešām interesants. Šajā rakstā mēs izveidosim reāllaika sadarbības paneli, kas klienta lietojumprogrammai un Socket.io izmanto AngularJS, lai koplietotu stāvokli starp visiem saistītajiem klientiem.

Pirms darba uzsākšanas apskatīsim mazliet mājturības darbu. Es pieņemšu, ka jums ir fundamentāla HTML un JavaScript izpratne, jo es neaptveršu katru mazo koda stūri. Piemēram, es neizsaucu CSS un JavaScript failus, kurus esmu iekļāvis HTML faila galvgalī, jo tur nav jaunas informācijas.

Es iesaku arī paķert kodu no mana GitHub konta, lai sekotu līdzi. Manam labajam draugam Braienam Fordam ir arī lieliska Socket.io sēkla, uz kuras balstīju dažas savas sākotnējās idejas.

Četras galvenās iezīmes, kuras mēs vēlamies sadarbības dēlī, ir iespēja izveidot piezīmi, lasīt piezīmes, atjaunināt piezīmi, izdzēst piezīmi un, lai izklaidētos, pārvietot piezīmi uz tāfeles. Jā, tas ir pareizi, mēs koncentrējamies uz CRUD standarta funkcijām. Es uzskatu, ka, koncentrējoties uz šīm pamatfunkcijām, mēs būsim aptvēruši pietiekami daudz kodu, lai modeļi varētu parādīties, lai jūs tos varētu ņemt un pielietot citur.

01. Serveris

Vispirms mēs sāksim ar Node.js serveri, jo tas kalpos par pamatu, uz kura balstīsim visu pārējo.

Mēs veidosim Node.js serveri ar Express un Socket.io. Iemesls, kāpēc mēs izmantojam Express, ir tāds, ka tas nodrošina jauku mehānismu statiskā īpašuma servera iestatīšanai vietnē Node.js. Express nāk ar virkni patiešām lielisku funkciju, taču šajā gadījumā mēs to izmantosim, lai tīri sadalītu lietojumprogrammu starp serveri un klientu.

(Es darbojos, pieņemot, ka jums ir instalēti Node.js un NPM. Ātra Google meklēšana parādīs, kā tos instalēt, ja to nedarāt.)

02. Kailie kauli

Tāpēc, lai izveidotu kailos servera kaulus, mums ir jādara pāris lietas, lai sāktu darboties.

// app.js

A.1
var express = pieprasīt (’express’),
lietotne = express ();
serveris = pieprasīt (’http’). createServer (lietotne),
io = pieprasīt (’socket.io’). klausīties (serveris);

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

A.3
serveris.klausies (1337);

A.1. Mēs deklarējam un atjaunojam savus Node.js moduļus, lai tos varētu izmantot savā lietojumprogrammā. Mēs deklarējam Express, veicam Express eksemplāru un pēc tam izveidojam HTTP serveri un sūtām tajā Express instancē. Turpmāk mēs izveidojam Socket.io un sakām, lai tā seko mūsu servera instancei.

A.2. Pēc tam mēs liekam savai Express lietotnei izmantot mūsu publisko direktoriju failu sūtīšanai.

A.3 Mēs palaižam serveri un liekam klausīties ostā 1337.

Līdz šim tas ir bijis diezgan nesāpīgs un ātrs. Es uzskatu, ka kodā esam mazāk par 10 rindiņām, un mums jau ir funkcionāls Node.js serveris. Uz priekšu!

03. Paziņojiet savas atkarības

// paketes.json
{
"name": "leņķa-sadarbības-dēlis",
"description": "AngularJS sadarbības padome",
"versija": "0.0.1-1",
"privāts": taisnība,
"atkarības": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Viena no jaukākajām NPM īpašībām ir spēja deklarēt savas atkarības a paketes.json failu un pēc tam tos automātiski instalēt, izmantojot npm instalēt komandrindā.

04. Pieslēdziet Socket.io

Mēs jau esam definējuši galvenās funkcijas, kuras mēs vēlamies lietotnē, un tāpēc mums ir jāiestata Socket.io notikumu klausītāji un atbilstoša slēgšana, lai rīkotos ar notikumu katrai operācijai.

Zemāk esošajā kodā pamanīsit, ka tā būtībā ir notikumu klausītāju un atzvanīšanas konfigurācija. Pirmais notikums ir savienojums pasākums, kuru mēs izmantojam, lai slēgtu citus mūsu pasākumus.

io.sockets.on (’savienojums’, funkcija (ligzda) {
socket.on (’createNote’, funkcija (dati) {
socket.broadcast.emit (’onNoteCreated’, dati);
});

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

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

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

No šejienes mēs pievienojam klausītājus izveidot piezīmi, updateNote, dzēstPiezīme un pārvietotPiezīme. Atzvana funkcijā mēs vienkārši pārraidām notikumu, lai ikviens klients, kurš klausās, varētu tikt informēts par notikumu.

Ir dažas lietas, par kurām vērts norādīt par atzvanīšanas funkcijām atsevišķos notikumu apstrādātājos. Viens, ja vēlaties nosūtīt notikumu visiem citiem, izņemot klientu, kurš izstaroja jūsu ievietoto notikumu apraide pirms izstaro funkciju izsaukums. Otrkārt, mēs vienkārši nododam pasākuma lietderīgo slodzi ieinteresētajām pusēm, lai viņi to varētu apstrādāt pēc saviem ieskatiem.

05. Sāciet savus dzinējus!

Tagad, kad esam definējuši savas atkarības un izveidojuši lietojumprogrammu Node.js ar Express un Socket.io pilnvarām, ir diezgan vienkārši inicializēt Node.js serveri.

Vispirms instalējiet savas Node.js atkarības, piemēram:

npm instalēt

Un tad jūs palaižat serveri šādi:

mezgls app.js

Un tad! Pārlūkprogrammā dodaties uz šo adresi. Bam!

06. Dažas vaļsirdīgas domas pirms došanās tālāk

Es galvenokārt esmu frontend izstrādātājs, un sākotnēji mani nedaudz iebiedēja Node.js servera pievienošana manai lietojumprogrammai. AngularJS daļa bija snap, bet servera puses JavaScript? Ievietojiet rāpojošo mūziku no šausmu filmas.

Bet es biju pilnīgi stāvs, lai atklātu, ka es varu izveidot statisku tīmekļa serveri tikai dažās koda rindiņās un vēl dažās rindiņās izmantot Socket.io, lai apstrādātu visus notikumus starp pārlūkiem. Un tas joprojām bija tikai JavaScript! Savlaicīguma labad mēs aplūkojam tikai dažas funkcijas, taču es ceru, ka līdz raksta beigām jūs redzēsiet, ka peldēt ir viegli - un baseina dziļais gals nav tik biedējošs.

07. Klients

Tagad, kad mūsu serverim ir izveidojies drošs pamats, pārejiet pie manis iecienītās daļas - klienta! Mēs izmantosim AngularJS, jQueryUI velkamajai daļai un Twitter Bootstrap stila bāzei.

08. Kailie kauli

Personīgi izvēloties, kad, startējot jaunu AngularJS lietojumprogrammu, man patīk ātri noteikt minimālo līmeni, kas, manuprāt, būs jāsāk, un pēc tam jāsāk atkārtot pēc iespējas ātrāk.

Katrai AngularJS lietojumprogrammai ir jābūt sāknētai ar vismaz vienu kontrolieri, un tāpēc es vienmēr sāku.

Lai automātiski sāknētu lietojumprogrammu, jums tā vienkārši jāpievieno ng-app uz HTML mezglu, kurā vēlaties, lai lietojumprogramma dzīvo. Lielāko daļu laika tā pievienošana HTML tagam būs pilnīgi pieņemama. Esmu pievienojis arī atribūtu ng-app pateikt, ka vēlos izmantot lietotne modulis, kuru es definēšu tikai vienā mirklī.

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

Es zinu, ka man būs vajadzīgs vismaz viens kontrolieris, tāpēc es to izsaukšu, izmantojot ng-kontrolieris un piešķir tam īpašību MainCtrl.

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

Tāpēc tagad mēs esam izveidojuši moduļa nosaukumu lietotne un kontrolieris nosaukts MainCtrl. Ļaujiet mums iet uz priekšu un izveidot tos tūlīt.

Moduļa izveide ir diezgan vienkārša. Jūs to definējat, zvanot leņķiskais.modulis un dodot tai vārdu. Turpmāk tukša masīva otrais parametrs ir tas, kur jūs varat injicēt apakšmoduļus lietošanai lietojumprogrammā. Tas ir ārpus šīs apmācības darbības jomas, bet ir ērts, kad jūsu lietojumprogramma sāk augt sarežģītībā un vajadzībām.

// public / js / cooper.js
var app = leņķiskais.modulis (’app’, []);

Mēs deklarēsim dažus tukšus vietturus lietotne modulis, kas sākas ar MainCtrl zemāk.Mēs tos visus aizpildīsim vēlāk, bet es jau no paša sākuma gribēju ilustrēt pamatstruktūru.

app.controller (’MainCtrl’, funkcija ($ sfēra) {});

Mēs arī gatavojamies aptvert Socket.io funkcionalitāti a kontaktligzda pakalpojumu, lai mēs varētu iekapsulēt šo objektu un neatstāt to peldošu globālajā vārdu telpā.

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

Un, kamēr mēs esam pie tā, mēs pasludināsim direktīvu ar nosaukumu līmlapiņa ko mēs izmantosim, lai iekapsulētu līmlapiņu funkcionalitāti.

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

Tāpēc pārskatīsim līdz šim paveikto. Mēs esam sākuši lietotni, izmantojot ng-app un deklarēja mūsu lietojumprogrammas kontrolieri HTML. Esam arī definējuši lietojumprogrammas moduli un izveidojuši MainCtrl kontrolieris kontaktligzda pakalpojumu un līmlapiņa direktīvu.

09. Līmlapas izveidošana

Tagad, kad mums ir uzstādīts AngularJS lietojumprogrammas skelets, mēs sāksim veidot izveides funkciju.

app.controller (’MainCtrl’, funkcija ($ sfēra, ligzda) {// B.1
$ sfēra.notes = []; B.2

// Ienākošie
socket.on (’onNoteCreated’, funkcija (dati) {// B.3
$ sfēra.notes.push (dati);
});

// Izejošais
$ scope.createNote = function () {// B.4
var piezīme = {
id: new Date (). getTime (),
nosaukums: ‘Jauna piezīme’,
pamatteksts: “Gaida”
};

$ sfēra.notes.push (piezīme);
socket.emit (’createNote’, piezīme);
};

B.1 AngularJS ir iebūvēta atkarības ievadīšanas funkcija, tāpēc mēs injicējam a $ darbības joma objekts un kontaktligzda apkalpošana. The $ darbības joma objekts kalpo kā ViewModel un būtībā ir JavaScript objekts, kurā iekļauti daži notikumi, lai iespējotu divvirzienu datu sasaisti.

B.2. Mēs deklarējam masīvu, ar kuru mēs izmantosim skata saistīšanu.

B.3. Pievienojam klausītāju onNoteCreated notikums kontaktligzda pakalpojums un pasākuma lietderīgās slodzes iestumšana $ sfēra.piezīmes masīvs.

B.4. Mēs esam paziņojuši izveidot piezīmi metode, kas izveido noklusējumu Piezīme objektu un iestumj to $ sfēra.piezīmes masīvs. Tas izmanto arī kontaktligzda dienests izstaro izveidot piezīmi notikumu un iziet jauna piezīme objekts gar.

Tātad, tagad, kad mums ir piezīmes izveidošanas metode, kā mēs to nosauksim? Tas ir labs jautājums! HTML failā mēs pievienojam iebūvēto AngularJS direktīvu ng noklikšķiniet pogai un pēc tam pievienojiet izveidot piezīmi metodes izsaukums kā atribūta vērtība.

poga id = "createButton" ng-click = "createNote ()"> Izveidot piezīmi / pogu>

Laiks ātri pārskatīt līdz šim paveikto. Esam pievienojuši masīvu $ darbības joma objekts MainCtrl turēs visas lietojumprogrammas piezīmes. Mēs esam pievienojuši arī a izveidot piezīmi metode uz $ darbības joma objektu, lai izveidotu jaunu vietējo piezīmi, un pēc tam apraidi šo piezīmi citiem klientiem, izmantojot kontaktligzda apkalpošana. Esam arī pievienojuši notikumu klausītāju vietnē kontaktligzda pakalpojumu, lai mēs varētu zināt, kad citi klienti ir izveidojuši piezīmi, lai mēs varētu to pievienot savai kolekcijai.

10. Līmlapiņu parādīšana

Tagad mums ir iespēja izveidot piezīmes objektu un koplietot to starp pārlūkprogrammām, bet kā mēs to faktiski parādām? Šeit ienāk direktīvas.

Direktīvas un to sarežģītība ir plaša tēma, taču īsā versija ir tāda, ka tās sniedz iespēju paplašināt elementus un atribūtus ar pielāgotu funkcionalitāti. Direktīvas ir viegli iecienītākā daļa par AngularJS, jo ļauj būtībā izveidot visu DSL (domēna specifisko valodu) ap savu lietojumprogrammu HTML formātā.

Tas ir dabiski, ka, tā kā mēs savai sadarbības padomei veidosim piezīmju lapiņas, mums vajadzētu izveidot līmlapiņa direktīvu. Direktīvas tiek noteiktas, izsaucot direktīvas metodi modulī, kurā vēlaties to deklarēt, un nododot nosaukumu un funkciju, kas atgriež direktīvas definīcijas objektu. Direktīvas definīcijas objektam ir daudz iespējamo īpašību, kuras varat tajā definēt, taču šeit mēs izmantosim tikai dažus mūsu mērķiem.

Es iesaku jums apskatīt AngularJS dokumentāciju, lai redzētu visus rekvizītu sarakstus, kurus varat definēt direktīvas definīcijas objektā.

app.directive (’stickyNote’, funkcija (ligzda) {
var linker = funkcija (darbības joma, elements, attrs) {};

var kontrolieris = funkcija ($ sfēra) {};

atgriezties {
ierobežot: ’A’, // C.1
saite: saite, // C.2
kontrolieris: kontrolieris, // C.3
darbības joma: {// C.4
piezīme: ’=’,
ondelete: ’&’
}
};
});

C.1. Jūs varat ierobežot direktīvu ar noteiktu HTML elementu tipu. Divi visbiežāk ir elements vai atribūts, kuru jūs deklarējat, izmantojot E un A attiecīgi. Varat arī ierobežot to ar CSS klasi vai komentāru, taču tie nav tik bieži.

C.2 Saites funkcija ir vieta, kur ievietojat visu DOM manipulācijas kodu. Ir daži izņēmumi, kurus esmu atradis, bet tas vienmēr ir taisnība (vismaz 99 procenti gadījumu). Tas ir AngularJS pamatnoteikums, un tāpēc es to esmu uzsvēris.

C.3. Vadītāja funkcija darbojas tāpat kā galvenais kontrolieris, kuru mēs definējām lietojumprogrammai, bet $ darbības joma objekts, kuram ejam garām, ir raksturīgs DOM elementam, ar kuru direktīva dzīvo.

C.4 AngularJS ir izolētas darbības jomas jēdziens, kas ļauj skaidri noteikt, kā direktīvas darbības joma sazinās ar ārpasauli. Ja mēs nebūtu deklarējuši darbības jomu, direktīva būtu netieši mantota no vecāku darbības jomas ar vecāku un bērnu attiecībām. Daudzos gadījumos tas nav optimāli. Izolējot darbības jomu, mēs mazinām iespējas, ka ārējā pasaule var netīši un negatīvi ietekmēt jūsu direktīvas stāvokli.

Esmu paziņojis, ka divvirzienu dati ir saistoši Piezīme Ar = simbols un izteiksme, kas saistās ar ondelete Ar & simbols. Lūdzu, izlasiet AngularJS dokumentāciju, lai pilnībā izskaidrotu izolēto darbības jomu, jo tā ir viena no sarežģītākajām tēmām šajā sistēmā.

Tātad faktiski pievienosim DOM piezīmju lapiņu.

Tāpat kā jebkurš labs ietvars, arī AngularJS ir aprīkots ar patiešām lieliskām funkcijām tieši no kastes. Viena no ērtākajām funkcijām ir ng-atkārtot. Šī AngularJS direktīva ļauj jums ievadīt objektu masīvu, un tā dublē jebkuru tagu, uz kura tas ir, tik reižu, cik masīvā ir vienumi. Šajā gadījumā mēs atkārtojam piezīmes masīvs un kopēšana div elements un tā bērni piezīmes masīvs.

div sticky-note ng-repeat = "piezīme piezīmēs" note = "note" ondelete = "deleteNote (id)">
pogas tips = "poga" ng-click = "deleteNote (note.id)"> × / button>
ievade ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (piezīme)"
> {{note.body}} / textarea>
/ div>

Skaistums ng-atkārtot ir tas, ka tas ir saistīts ar jebkuru masīvu, kuru ievadāt, un, pievienojot masīvam vienumu, jūsu DOM elements tiks automātiski atjaunināts. Jūs varat spert šo soli tālāk un atkārtot ne tikai standarta DOM elementus, bet arī citas pielāgotās direktīvas. Tāpēc jūs redzat līmlapiņa kā elementa atribūtu.

Ir vēl divi pielāgotā koda biti, kas jāprecizē. Mēs esam izolējuši darbības jomu līmlapiņas direktīva par diviem īpašumiem. Pirmais ir saistošs definēts izolēts tvērums Piezīme īpašums. Tas nozīmē, ka ikreiz, kad piezīmes objekts mainās vecāku darbības jomā, tas automātiski atjauninās atbilstošo piezīmes objektu direktīvā un otrādi. Otra noteiktā izolētā darbības joma ir ondelete atribūts. Tas nozīmē, ka kad ondelete tiek saukts direktīvā, tas sauks jebkuru izteicienu, kas ir ondelete atribūts DOM elementā, kas instantizē direktīvu.

Kad tiek izveidota direktīva, tā tiek pievienota DOM un tiek izsaukta saites funkcija. Šī ir lieliska iespēja elementam iestatīt dažas noklusējuma DOM īpašības. Elementa parametrs, kuram mēs ejam garām, faktiski ir jQuery objekts, un tāpēc mēs varam tajā veikt jQuery darbības.

(AngularJS faktiski ir iebūvēts jQuery apakškopa, bet, ja jūs jau esat iekļāvis jQuery pilno versiju, AngularJS to atliks.)

app.directive (’stickyNote’, funkcija (ligzda) {
var linker = funkcija (darbības joma, elements, attrs) {
// Daži DOM ierosinājumi, lai tas būtu jauki
element.css (’pa kreisi’, ’10px’);
element.css (’top’, ’50px’);
elements.hide (). fadeIn ();
};
});

Iepriekš minētajā kodā mēs vienkārši novietojam lipīgo piezīmi uz skatuves un izbalējam.

11. Līmlapiņas dzēšana

Tāpēc tagad, kad varam pievienot un parādīt līmlapiņu, ir pienācis laiks dzēst līmlapiņas. Līmlapiņu izveide un dzēšana ir saistīta ar masīva vienumu pievienošanu un dzēšanu, kuriem piezīmes ir saistītas. Šī masīva uzturēšana ir vecāku atbildības joma, tāpēc mēs dzēšanas pieprasījumu esam radījuši direktīvā, bet ļaujam vecāku darbības jomai veikt faktisko smago celšanu.

Tāpēc mēs piedzīvojām visas grūtības, izveidojot direktīvā definētu izolētu darbības jomu: lai direktīva varētu iekšēji saņemt izdzēšanas notikumu un nodot to vecākam apstrādei.

Ievērojiet HTML direktīvā.

pogas tips = "poga" ng-click = "deleteNote (note.id)"> × / button>

Nākamā lieta, ko es teikšu, var šķist tāls ceļš, bet atcerieties, ka mēs esam vienā pusē, un tam būs jēga pēc tam, kad es to izstrādāju. Kad tiek noklikšķināts uz pogas līmlapiņas augšējā labajā stūrī, mēs zvanām dzēstPiezīme par direktīvas kontrolieri un nodošanu piezīme.id vērtība. Pēc tam kontrolieris zvana ondelete, kas pēc tam izpilda jebkuru izteicienu, kuru mēs tam pieslēdzām. Tik tālu, labi? Mēs kontrolierim izsaucam lokālu metodi, kas to nodod, izsaucot jebkuru izteiksmi, kas tika definēta izolētajā darbības jomā. Izteiciens, kas tiek izsaukts vecākiem, vienkārši tiek saukts dzēstPiezīme arī.

app.directive (’stickyNote’, funkcija (ligzda) {
var kontrolieris = funkcija ($ sfēra) {
$ scope.deleteNote = funkcija (id) {
$ sfēra.ondelete ({
ES izdarīju
});
};
};

atgriezties {
ierobežot: “A”,
saite: saite,
kontrolieris: kontrolieris,
darbības joma: {
piezīme: ’=’,
ondelete: ’&’
}
};
});

(Izmantojot izteiksmē definētu izolētu tvērumu, parametri tiek nosūtīti objektu kartē.)

Vecāku darbības jomā dzēstPiezīme tiek izsaukts un veic diezgan standarta dzēšanu, izmantojot stūrains.katram lietderības funkcija, lai atkārtotu piezīmju masīvu. Kad funkcija ir apstrādāta ar vietējo biznesu, tā iet uz priekšu un izstaro notikumu, lai pārējā pasaule atbilstoši reaģētu.

app.controller (’MainCtrl’, funkcija ($ sfēra, ligzda) {
$ sfēra.notes = [];

// Ienākošie
socket.on (’onNoteDeleted’, funkcija (dati) {
$ scope.deleteNote (data.id);
});

// Izejošais
$ scope.deleteNote = funkcija (id) {
var oldNotes = $ sfēra.notes,
newNotes = [];

angular.forEach (oldNotes, funkcija (piezīme) {
if (piezīme.id! == id) newNotes.push (piezīme);
});

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

12. Līmlapiņas atjaunināšana

Mēs gūstam fantastiskus panākumus! Tagad es ceru, ka jūs sākat redzēt dažus modeļus, kas izriet no šīs viesuļvētras, kuru mēs apmeklējam. Nākamais saraksta vienums ir atjaunināšanas funkcija.

Mēs sāksim ar faktiskajiem DOM elementiem un sekosim tam līdz serverim un atgriezīsimies pie klienta. Vispirms mums jāzina, kad tiek mainīts līmlapas nosaukums vai pamatteksts. AngularJS formas elementus uzskata par daļu no datu modeļa, lai jūs vienā momentā varētu piesaistīt divvirzienu datu saistīšanu. Lai to izdarītu, izmantojiet ng-modelis direktīvu un ievietojiet īpašumu, kuram vēlaties piesaistīties. Šajā gadījumā mēs to izmantosim piezīme.nosaukums un piezīme.ķermenis attiecīgi.

Kad kāda no šīm īpašībām mainās, mēs vēlamies iegūt šo informāciju, lai to nodotu tālāk. Mēs to paveicam ar ng-izmaiņas direktīvu un izmantojiet to, lai zvanītu updateNote un ievadiet pašu piezīmju objektu. AngularJS veic dažas ļoti gudras netīras pārbaudes, lai noteiktu, vai ir kāda vērtība ng-modelis ir mainījies un pēc tam izpilda izteicienu, kas atrodas ng-izmaiņas.

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

Lietošanas otrādi ng-izmaiņas ir tas, ka vietējā transformācija jau ir notikusi, un mēs esam tikai atbildīgi par ziņojuma nodošanu. Kontrolierī updateNote tiek izsaukts, un no turienes mēs izstarosim updateNote notikumu, kuru mūsu serveris varētu pārraidīt citiem klientiem.

app.directive (’stickyNote’, funkcija (ligzda) {
var kontrolieris = funkcija ($ sfēra) {
$ scope.updateNote = funkcija (piezīme) {
socket.emit (’updateNote’, piezīme);
};
};
});

Un direktīvas kontrolierī mēs klausāmies onNoteUpdated notikums, lai uzzinātu, kad ir atjaunināta cita klienta piezīme, lai mēs varētu atjaunināt vietējo versiju.

var kontrolieris = funkcija ($ sfēra) {
// Ienākošie
socket.on (’onNoteUpdated’, funkcija (dati) {
// Atjaunināt, ja tā pati piezīme
ja (dati.id == $ darbības joma.piezīme.id) {

$ sfēra.piezīme.title = dati.nosaukums;
$ sfēra.piezīme.body = dati.body;
}
});
};

13. Līmlapiņas pārvietošana

Šajā brīdī mēs būtībā esam veikuši apli ap CRUD bērnu baseinu, un dzīve ir laba! Salona trika labad, lai atstātu iespaidu uz draugiem, mēs pievienosim iespēju reāllaikā pārvietot piezīmes pa ekrānu un atjaunināt koordinātas. Nekrītiet panikā - tās ir tikai dažas citas koda rindas. Viss šis smagais darbs atmaksāsies. ES apsolu!

Mēs esam uzaicinājuši uz ballīti īpašo viesi jQueryUI, un mēs visu izdarījām par velkamajiem. Lai pievienotu iespēju lokāli vilkt piezīmi, ir nepieciešama tikai viena koda rindiņa. Ja jūs pievienojat elements.draggable (); Lai izveidotu saites funkciju, jūs dzirdēsit Survivor ‘Tīģera aci’, jo tagad varat vilkt piezīmes apkārt.

Mēs vēlamies uzzināt, kad vilkšana ir beigusies, un sagūstīt jaunās koordinātas, kurām iet garām. jQueryUI izveidoja daži ļoti gudri cilvēki, tāpēc, kad vilkšana apstājas, vienkārši jānosaka stop notikuma atzvanīšanas funkcija. Mēs paķeram piezīme.id no darbības jomas objekta un kreisās un augšējās CSS vērtības no ui objekts. Ar šīm zināšanām mēs darām to, ko visu laiku darījām: izstaro!

app.directive (’stickyNote’, funkcija (ligzda) {
var linker = funkcija (darbības joma, elements, attrs) {
element.draggable ({
stop: funkcija (notikums, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, funkcija (dati) {
// Atjaunināt, ja tā pati piezīme
ja (dati.id == sfēra.piezīme.id) {
element.animate ({
pa kreisi: data.x,
augša: dati.y
});
}
});
};
});

Šajā brīdī nevajadzētu pārsteigt, ka mēs arī klausāmies ar pārvietošanos saistītu notikumu no kontaktligzdas pakalpojuma. Šajā gadījumā tas ir onNoteMoved notikumu un, ja piezīme ir atbilstoša, mēs atjauninām kreiso un augšējo CSS rekvizītus. Bam! Gatavs!

14. Bonuss

Šī ir bonusa sadaļa, kuru es neiekļautu, ja es nebūtu pilnīgi pārliecināts, ka jūs to varētu sasniegt mazāk nekā 10 minūtēs. Mēs gatavojamies izvietot tiešraides serverī (es joprojām esmu pārsteigts, cik viegli tas ir izdarāms).

Pirmkārt, jums jāiet reģistrēties bezmaksas Nodejitsu izmēģinājumam. Izmēģinājums ir bezmaksas 30 dienas, kas ir lieliski piemērots, lai kājas samitrinātu.

Kad esat izveidojis savu kontu, jāinstalē jitsu pakotne, ko varat izdarīt no komandrindas, izmantojot $ npm instalējiet jitsu -g.

Tad jums jāpiesakās no komandrindas, izmantojot $ jitsu pieteikšanās un ievadiet akreditācijas datus.

Pārliecinieties, vai esat tieši savā lietotnē, ierakstiet izvietot $ jitsu un iziet cauri jautājumiem. Es parasti atstāju pēc iespējas vairāk noklusējuma, tas nozīmē, ka es piešķiru savai lietojumprogrammai nosaukumu, bet ne apakšdomēnu utt.

Un, mani dārgie draugi, tas viss ir! Tiklīdz vietne ir izvietota un tā ir gatava darbam, saņemsit savas lietojumprogrammas URL no servera izvades.

15. Secinājums

Šajā rakstā mēs esam apskatījuši daudz AngularJS pamatu, un es ceru, ka jums šajā procesā bija ļoti jautri. Manuprāt, tas ir patiešām veikls, ko jūs varat paveikt ar AngularJS un Socket.io aptuveni 200 koda rindiņās.

Bija dažas lietas, kuras es neaptvēru, lai koncentrētos uz galvenajiem jautājumiem, taču es aicinu jūs nojaukt avotu un paspēlēties ar lietojumprogrammu. Mēs esam izveidojuši spēcīgu pamatu, taču joprojām varat pievienot daudz funkciju. Saņemiet uzlaušanu!

Lukašs Ruebelke ir tehnoloģiju entuziasts un ir līdzautors AngularJS darbībā publikāciju komplektēšanai. Viņa iecienītākā nodarbe ir panākt cilvēku tikpat lielu sajūsmu kā jaunajās tehnoloģijās. Viņš vada Fēnikss tīmekļa lietojumprogrammu lietotāju grupu un kopā ar citiem noziedzības partneriem ir rīkojis vairākus hakatonus.

Patika tas? Izlasiet šos!

• Kā izveidot lietotni
• Mūsu iecienītākie tīmekļa fonti - un tie nemaksā ne santīma
• Atklājiet paplašinātās realitātes iespējas
• Lejupielādējiet bezmaksas tekstūras: augsta izšķirtspēja un gatava lietošanai tūlīt