AngularJS pakikipagtulungan board kasama ang Socket.io

Nilalaman

• 01. Ang server
• 02. Ang mga walang laman na buto
• 03. Ipahayag ang iyong mga dependency
• 04. Wire up Socket.io
• 05. Simulan ang iyong mga makina!
• 06. Ang ilang mga tapat na saloobin bago magpatuloy
• 07. Ang kliyente
• 08. Ang mga hubad na buto
• 09. Lumilikha ng isang malagkit na tala
• 10. Pagpapakita ng mga malagkit na tala
• 11. Pagtanggal ng isang sticky note
• 12. Pag-update ng isang sticky note
• 13. Paglipat ng isang sticky note
• 14. Ang bonus
• 15. Konklusyon
• Nagustuhan ito? Basahin ang mga ito!

• Kailangan ng kaalaman: Makitang JavaScript
• Kinakailangan: Node.js, NPM
• Oras ng Proyekto: 2 oras

Ang AngularJS ay partikular na angkop para sa paglikha ng mga mayamang aplikasyon ng client-side sa browser at, kapag nagdagdag ka ng isang maliit na Socket.io sa halo, talagang nakakainteres ang mga bagay. Sa artikulong ito ay magtatayo kami ng isang real-time na board ng pakikipagtulungan na gumagamit ng AngularJS para sa client-side application at Socket.io upang ibahagi ang estado sa pagitan ng lahat ng mga konektadong kliyente.

Takpan natin ang kaunting pag-alaga sa bahay bago tayo magsimula. Ipagpalagay ko na mayroon kang pangunahing kaalaman sa HTML at JavaScript dahil hindi ko sasakupin ang bawat maliit na sulok ng code. Halimbawa, hindi ko tatawagan ang mga CSS at JavaScript file na isinama ko sa pinuno ng HTML file dahil walang bagong impormasyon doon.

Gayundin, hinihimok kita na kunin ang code mula sa aking GitHub account upang sumunod. Ang aking mabuting kaibigan na si Brian Ford ay mayroon ding mahusay na binhi ng Socket.io, na pinagbatayan ko ang ilan sa aking mga orihinal na ideya.

Ang apat na pangunahing tampok na gusto namin sa board ng pakikipagtulungan ay ang kakayahang lumikha ng isang tala, basahin ang mga tala, i-update ang isang tala, tanggalin ang isang tala at, para sa kasiyahan, ilipat ang isang tala sa pisara. Oo, tama iyan, nakatuon kami sa karaniwang mga tampok na CRUD. Naniniwala ako na sa pamamagitan ng pagtuon sa mga pangunahing tampok na ito, sasakupin namin ang sapat na code para sa mga pattern na lumitaw upang maaari mong kunin ang mga ito at ilapat ang mga ito sa ibang lugar.

01. Ang server

Magsisimula kami sa server ng Node.js dahil magsisilbi itong pundasyon na pagbuo namin ng lahat.

Magtatayo kami ng isang Node.js server na may Express at Socket.io. Ang dahilan kung bakit ginagamit namin ang Express ay nagbibigay ito ng magandang mekanismo para sa pag-set up ng isang static na server ng asset sa loob ng Node.js. Ang Express ay mayroong isang bungkos ng talagang kamangha-manghang mga tampok ngunit, sa kasong ito, gagamitin namin ito upang bisahin ang application nang malinis sa pagitan ng server at client.

(Nagpapatakbo ako sa ilalim ng palagay na mayroon kang naka-install na Node.js at NPM. Ipapakita sa iyo ng isang mabilis na paghahanap sa Google kung paano mai-install ang mga ito kung hindi mo ginagawa.)

02. Ang mga walang laman na buto

Kaya upang maitayo ang mga hubad na buto ng server, kailangan nating gumawa ng ilang bagay upang makabangon at tumakbo.

// app.js

// A.1
var express = nangangailangan ('express'),
app = express ();
server = nangangailangan ('http'). createServer (app),
io = nangangailangan ('socket.io'). makinig (server);

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

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

A.1 Kami ay nagdedeklara at nagsisimula ng aming mga modyul na Node.js upang magamit namin ang mga ito sa aming aplikasyon. Kami ay nagdedeklara ng Express, instantiating Express at pagkatapos ay lumilikha ng isang HTTP server at ipinapadala ang halimbawang Express dito. At mula roon ay pinag-uusapan namin ang Socket.io at sinasabi ito na bantayan ang aming halimbawa ng server.

A.2 Sinasabi namin sa aming Express app na gamitin ang aming pampublikong direktoryo upang maghatid ng mga file mula sa.

A.3 Sinimulan namin ang server at sasabihin sa amin na makinig sa port 1337.

Sa ngayon ay naging medyo walang sakit at mabilis. Naniniwala ako na mas mababa kami sa 10 mga linya sa code at mayroon na kaming isang gumaganang Node.js server. Patuloy!

03. Ipahayag ang iyong mga dependency

// packages.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"bersyon": "0.0.1-1",
"pribado": totoo,
"mga dependency": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Ang isa sa pinakamagandang tampok ng NPM ay ang kakayahang ideklara ang iyong mga dependency sa a mga pakete.json file at pagkatapos ay awtomatikong mai-install ang mga ito sa pamamagitan ng i-install sa linya ng utos.

04. Wire up Socket.io

Natukoy na namin ang mga pangunahing tampok na gusto namin sa application at sa gayon kailangan naming i-set up ang mga tagapakinig ng kaganapan ng Socket.io at isang naaangkop na pagsara upang mahawakan ang kaganapan para sa bawat operasyon.

Sa code sa ibaba mapapansin mo na mahalagang ito ay isang pagsasaayos ng mga tagapakinig ng kaganapan at mga callback. Ang unang kaganapan ay ang koneksyon kaganapan, na ginagamit namin upang ma-wire ang aming iba pang mga kaganapan sa pagsasara.

io.sockets.on (’koneksyon’, pagpapaandar (socket) {
socket.on ('createNote', pagpapaandar (data) {
socket.broadcast.emit ('onNoteCreated', data);
});

socket.on ('updateNote', pagpapaandar (data) {
socket.broadcast.emit ('onNoteUpdated', data);
});

socket.on ('deleteNote', pagpapaandar (data) {
socket.broadcast.emit ('onNoteDeleted', data);
});

socket.on ('moveNote', pagpapaandar (data) {
socket.broadcast.emit ('onNoteMove', data);
});
});

Mula dito nagdagdag kami ng mga tagapakinig lumikhaNote, updateNote, tanggalin ang Tandaan at ilipatNote. At sa pagpapaandar ng callback, simpleng pagsasahimpapawid namin kung anong kaganapan ang nangyari upang maabisuhan ang anumang nakikinig na kliyente na nangyari ang kaganapan.

Mayroong ilang mga bagay na nagkakahalaga ng pagturo tungkol sa mga function ng callback sa mga indibidwal na handler ng kaganapan. Isa, kung nais mong magpadala ng isang kaganapan sa iba pa ngunit ang client na naglabas ng kaganapan na iyong ipinasok mag-broadcast bago ang nagpapalabas tawag sa pag-andar. Pangalawa, simpleng ipinapasa namin ang payload ng kaganapan sa mga interesadong partido upang maproseso nila ito kung paano nila makita na angkop.

05. Simulan ang iyong mga makina!

Ngayon na natukoy namin ang aming mga dependency at na-set up ang aming application na Node.js gamit ang mga kapangyarihan ng Express at Socket.io, medyo simple na ipasimuno ang Node.js server.

Una mong mai-install ang iyong mga dependency sa Node.js tulad nito:

i-install

At pagkatapos ay simulan mo ang server na tulad nito:

node app.js

At pagkatapos! Pumunta ka sa address na ito sa iyong browser. Bam!

06. Ang ilang mga tapat na saloobin bago magpatuloy

Pangunahin ako na isang developer ng frontend at una akong medyo na-intimidate sa pag-hook up ng isang Node.js server sa aking application. Ang bahagi ng AngularJS ay isang snap ngunit ang panig ng server ay JavaScript? I-pila ang katakut-takot na musika mula sa isang nakakatakot na pumitik.

Ngunit, ako ay ganap na floored upang matuklasan na maaari kong mag-set up ng isang static na web server sa ilang mga linya lamang ng code at sa ilang mga linya pa gamitin ang Socket.io upang hawakan ang lahat ng mga kaganapan sa pagitan ng mga browser. At JavaScript pa lang ito! Para sa kapakanan ng pagiging maagap, nagtatakip lamang kami ng ilang mga tampok, ngunit inaasahan kong sa pagtatapos ng artikulo ay makikita mo na madaling lumangoy - at ang malalim na dulo ng pool ay hindi gaanong nakakatakot.

07. Ang kliyente

Ngayon na mayroon kaming matatag na pundasyon sa lugar kasama ang aming server, magpatuloy kami sa aking paboritong bahagi - ang kliyente! Gagamitin namin ang AngularJS, jQueryUI para sa draggable na bahagi at Twitter Bootstrap para sa isang style base.

08. Ang mga hubad na buto

Bilang isang bagay ng personal na kagustuhan, kapag nagsimula ako ng isang bagong application ng AngularJS nais kong mabilis na tukuyin ang hubad na pinakamaliit na alam kong kakailanganin kong magsimula at pagkatapos ay simulan ang pag-ulit dito nang mas mabilis hangga't maaari.

Ang bawat aplikasyon ng AngularJS ay kailangang ma-bootstrap ng hindi bababa sa isang tagapamahala na naroroon at sa gayon ito ay pangkalahatan kung saan palagi akong nagsisimula.

Upang awtomatikong i-bootstrap ang application na kailangan mo upang idagdag lamang ng-app sa HTML node kung saan mo nais ang application na mabuhay. Karamihan sa mga oras, ang pagdaragdag nito sa tag ng HTML ay magiging ganap na katanggap-tanggap. Nagdagdag din ako ng isang katangian ng-app upang sabihin na nais kong gamitin ang app module, na tutukuyin ko sa isang sandali lamang.

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

Alam kong kakailanganin ko ng kahit isang kontrolado at kaya tatawagin ko iyon gamit ang ng-tagakontrol at pagtatalaga nito ng isang pag-aari ng MainCtrl.

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

Kaya't nasa hook kami para sa isang module na pinangalanan app at isang pangngalan na pinangalanan MainCtrl. Tayo ay magpatuloy at likhain ang mga ito ngayon.

Ang paglikha ng isang module ay medyo prangka. Tinutukoy mo ito sa pamamagitan ng pagtawag angular.module at pagbibigay nito ng isang pangalan. Para sa sanggunian sa hinaharap, ang pangalawang parameter ng isang walang laman na array ay kung saan maaari kang mag-iniksyon ng mga sub-module para magamit sa application. Wala ito sa saklaw ng tutorial na ito, ngunit madaling gamitin kapag nagsimulang lumaki ang iyong aplikasyon sa pagiging kumplikado at mga pangangailangan.

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

Ipapahayag namin ang ilang mga walang laman na placeholder sa app modyul na nagsisimula sa MainCtrl sa ibaba.Punan namin ang lahat ng ito sa paglaon ngunit nais kong ilarawan ang pangunahing istraktura mula sa simula.

app.controller ('MainCtrl', pagpapaandar ($ saklaw) {});

Ipapabalot din namin ang pagpapaandar ng Socket.io sa a socket serbisyo upang ma-encapsulate namin ang bagay na iyon at hindi iwan ito na lumulutang sa pandaigdigang namespace.

app.factory ('socket', pagpapaandar ($ rootScope) {});

At habang nasa amin ito, magpapahayag kami ng isang direktiba na tinawag stickyNote gagamitin namin upang ma-encapsulate ang pag-andar ng malagkit na tala sa.

app.directive ('stickyNote', pagpapaandar (socket) {});

Kaya suriin natin kung ano ang nagawa natin sa ngayon. Kami ay may bootstrapped ang application gamit ng-app at idineklara ang aming application controller sa HTML. Tinukoy din namin ang module ng aplikasyon at nilikha ang MainCtrl taga-kontrol, ang socket serbisyo at ang stickyNote direktiba

09. Lumilikha ng isang malagkit na tala

Ngayon na mayroon kaming balangkas ng AngularJS application sa lugar, magsisimula kaming itayo ang tampok na paglikha.

app.controller ('MainCtrl', pagpapaandar ($ saklaw, socket) {// B.1
$ saklaw.notes = []; // B.2

// Papasok
socket.on ('onNoteCreated', pagpapaandar (data) {// B.3
$ saklaw.notes.push (data);
});

// Papalabas
$ saklaw.createNote = pagpapaandar () {// B.4
var note = {
id: bagong Petsa (). getTime (),
pamagat: 'Bagong Tala',
katawan: 'Nakabinbin'
};

$ saklaw.notes.push (tala);
socket.emit ('createNote', tala);
};

Ang B.1 AngularJS ay may tampok na pag-iniksyon ng dependency na nakapaloob dito kaya't nag-iiniksyon kami a $ saklaw bagay at ang socket serbisyo Ang $ saklaw Ang object ay nagsisilbing isang ViewModel at isa lamang na isang object ng JavaScript na may ilang mga kaganapan na inihurnong dito upang paganahin ang two-way databinding.

B.2 Kami ay nagdedeklara ng array kung saan gagamitin namin upang maiugnay ang view.

B.3 Nagdaragdag kami ng isang tagapakinig para sa onNoteCreated kaganapan sa socket serbisyo at itulak ang kargamento ng kaganapan sa $ saklaw.notes array

B.4 Naideklara namin ang a lumikhaNote paraan na lumilikha ng isang default tandaan bagay at itulak ito sa $ saklaw.notes array Gumagamit din ito ng socket serbisyo na naglalabas ng lumikhaNote kaganapan at ipasa ang bagong tala bagay kasama.

Kaya ngayon na mayroon kaming pamamaraan upang likhain ang tala, paano natin ito tatawagin? Magandang tanong iyan! Sa HTML file, idinagdag namin ang built sa direktiba ng AngularJS ng-click sa pindutan at pagkatapos ay idagdag ang lumikhaNote tawag sa paraan bilang halaga ng katangian.

button id = "create Button" ng-click = "createNote ()"> Lumikha Tandaan / pindutan>

Oras para sa isang mabilis na pagsusuri ng kung ano ang nagawa natin sa ngayon. Nagdagdag kami ng isang array sa $ saklaw bagay sa MainCtrl hahawak iyon sa lahat ng mga tala para sa application. Nagdagdag din kami ng a lumikhaNote pamamaraan sa $ saklaw object upang lumikha ng isang bagong lokal na tala at pagkatapos ay i-broadcast ang tala na iyon sa iba pang mga kliyente sa pamamagitan ng socket serbisyo Nagdagdag din kami ng isang tagapakinig ng kaganapan sa socket serbisyo upang malaman natin kung ang ibang mga kliyente ay lumikha ng isang tala upang maaari namin itong idagdag sa aming koleksyon.

10. Pagpapakita ng mga malagkit na tala

Mayroon kaming kakayahang lumikha ng isang bagay ng tala at ibahagi ito sa pagitan ng mga browser ngunit paano namin talaga ito ipinapakita? Dito pumapasok ang mga direktiba.

Ang mga tagubilin at kanilang mga intricacies ay isang malawak na paksa, ngunit ang maikling bersyon ay nagbibigay sila ng isang paraan upang mapalawak ang mga elemento at katangian na may pasadyang pagpapaandar. Ang mga tagubilin ay madali ang aking paboritong bahagi tungkol sa AngularJS sapagkat pinapayagan ka nitong lumikha ng isang buong DSL (Tiyak na Wika ng Domain) sa paligid ng iyong application sa HTML.

Likas na dahil lilikha kami ng mga malagkit na tala para sa aming board ng pakikipagtulungan na dapat naming likhain stickyNote direktiba Ang mga tagubilin ay tinukoy sa pamamagitan ng pagtawag sa pamamaraan ng direktiba sa isang module na nais mong ideklara ito at ipasa sa isang pangalan at isang pagpapaandar na nagbabalik ng isang direktibong bagay na kahulugan. Ang object ng kahulugan ng direktiba ay may maraming mga posibleng pag-aari na maaari mong tukuyin dito, ngunit gagamitin lamang namin ang ilan para sa aming mga layunin dito.

Inirerekumenda ko na suriin mo ang dokumentasyon ng AngularJS upang makita ang buong listahan ng mga pag-aari na maaari mong tukuyin sa direktang kahulugan ng bagay.

app.directive ('stickyNote', pagpapaandar (socket) {
var linker = function (saklaw, elemento, attrs) {};

var controller = function ($ saklaw) {};

ibalik {
paghigpitan: 'A', // C.1
link: linker, // C.2
Controller: Controller, // C.3
saklaw: {// C.4
tandaan: ’=’,
ondelete: ’&’
}
};
});

C.1 Maaari mong paghigpitan ang iyong direktiba sa isang tiyak na uri ng elemento ng HTML. Ang dalawang pinakakaraniwan ay elemento o katangian, na ipinapahayag mong ginagamit mo E at A ayon sa pagkakabanggit. Maaari mo ring paghigpitan ito sa isang klase ng CSS o isang komento, ngunit hindi ito karaniwan.

C.2 Ang pagpapaandar ng link ay kung saan mo inilalagay ang lahat ng iyong DOM code ng pagmamanipula. Mayroong ilang mga pagbubukod na nakita ko, ngunit ito ay laging totoo (hindi bababa sa 99 porsyento ng oras). Ito ay isang pangunahing alituntunin sa ground ng AngularJS at kung bakit ko ito binigyang diin.

C.3 Gumagana ang pagpapaandar ng controller tulad ng pangunahing tagapagtukoy na tinukoy namin para sa application ngunit ang $ saklaw ang bagay na nadaanan namin ay tukoy sa elemento ng DOM na nabubuhay ang direktiba.

Ang C.4 AngularJS ay may isang konsepto ng nakahiwalay na saklaw, na nagbibigay-daan sa iyo upang malinaw na tukuyin kung paano nakikipag-usap ang saklaw ng isang direktiba sa labas ng mundo. Kung hindi namin idineklara ang saklaw ang direktiba ay maaaring implicit na minana mula sa saklaw ng magulang na may ugnayan ng magulang at anak. Sa maraming mga kaso hindi ito pinakamainam. Sa pamamagitan ng paghihiwalay ng saklaw pinapagaan natin ang mga pagkakataong ang labas ng mundo ay maaaring hindi sinasadya at masamang makaapekto sa estado ng iyong direktiba.

Naideklara ko ang two-way data-binding sa tandaan kasama ang = simbolo at isang expression na umiiral sa ondelete kasama ang & simbolo. Mangyaring basahin ang dokumentasyon ng AngularJS para sa isang buong paliwanag ng nakahiwalay na saklaw dahil ito ay isa sa mga mas kumplikadong paksa sa balangkas.

Kaya't magdagdag talaga tayo ng isang malagkit na tala sa DOM.

Tulad ng anumang mabuting balangkas, ang AngularJS ay mayroong ilang talagang mahusay na mga tampok mula sa kahon. Isa sa mga handiest tampok ay ng-ulitin. Pinapayagan ka ng direktiba na ito ng AngularJS na pumasa sa isang hanay ng mga bagay at dinoble nito ang anumang tag na ito nang maraming beses hangga't may mga item sa array. Sa kaso sa ibaba, inuulit namin ang mga tala array at pagkopya ng div elemento at mga anak nito para sa haba ng mga tala array

div sticky-note ng-ulitin = "tala sa mga tala" note = "note" ondelete = "deleteNote (id)">
type type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Ang ganda ng ng-ulitin ay nakasalalay ito sa anumang array na naipapasok mo at, kapag nagdagdag ka ng isang item sa array, awtomatikong maa-update ang iyong elemento ng DOM. Maaari mong gawin ito sa isang hakbang nang higit pa at ulitin hindi lamang ang mga karaniwang elemento ng DOM ngunit ang iba pang mga pasadyang direktiba rin. Iyon ang dahilan kung bakit nakikita mo sticky-note bilang isang katangian sa elemento.

Mayroong dalawang iba pang mga piraso ng pasadyang code na kailangang linawin. Inihiwalay namin ang saklaw sa malagkit-tala direktiba sa dalawang pag-aari. Ang una ay ang umiiral na tinukoy na nakahiwalay na saklaw sa tandaan pag-aari Nangangahulugan ito na tuwing nagbabago ang tala ng bagay sa saklaw ng magulang, awtomatiko nitong mai-a-update ang kaukulang tala ng bagay sa direktiba at vice versa. Ang iba pang tinukoy na nakahiwalay na saklaw ay nasa ondelete katangian Ang ibig sabihin nito ay kailan ondelete ay tinawag sa direktiba, tatawag ito sa kung anong expression ang nasa ondelete katangian sa elemento ng DOM na nagsisimula sa direktiba.

Kapag nabago ang isang direktiba idinagdag ito sa DOM at tinawag ang pagpapaandar ng link. Ito ay isang perpektong pagkakataon upang magtakda ng ilang mga default na pag-aari ng DOM sa elemento. Ang parameter ng elemento na nadaanan namin ay talagang isang object ng jQuery at sa gayon maaari naming maisagawa ang mga pagpapatakbo ng jQuery dito.

(AngularJS ay talagang may isang subset ng jQuery na nakapaloob dito ngunit kung isinama mo na ang buong bersyon ng jQuery, ang AngularJS ay magpapaliban doon.)

app.directive ('stickyNote', pagpapaandar (socket) {
var linker = function (saklaw, elemento, attrs) {
// Ang ilang pagsisimula ng DOM upang gawin itong maganda
element.css ('left', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Sa code sa itaas ay simpleng pinuposisyon namin ang malagkit na tala sa entablado at pagkupas nito.

11. Pagtanggal ng isang sticky note

Kaya ngayon na maaari kaming magdagdag at magpakita ng isang sticky note, oras na upang tanggalin ang mga sticky note. Ang paglikha at pagtanggal ng mga malagkit na tala ay isang bagay ng pagdaragdag at pagtanggal ng mga item mula sa array na nakasalalay sa mga tala. Ito ang responsibilidad ng saklaw ng magulang upang mapanatili ang array na iyon, kung saan nagmula kami sa kahilingan sa pagtanggal mula sa loob ng direktiba, ngunit hayaan ang saklaw ng magulang na gawin ang aktwal na mabibigat na pag-angat.

Ito ang dahilan kung bakit dumaan kami sa lahat ng mga problema sa paglikha ng expression na tinukoy na nakahiwalay na saklaw sa direktiba: kaya ang direktiba ay maaaring makatanggap ng pang-delete na kaganapan sa loob at maipasa ito sa magulang nito para sa pagproseso.

Pansinin ang HTML sa loob ng direktiba.

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

Ang susunod na bagay na sasabihin ko ay maaaring parang malayo sa paligid ngunit tandaan na nasa parehong panig tayo at magkakaroon ng katuturan pagkatapos kong idetalye. Kapag ang pindutan sa kanang sulok sa itaas ng kanang sticky note ay na-click na tumatawag kami tanggalin ang Tandaan sa control ng direktiba at pagpasa sa tala.id halaga Tumawag ang Controller pagkatapos ondelete, na kung saan pagkatapos ay isakatuparan ang anumang expression na na-wire namin dito. Sa ngayon napakahusay? Tumatawag kami ng isang lokal na pamamaraan sa controller na kung saan ay ibibigay ito sa pamamagitan ng pagtawag sa anumang expression na tinukoy sa nakahiwalay na saklaw. Ang expression na tatawag sa magulang ay nagkakaroon ng tawag tanggalin ang Tandaan din.

app.directive ('stickyNote', pagpapaandar (socket) {
var controller = function ($ saklaw) {
$ saklaw.deleteNote = pagpapaandar (id) {
$ saklaw.ondelete ({
ginawa ko
});
};
};

ibalik {
paghigpitan: 'A',
link: linker,
Controller: Controller,
saklaw: {
tandaan: ’=’,
ondelete: ’&’
}
};
});

(Kapag gumagamit ng natukoy na expression na nakahiwalay na saklaw, ang mga parameter ay ipinapadala sa isang mapa ng object.)

Sa saklaw ng magulang, tanggalin ang Tandaan tinawag at gumagawa ng isang medyo pamantayan ng pagtanggal gamit ang angular.forEach pagpapaandar ng utility upang umulit sa array ng mga tala. Kapag naasikaso na ng pagpapaandar ang lokal na negosyo ay nagpapatuloy ito at naglalabas ng kaganapan para sa natitirang bahagi ng mundo na tumugon nang naaayon.

app.controller ('MainCtrl', pagpapaandar ($ saklaw, socket) {
$ saklaw.notes = [];

// Papasok
socket.on ('onNoteDeleted', pagpapaandar (data) {
$ saklaw.deleteNote (data.id);
});

// Papalabas
$ saklaw.deleteNote = pagpapaandar (id) {
var oldNotes = $ saklaw.notes,
newNotes = [];

angular.forEach (oldNotes, function (note) {
kung (note.id! == id) newNotes.push (note);
});

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

12. Pag-update ng isang sticky note

Gumagawa kami ng kamangha-manghang pag-unlad! Sa ngayon inaasahan kong nagsisimula ka nang makakita ng ilang mga pattern na umuusbong mula sa pag-ikot na ito ng ipoipo na ginagawa namin. Susunod na item sa listahan ay ang tampok na pag-update.

Magsisimula kami sa aktwal na mga elemento ng DOM at susundan ito hanggang sa server at bumalik sa kliyente. Una kailangan nating malaman kung kailan binabago ang pamagat o katawan ng sticky note. Tinatrato ng AngularJS ang mga elemento ng form bilang bahagi ng modelo ng data upang maaari mong mai-hook ang two-way na data-binding sa isang iglap. Upang gawin ito gamitin ang ng-modelo direktiba at ilagay sa pag-aari na nais mong mabigkis. Sa kasong ito gagamitin namin tala.pamagat at tandaan.mga tao ayon sa pagkakabanggit.

Kapag nagbago ang alinman sa mga pag-aari na ito nais naming makuha ang impormasyong iyon upang maipasa. Natapos natin ito sa ng-pagbabago direktiba at gamitin ito upang tumawag updateNote at ipasa ang mismong bagay ng tala. Gumagawa ang AngularJS ng ilang napakatalino maruming pagsusuri upang makita kung ang halaga ng kung ano man ang nasa ng-modelo ay nagbago at pagkatapos ay isinasagawa ang expression na nasa ng-pagbabago.

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

Ang baligtad ng paggamit ng-pagbabago ay na ang lokal na pagbabago ay nangyari na at responsable lamang kami sa pagpapadala ng mensahe. Sa controller, updateNote ay tinawag at mula doon ay ilalabas natin ang updateNote kaganapan para sa aming server upang mag-broadcast sa iba pang mga kliyente.

app.directive ('stickyNote', pagpapaandar (socket) {
var controller = function ($ saklaw) {
$ saklaw.updateNote = pagpapaandar (tala) {
socket.emit ('updateNote', tala);
};
};
});

At sa tagapamahala ng direktiba, nakikinig kami para sa onNoteUpdated kaganapan upang malaman kapag ang isang tala mula sa isa pang kliyente ay na-update upang ma-update namin ang aming lokal na bersyon.

var controller = function ($ saklaw) {
// Papasok
socket.on ('onNoteUpdated', pagpapaandar (data) {
// Update kung ang parehong tala
kung (data.id == $ saklaw.note.id) {

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

13. Paglipat ng isang sticky note

Sa puntong ito ay karaniwang nagawa namin ang isang lap sa paligid ng CRUD kiddie pool at ang buhay ay mabuti! Para lamang sa isang trick ng parlor upang mapahanga ang iyong mga kaibigan, magdaragdag kami ng kakayahang ilipat ang mga tala sa paligid ng screen at i-update ang mga coordinate sa real time. Huwag magpanic - ilan lamang ito sa mga linya ng code. Magbabayad ang lahat ng pagsusumikap na ito. Ipinapangako ko!

Inimbitahan namin ang espesyal na panauhin, jQueryUI, sa pagdiriwang, at ginawa namin ang lahat para sa mga draggable. Ang pagdaragdag ng kakayahang mag-drag ng isang tala nang lokal ay tumatagal lamang ng isang linya ng code. Kung magdagdag ka sa element.draggable (); sa iyong pag-andar ng linker magsisimula kang marinig ang 'Eye of the Tiger' ng Survivor dahil maaari mo na ngayong i-drag ang iyong mga tala sa paligid.

Nais naming malaman kung ang paghinto ng pag-drag ay tumigil at makuha ang mga bagong coordinate upang ipasa. Ang jQueryUI ay itinayo ng ilang mga napaka-matalinong tao, kaya kapag huminto ang pag-drag kailangan mo lamang tukuyin ang isang function ng callback para sa stop event. Kinukuha namin ang tala.id off ang saklaw na bagay at ang kaliwa at nangungunang mga halaga ng CSS mula sa ui bagay Sa kaalamang iyon ginagawa namin kung ano ang ginagawa natin nang sama-sama: emit!

app.directive ('stickyNote', pagpapaandar (socket) {
var linker = function (saklaw, elemento, attrs) {
element.draggable ({
itigil: pagpapaandar (kaganapan, ui) {
socket.emit ('moveNote', {
id: saklaw.note.id,
x: ui.position.kaliwa,
y: ui.position.top
});
}
});

socket.on ('onNoteMove', pagpapaandar (data) {
// Update kung ang parehong tala
kung (data.id == saklaw.note.id) {
element.animate ({
kaliwa: data.x,
tuktok: data.y
});
}
});
};
});

Sa puntong ito dapat ay hindi nakakagulat na nakikinig din kami para sa isang kaganapan na nauugnay sa paglipat mula sa socket service. Sa kasong ito ito ay ang onNoteMove kaganapan at kung ang tala ay isang tugma pagkatapos ay ina-update namin ang kaliwa at nangungunang mga pag-aari ng CSS. Bam! Tapos na!

14. Ang bonus

Ito ay isang seksyon ng bonus na hindi ko isasama kung hindi ako ganap na tiwala na makakamtan mo ito nang mas mababa sa 10 minuto. Magpapakalat kami sa isang live server (manghang-mangha pa rin ako sa ganoong kadali gawin).

Una, kailangan mong mag-sign up para sa isang libreng pagsubok sa Nodejitsu. Ang pagsubok ay libre sa loob ng 30 araw, na kung saan ay perpekto para sa kapakanan ng basa ng iyong mga paa.

Kapag nilikha mo ang iyong account kailangan mong i-install ang jitsu package, na maaari mong gawin mula sa linya ng utos sa pamamagitan ng $ npm i-install ang jitsu -g.

Pagkatapos ay kailangan mong mag-log in mula sa linya ng utos sa pamamagitan ng Pag-login sa $ jitsu at ipasok ang iyong mga kredensyal.

Tiyaking direkta kang nasa iyong app, uri $ jitsu deploy at hakbangin ang mga katanungan. Karaniwan akong iniiwan hangga't maaari sa default, na nangangahulugang binibigyan ko ang aking aplikasyon ng isang pangalan ngunit hindi isang subdomain atbp.

At, aking mga minamahal na kaibigan, iyon lang ang mayroon dito! Makukuha mo ang URL sa iyong application mula sa output ng server sa sandaling na-deploy ito at handa na itong umalis.

15. Konklusyon

Saklaw namin ang maraming lugar ng AngularJS sa artikulong ito at inaasahan kong nagkaroon ka ng maraming kasiyahan sa proseso. Sa palagay ko ay talagang malinis kung ano ang maaari mong magawa sa AngularJS at Socket.io sa humigit-kumulang na 200 mga linya ng code.

Mayroong ilang mga bagay na hindi ko natakpan para sa kapakanan ng pagtuon sa mga pangunahing punto, ngunit hinihikayat ko kayo na hilahin ang pinagmulan at maglaro kasama ang application. Nakagawa kami ng isang malakas na pundasyon, ngunit marami pa ring mga tampok na maaari mong idagdag. Mag-hack!

Si Lukas Ruebbelke ay isang taong mahilig sa teknolohiya at co-author ng AngularJS sa Action for Manning Publications. Ang kanyang paboritong gawin ay gawin ang mga tao na nasasabik sa bagong teknolohiya tulad niya. Pinapatakbo niya ang Phoenix Web Application User Group at nag-host ng maraming mga hackathon kasama ang kanyang mga kapwa kasosyo sa krimen.

Nagustuhan ito? Basahin ang mga ito!

• Paano gumawa ng isang app
• Ang aming mga paboritong web font - at hindi sila nagkakahalaga ng isang sentimo
• Tuklasin kung ano ang susunod para sa Augmented Reality
• Mag-download ng mga libreng texture: mataas na resolusyon at handa nang gamitin ngayon