Socket.io bilan AngularJS hamkorlik kengashi

Tarkib

• 01. Server
• 02. Yalang'och suyaklar
• 03. O'zingizga bog'liqliklarni e'lon qiling
• 04. Socket.io-ni ulang
• 05. Dvigatellaringizni ishga tushiring!
• 06. Davom etishdan oldin bir nechta samimiy fikrlar
• 07. mijoz
• 08. Yalang'och suyaklar
• 09. Yopishqoq yozuv yaratish
• 10. Yopishqoq yozuvlarni namoyish qilish
• 11. Yopishqoq yozuvni o'chirish
• 12. Yopishqoq yozuvni yangilash
• 13. Yopishqoq yozuvni ko'chirish
• 14. Bonus
• 15. Xulosa
• Bu sizga yoqdimi? Buni o'qing!

• Bilim zarur: O'rta JavaScript
• Talab qiladi: Node.js, NPM
• Loyiha vaqti: 2 soat

AngularJS brauzerda mijozlarga boy dasturlarni yaratish uchun juda mos keladi va kichik Socket.io-ni qo'shsangiz, narsalar juda qiziqarli bo'ladi. Ushbu maqolada biz mijozlar uchun dastur uchun AngularJS va barcha ulangan mijozlar o'rtasida holatni bo'lishish uchun Socket.io-dan foydalanadigan real vaqtda hamkorlik kengashini yaratmoqchimiz.

Ishni boshlashdan oldin biroz uy ishlarini qamrab olamiz. Sizda HTML va JavaScript-ni asosiy tushuncha bor deb o'ylayman, chunki kodning har bir kichik burchagini qamrab olmayman. Masalan, men HTML-faylning boshiga kiritilgan CSS va JavaScript-fayllarni chaqirmoqchi emasman, chunki u erda yangi ma'lumotlar yo'q.

Shuningdek, sizni GitHub hisob qaydnomamdan kuzatib borish uchun kodni olishni maslahat beraman. Mening yaxshi do'stim Brayan Fordda ham ba'zi bir asl g'oyalarimga asoslanib yaratilgan ajoyib Socket.io urug'i bor.

Hamkorlik kengashida biz xohlagan to'rtta asosiy xususiyat - bu yozuv yaratish, eslatmalarni o'qish, eslatmani yangilash, eslatmani o'chirish va o'yin-kulgi uchun yozuvni taxtada siljitish. Ha, bu to'g'ri, biz standart CRUD xususiyatlariga e'tibor qaratmoqdamiz. O'ylaymanki, ushbu asosiy xususiyatlarga e'tiborni qaratib, biz ularni olish va ularni boshqa joylarda qo'llashingiz uchun naqshlar paydo bo'lishi uchun etarli kodni qamrab olamiz.

01. Server

Avvalo Node.js serveridan boshlaymiz, chunki u biz qolgan hamma narsani barpo etish uchun asos bo'lib xizmat qiladi.

Biz Express va Socket.io bilan Node.js serverini yaratmoqchimiz. Express-dan foydalanishimizning sababi shundaki, u Node.js. ichida statik aktivlar serverini o'rnatish uchun yaxshi mexanizmni taqdim etadi. Express juda ajoyib funktsiyalar to'plami bilan birga keladi, ammo bu holda biz dasturni server va mijoz o'rtasida toza tarzda ajratish uchun foydalanamiz.

(Men sizda Node.js va NPM o'rnatilgan degan taxmin asosida ishlayapman. Tezkor Google qidiruvi sizga ularni qanday o'rnatishni ko'rsatib beradi.)

02. Yalang'och suyaklar

Shunday qilib, serverning yalang'och suyaklarini yaratish uchun, biz ishga tushirish uchun bir nechta narsalarni qilishimiz kerak.

// app.js

// A.1
var express = talab ('express'),
app = express ();
server = talab ('http'). createServer (ilova),
io = talab qilish ('socket.io'). tinglash (server);

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

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

A.1 Biz o'z dasturimizda foydalanishimiz uchun Node.js modullarini e'lon qilamiz va o'rnatamiz. Biz Expressni e'lon qilamiz, Expressni o'rnatamiz va keyin HTTP serverini yaratamiz va unga Express nusxasini yuboramiz. Va u erdan biz Socket.io-ni yaratmoqdamiz va bizning serverimiz misolini kuzatib borishini aytamiz.

A.2 Keyin biz Express dasturimizga fayllarni taqdim etish uchun umumiy katalogimizdan foydalanishni aytamiz.

A.3 Biz serverni ishga tushiramiz va unga portni tinglashini aytamiz 1337.

Hozircha bu juda og'riqsiz va tezkor bo'ldi. Men kodga 10 qatordan kam bo'lganimizga ishonaman va bizda Node.js funktsional server mavjud. Oldinga!

03. O'zingizga bog'liqliklarni e'lon qiling

// packages.json
{
"name": "angular-collab-board",
"description": "AngularJS hamkorlik kengashi",
"versiya": "0.0.1-1",
"xususiy": rost,
"bog'liqliklar": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

NPM ning eng yaxshi xususiyatlaridan biri bu sizning bog'liqliklaringizni a da e'lon qilish qobiliyatidir packages.json faylini tanlang va keyin ularni avtomatik ravishda o'rnating npm o'rnatish buyruq satrida.

04. Socket.io-ni ulang

Biz dasturda kerakli asosiy xususiyatlarni aniqlab oldik va shuning uchun har bir operatsiya uchun tadbirni boshqarish uchun Socket.io tadbir tinglovchilarini va tegishli yopilishini o'rnatishimiz kerak.

Quyidagi kodda siz aslida voqea tinglovchilarining konfiguratsiyasi va qo'ng'iroqlarni qayta tiklashni ko'rasiz. Birinchi tadbir ulanish voqea, biz yopilishdagi boshqa voqealarni bog'lash uchun foydalanamiz.

io.sockets.on ('ulanish', funktsiya (rozetka) {
socket.on ('createNote', function (ma'lumotlar) {
socket.broadcast.emit ('onNoteCreated', ma'lumotlar);
});

socket.on ('updateNote', funktsiya (ma'lumotlar) {
socket.broadcast.emit ('onNoteUpdated', ma'lumotlar);
});

socket.on ('deleteNote', function (ma'lumotlar) {
socket.broadcast.emit ('onNoteDeleted', ma'lumotlar);
});

socket.on ('moveNote', function (ma'lumotlar) {
socket.broadcast.emit ('onNoteMoved', ma'lumotlar);
});
});

Bu erdan biz tinglovchilarni qo'shamiz createNote, updateNote, o'chirishNote va moveNote. Va qayta qo'ng'iroq qilish funktsiyasida biz shunchaki qanday voqea bo'lganligini translyatsiya qilamiz, shunda har qanday tinglovchi mijoz voqea sodir bo'lganligi to'g'risida xabardor bo'lishi mumkin.

Shaxsiy voqea ishlovchilarida qayta qo'ng'iroq qilish funktsiyalari haqida aytib o'tishga arziydigan bir nechta narsa bor. Bittasi, agar siz hodisani boshqalarga yuborishni xohlasangiz, lekin siz kiritgan voqeani yuborgan mijozga translyatsiya oldin chiqaradi funktsiya chaqiruvi. Ikkinchidan, biz shunchaki tadbirning foydali yuklarini manfaatdor tomonlarga etkazamiz, shunda ular o'zlari xohlagan tarzda ishlashlari mumkin.

05. Dvigatellaringizni ishga tushiring!

Endi bog'liqliklarimizni aniqladik va Express va Socket.io kuchlari bilan Node.js dasturimizni o'rnatdik, Node.js serverini ishga tushirish juda oddiy.

Avval siz Node.js bog'liqligini quyidagicha o'rnatasiz:

npm o'rnatish

Va keyin siz serverni shunday ishga tushirasiz:

app.js tugunlari

Undan keyin! Siz ushbu manzilga brauzeringizda kirasiz. Bam!

06. Davom etishdan oldin bir nechta samimiy fikrlar

Men birinchi navbatda frontend dasturchisiman va dastlab Node.js serverini dasturimga qo'shib qo'yishdan qo'rqdim. AngularJS qismi tezkor, ammo server tomoni JavaScript edi? Qo'rqinchli musiqani dahshatli siltashdan navbatga qo'ying.

Ammo men bir necha satr kodda statik veb-serverni o'rnatishim mumkinligini va yana bir nechta satrlarda brauzerlar o'rtasidagi barcha voqealarni boshqarish uchun Socket.io-dan foydalana olishimni aniq bilib oldim. Va bu hali ham faqat JavaScript edi! Vaqtlilik uchun biz faqat bir nechta xususiyatlarni ko'rib chiqmoqdamiz, ammo umid qilamanki, maqolaning oxirigacha suzishni oson ko'rasiz - va hovuzning chuqur uchi unchalik qo'rqinchli emas.

07. mijoz

Endi bizning serverimiz bilan mustahkam poydevorimiz bor, keling, mening sevimli qismim - mijozga o'tamiz! Biz sudraladigan qism uchun AngularJS, jQueryUI va uslublar bazasi uchun Twitter Bootstrap-dan foydalanamiz.

08. Yalang'och suyaklar

Shaxsiy xohish-istaklarimga kelsak, yangi AngularJS dasturini ishga tushirganimda, men boshlashni boshlashim kerakligini bilganimdan keyin minimal darajani tezda aniqlab olishni va shu bilan iloji boricha tezroq takrorlashni boshlashni xohlayman.

Har bir AngularJS dasturida kamida bitta nazoratchi mavjud bo'lishi kerak va shuning uchun odatda men doimo boshlayman.

Ilovani avtomatik ravishda yuklash uchun shunchaki qo'shishingiz kerak ng-ilova dasturning ishlashini xohlagan HTML tuguniga. Ko'pincha, uni HTML yorlig'iga qo'shish juda maqbul bo'ladi. Shuningdek, men unga atribut qo'shganman ng-ilova dan foydalanmoqchi ekanligimni aytish ilova moduli, buni men bir lahzada aniqlayman.

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

Menga kamida bitta nazoratchi kerakligini bilaman va shuning uchun uni ishlataman ng-kontroller va unga mulkni tayinlash MainCtrl.

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

Shunday qilib, endi biz nomlangan modul uchun kancada turibmiz ilova va ismli nazoratchi MainCtrl. Keling, ularni hozir yarataylik.

Modulni yaratish juda sodda. Siz uni qo'ng'iroq qilish orqali aniqlaysiz burchakli modul va unga nom berish. Kelajakda ma'lumot olish uchun bo'sh qatorning ikkinchi parametri - bu dasturda foydalanish uchun sub-modullarni kiritishingiz mumkin. Ushbu qo'llanma doirasidan tashqarida, ammo sizning ilovangiz murakkabligi va ehtiyojlari bilan o'sishni boshlaganda qulaydir.

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

Biz bir nechta bo'sh joy egalarini e'lon qilamiz ilova bilan boshlangan modul MainCtrl quyida.Bularning barchasini keyinroq to'ldiramiz, ammo men boshidanoq asosiy tuzilishini tasvirlab berishni xohladim.

app.controller ('MainCtrl', function ($ qamrovi) {});

Shuningdek, biz Socket.io funktsiyasini a rozetka biz ushbu ob'ektni kapsulalashimiz va uni global nomlar maydonida suzib yurishini qoldirmasligimiz uchun xizmat.

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

Va shu bilan birga, biz chaqirilgan direktivani e'lon qilamiz yopishqoq izoh biz yopishqoq yozuvlar funksiyasini kapsulalash uchun foydalanamiz.

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

Shunday qilib, keling, shu paytgacha qilgan ishlarimizni ko'rib chiqaylik. Biz dasturni ishga tushirdik ng-ilova va HTML-da dastur boshqaruvchimiz deb e'lon qildi. Shuningdek, biz dastur modulini aniqladik va yaratdik MainCtrl boshqaruvchi, rozetka xizmat va yopishqoq izoh direktiv.

09. Yopishqoq yozuv yaratish

Endi bizda AngularJS dasturining skeletlari mavjud bo'lib, biz yaratish xususiyatini yaratishga kirishamiz.

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

// Kiruvchi
socket.on ('onNoteCreated', function (ma'lumotlar) {// B.3
$ scale.notes.push (ma'lumotlar);
});

// Chiquvchi
$ scale.createNote = function () {// B.4
var note = {
id: yangi sana (). getTime (),
sarlavha: 'Yangi eslatma',
tanasi: 'kutilmoqda'
};

$ kapsam.notes.push (eslatma);
socket.emit ('createNote', eslatma);
};

B.1 AngularJS-ga bog'liqlikni in'ektsiya qilish xususiyati o'rnatilgan, shuning uchun biz a $ qamrovi ob'ekti va rozetka xizmat. The $ qamrovi ob'ekt ViewModel bo'lib xizmat qiladi va asosan ikki tomonlama ma'lumotlar uzatish imkoniyatini yaratish uchun ba'zi voqealar o'z ichiga olingan JavaScript ob'ekti.

B.2 Biz ko'rinishni bog'lash uchun foydalanadigan qatorni e'lon qilamiz.

B.3 Biz tinglovchilarni qo'shmoqdamiz onNoteCreated tadbir rozetka xizmat va voqea yukini itarish $ scale.notes qator.

B.4 biz e'lon qildik createNote sukut bo'yicha yaratadigan usul Eslatma ob'ekti va uni itaradi $ scale.notes qator. Bundan tashqari, rozetka chiqarish uchun xizmat createNote voqea va o'tish yangi eslatma birga ob'ekt.

Xo'sh, endi bizda yozuvni yaratish usuli bor, uni qanday chaqiramiz? Bu yaxshi savol! HTML faylida biz AngularJS direktivasini qo'shamiz tugmachani bosing tugmachasini bosing va keyin qo'shing createNote atribut qiymati sifatida usul chaqiruvi.

tugma id = "createButton" ng-click = "createNote ()"> eslatma yaratish / tugma>

Hozirgacha qilgan ishlarimizni tezda ko'rib chiqish vaqti keldi. Biz qatorni qo'shdik $ qamrovi ob'ekti MainCtrl bu dastur uchun barcha eslatmalarni saqlaydi. Biz shuningdek a qo'shdik createNote usuli $ qamrovi yangi mahalliy eslatma yaratishga va keyin ushbu yozuvni boshqa mijozlarga rozetka xizmat. Shuningdek, tadbir tinglovchisini qo'shdik rozetka xizmati, shunda biz boshqa mijozlar qachon eslatma yaratganligini bilib olamiz, shuning uchun uni o'z to'plamimizga qo'shishimiz mumkin.

10. Yopishqoq yozuvlarni namoyish qilish

Endi bizda eslatma ob'ekti yaratish va uni brauzerlar o'rtasida bo'lishish imkoniyati mavjud, ammo biz uni aslida qanday namoyish etamiz? Bu erda direktivalar keladi.

Direktivalar va ularning murakkabliklari juda katta mavzu, ammo qisqa versiya shundaki, ular elementlar va atributlarni maxsus funktsional imkoniyatlar bilan kengaytirish usulini taqdim etadi. Direktivalar AngularJS-ning eng sevimli qismidir, chunki bu sizning HTML-da ilovangiz atrofida butun DSL (domenga xos til) yaratishga imkon beradi.

Tabiiyki, biz hamkorlik kengashimiz uchun yopishqoq yozuvlarni yaratamiz, chunki biz uni yaratishimiz kerak yopishqoq izoh direktiv. Direktivalar siz e'lon qilmoqchi bo'lgan modulda direktiv usulini chaqirish va direktivani aniqlash ob'ektini qaytaradigan ism va funktsiyani o'tkazish orqali aniqlanadi. Direktiv ta'rifi ob'ekti siz belgilashingiz mumkin bo'lgan juda ko'p xususiyatlarga ega, ammo biz bu erda faqat ba'zi xususiyatlardan foydalanamiz.

Direktiv ta'rifi ob'ekti bo'yicha belgilashingiz mumkin bo'lgan barcha xususiyatlar ro'yxatini ko'rish uchun AngularJS hujjatlarini tekshirishingizni tavsiya qilaman.

app.directive ('stickyNote', function (rozetka) {
var linker = function (qamrov, element, attrs) {};

var controller = function ($ qamrovi) {};

qaytish {
cheklash: ‘A’, // C.1
havola: bog'lovchi, // C.2
boshqaruvchi: boshqaruvchi, // C.3
ko'lami: {// C.4
eslatma: ’=’,
o'chirib tashlangan: '&'
}
};
});

C.1 Siz o'zingizning ko'rsatmangizni ma'lum bir HTML elementi bilan cheklashingiz mumkin. Ikkita eng keng tarqalgan element - bu siz e'lon qilgan element yoki atribut E va A navbati bilan. Siz uni CSS klassi yoki sharh bilan cheklashingiz mumkin, ammo ular unchalik keng tarqalgan emas.

C.2 bog'lanish funktsiyasi - bu sizning barcha DOM manipulyatsiya kodlarini joylashtiradigan joy. Men topgan bir nechta istisnolar bor, lekin bu har doim ham to'g'ri (kamida 99 foiz). Bu AngularJS ning asosiy asosiy qoidasidir va shuning uchun men buni ta'kidladim.

C.3 Nazoratchi funktsiyasi biz dastur uchun aniqlagan asosiy tekshirgich kabi ishlaydi, lekin $ qamrovi biz o'tayotgan ob'ekt DOM elementiga xos bo'lib, u direktivada saqlanadi.

C.4 AngularJS izolyatsiya qilingan doiraning kontseptsiyasiga ega, bu sizga ko'rsatma doirasi tashqi dunyo bilan qanday aloqada bo'lishini aniq belgilashga imkon beradi. Agar biz ko'lamni e'lon qilmagan bo'lsak, ko'rsatma ota-ona doirasidan ota-ona va bola munosabatlari bilan bevosita meros bo'lib o'tgan bo'lar edi. Ko'p hollarda bu maqbul emas. Kapsamni ajratib, tashqi dunyo sizning yo'riqnomangiz holatiga tasodifan va salbiy ta'sir ko'rsatishi ehtimolini kamaytiradi.

Ikki tomonlama ma'lumotlarni bog'lashni e'lon qildim Eslatma bilan = belgisi va majburiy ifoda bekor qilingan bilan & belgi. Iltimos, AngularJS hujjatlarini ajratilgan doirani to'liq tushuntirish uchun o'qing, chunki bu doiradagi eng murakkab mavzulardan biri.

Keling, aslida DOM-ga yopishqoq yozuvni qo'shib qo'yaylik.

Har qanday yaxshi ramka singari, AngularJS ba'zi bir ajoyib xususiyatlarga ega. Eng qulay xususiyatlardan biri ng-takrorlash. Ushbu AngularJS direktivasi ob'ektlar qatoriga o'tishga imkon beradi va u qaysi teg bo'lsa ham, massivdagi narsalar qancha bo'lsa, shuncha marta takrorlanadi. Quyidagi holatda biz takrorlaymiz eslatmalar qatorini va nusxasini div uzunligi va uning bolalari eslatmalar qator.

div sticky-note ng-repeat = "notes in note" note = "note" ondelete = "deleteNote (id)">
tugma turi = "tugma" ng-click = "deleteNote (note.id)"> × / tugma>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Ning go'zalligi ng-takrorlash bu siz kiritgan har qanday qator bilan bog'liqligi va massivga element qo'shganda DOM elementingiz avtomatik ravishda yangilanadi. Siz bu qadamni oldinga surishingiz va nafaqat standart DOM elementlarini, balki boshqa maxsus ko'rsatmalarni ham takrorlashingiz mumkin. Shuning uchun ko'rasiz yopishqoq yozuv elementdagi atribut sifatida.

Tushuntirish kerak bo'lgan yana ikkita maxsus kod mavjud. Biz doirani ajratib qo'ydik yopishqoq yozuvlar ikkita xususiyat bo'yicha ko'rsatma. Birinchisi, majburiy ravishda belgilangan izolyatsiya qilingan doiradir Eslatma mulk. Bu shuni anglatadiki, har doim eslatma ob'ekti ota-ona ko'lamini o'zgartirganda, u avtomatik ravishda direktifdagi mos yozuv ob'ektini yangilaydi va aksincha. Boshqa belgilangan izolyatsiya qilingan doirada bekor qilingan xususiyat. Buning ma'nosi shundan iboratki, qachon bekor qilingan direktivada chaqiriladi, u har qanday ifoda bo'lsa bekor qilingan yo'riqnomani o'rnatadigan DOM elementidagi atribut.

Direktiv ko'rsatilganda DOM-ga qo'shiladi va bog'lanish funktsiyasi chaqiriladi. Bu elementga bir nechta standart DOM xususiyatlarini o'rnatish uchun ajoyib imkoniyat. Biz o'tayotgan element parametri aslida jQuery ob'ekti va shuning uchun biz jQuery amallarini bajara olamiz.

(AngularJS aslida o'rnatilgan jQuery to'plami bilan birga keladi, ammo agar siz jQuery-ning to'liq versiyasini qo'shgan bo'lsangiz, AngularJS buni kechiktiradi.)

app.directive ('stickyNote', function (rozetka) {
var linker = function (qamrov, element, attrs) {
// Uni chiroyli qilish uchun ba'zi DOM tashabbusi
element.css ('chapda', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Yuqoridagi kodda biz shunchaki yopishqoq yozuvni sahnaga joylashtiramiz va uni o'chirib tashlaymiz.

11. Yopishqoq yozuvni o'chirish

Shunday qilib, endi biz yopishqoq yozuvni qo'shishimiz va namoyish qilishimiz mumkin, yopishqoq yozuvlarni o'chirish vaqti keldi. Yopishqoq yozuvlarni yaratish va yo'q qilish, bu yozuvlar bog'langan qatordan elementlarni qo'shish va yo'q qilish masalasidir. Ushbu qatorni saqlab qolish uchun ota-ona doirasi javobgardir, shuning uchun biz o'chirish so'rovini direktivadan kelib chiqamiz, lekin ota-ona doirasi haqiqiy og'ir yukni bajarishiga ruxsat bering.

Shuning uchun biz ko'rsatma bo'yicha aniqlangan izolyatsiya qilingan doirani yaratish uchun barcha muammolarni boshdan kechirdik: shuning uchun ko'rsatma o'chirish hodisasini ichki qabul qilib, uni qayta ishlash uchun ota-onasiga topshirishi mumkin edi.

Direktiv ichidagi HTMLga e'tibor bering.

tugma turi = "tugma" ng-click = "deleteNote (note.id)"> × / tugma>

Men aytmoqchi bo'lgan keyingi narsa uzoq yo'l bo'lib tuyulishi mumkin, ammo biz bir tomonda ekanligimizni yodda tuting va men batafsil bayon qilganimdan keyin mantiqiy bo'ladi. Yopishqoq yozuvning yuqori o'ng burchagidagi tugma bosilganda biz qo'ng'iroq qilamiz o'chirishNote direktivning boshqaruvchisida va note.id qiymat. Keyin nazoratchi qo'ng'iroq qiladi bekor qilingan, keyin biz unga bog'langan har qanday ifodani bajaradi. Hozircha hammasi yaxshi? Biz tekshirgichda mahalliy usulni chaqiramiz, keyin esa uni ajratilgan doirada aniqlangan har qanday iborani chaqirish orqali uzatadi. Ota-onani chaqiradigan ibora shunchaki chaqiriladi o'chirishNote shuningdek.

app.directive ('stickyNote', function (rozetka) {
var controller = function ($ qamrovi) {
$ scale.deleteNote = funktsiya (id) {
$ kapsam.ondelete ({
Men bajardim
});
};
};

qaytish {
cheklash: 'A',
havola: bog'lovchi,
boshqaruvchi: nazoratchi,
ko'lami: {
eslatma: ’=’,
o'chirib tashlangan: '&'
}
};
});

(Ifoda bilan belgilangan izolyatsiya qilingan doiradan foydalanilganda parametrlar ob'ekt xaritasida yuboriladi.)

Ota-onalar doirasida, o'chirishNote ga qo'ng'iroq qiladi va -dan foydalanib juda standart o'chirishni amalga oshiradi har bir kishi uchun burchakli yozuvlar massivi ustida takrorlash uchun yordamchi dastur. Funktsiya mahalliy biznes bilan shug'ullanganidan so'ng, u davom etadi va butun dunyoda tegishli munosabat bildirish uchun voqea sodir bo'ladi.

app.controller ('MainCtrl', function ($ qamrovi, socket) {
$ kapsam.notes = [];

// Kiruvchi
socket.on ('onNoteDeleted', function (ma'lumotlar) {
$ kapsam.deleteNote (data.id);
});

// Chiquvchi
$ scale.deleteNote = funktsiya (id) {
var oldNotes = $ qamrovi.notes,
newNotes = [];

burchakli.forEach (oldNotes, funktsiya (eslatma) {
agar (note.id! == id) newNotes.push (note);
});

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

12. Yopishqoq yozuvni yangilash

Biz ajoyib taraqqiyotga erishmoqdamiz! Hozirga kelib, biz olib borayotgan ushbu bo'ron turidan kelib chiqadigan ba'zi bir naqshlarni ko'rishni boshlaysiz deb umid qilaman. Ro'yxatdagi keyingi element - yangilash xususiyati.

Biz haqiqiy DOM elementlaridan boshlaymiz va uni servergacha kuzatib boramiz va mijozga qaytamiz. Avval yopishqoq yozuvning sarlavhasi yoki tanasi qachon o'zgartirilishini bilishimiz kerak. AngularJS ma'lumotlar elementlarini ma'lumotlar modelining bir qismi sifatida ko'rib chiqadi, shuning uchun siz zudlik bilan ikki tomonlama ma'lumotlarni bog'lashingiz mumkin. Buning uchun ng-model ko'rsatma va bog'lashni istagan mulkni qo'ying. Bunday holda biz foydalanamiz eslatma sarlavha va eslatma.body navbati bilan.

Ushbu xususiyatlarning har biri o'zgarganda, biz ushbu ma'lumotni uzatishni istaymiz. Biz buni amalga oshiramiz ng-o'zgarish ko'rsatma va uni chaqirish uchun foydalaning updateNote va eslatma ob'ektining o'zida o'tkazing. AngularJS har qanday narsaning qiymatini aniqlash uchun juda aqlli iflos tekshiruvlarni amalga oshiradi ng-model o'zgargan va keyin joylashgan ifodani bajargan ng-o'zgarish.

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

Foydalanishning teskari tomoni ng-o'zgarish mahalliy o'zgarish allaqachon sodir bo'lganligi va biz faqat xabarni etkazish uchun javobgarmiz. Nazoratchida, updateNote deb nomlangan va u erdan biz chiqaramiz updateNote bizning serverimiz boshqa mijozlarga translyatsiya qilish uchun tadbir.

app.directive ('stickyNote', function (rozetka) {
var controller = function ($ qamrovi) {
$ scale.updateNote = funktsiya (eslatma) {
socket.emit ('updateNote', eslatma);
};
};
});

Va direktiv tekshirgichda biz tinglaymiz onNoteUpdated mahalliy versiyani yangilashimiz uchun boshqa mijozning eslatmasi qachon yangilanganligini bilish uchun tadbir.

var controller = function ($ qamrovi) {
// Kiruvchi
socket.on ('onNoteUpdated', function (ma'lumotlar) {
// Xuddi shu yozuv bo'lsa, yangilang
agar (data.id == $ qamrovi.note.id) {

$ scale.note.title = ma'lumotlar.title;
$ scale.note.body = data.body;
}
});
};

13. Yopishqoq yozuvni ko'chirish

Shu o'rinda biz asosan CRUD kiddie hovuzini aylanib chiqdik va hayot yaxshi! Do'stlaringizni hayratda qoldiradigan hiyla-nayrang uchun biz ekran atrofida yozuvlarni ko'chirish va koordinatalarni real vaqtda yangilash imkoniyatini qo'shamiz. Vahima qo'ymang - bu yana bir nechta kod satrlari. Bu mashaqqatli ishlarning barchasi o'z samarasini beradi. Va'da beraman!

Biz ziyofatga maxsus mehmon jQueryUI-ni taklif qildik va biz hammasini tortib olinadigan narsalar uchun qildik. Mahalliy yozuvni sudrab borish qobiliyatini qo'shish faqat bitta kod satrini oladi. Agar qo'shsangiz element.draggable (); sizning bog'lovchi funktsiyangizga siz Survivor tomonidan "Tiger of Eye" ni eshitishni boshlaysiz, chunki endi eslatmalarni atrofga sudrab borishingiz mumkin.

Dragning qachon to'xtaganini bilmoqchimiz va o'tish uchun yangi koordinatalarni qo'lga kiritamiz. jQueryUI ni juda aqlli odamlar yaratgan, shuning uchun sudrab yurishni to'xtatganda to'xtash hodisasi uchun qayta qo'ng'iroq qilish funktsiyasini aniqlash kerak. Biz note.id qamrov ob'ekti va chapdan va yuqoridan CSS qiymatlari ui ob'ekt. Ushbu bilim bilan biz azaldan qilgan ishimizni qilamiz: emit!

app.directive ('stickyNote', function (rozetka) {
var linker = function (qamrov, element, attrs) {
element.draggable ({
stop: function (voqea, foydalanuvchi interfeysi) {
socket.emit ('moveNote', {
id: kapsam.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', function (ma'lumotlar) {
// Xuddi shu yozuv bo'lsa, yangilang
agar (data.id == qamrovi.note.id) {
element.animate ({
chapda: data.x,
yuqori: data.y
});
}
});
};
});

Shu nuqtada biz rozetkaning xizmatidan ko'chib o'tishga oid hodisani tinglayotganimiz ajablanarli emas. Bu holda u onNoteMoved voqea va agar eslatma mos keladigan bo'lsa, biz chap va yuqori CSS xususiyatlarini yangilaymiz. Bam! Bajarildi!

14. Bonus

Bu bonusli bo'lim, agar men unga 10 daqiqadan kamroq vaqt ichida erishishingizga to'liq ishonmasam, uni kiritmayman. Biz jonli serverga joylashtiramiz (men buni qanchalik oson bajarishidan hali ham hayronman).

Birinchidan, siz bepul Nodejitsu sinovi uchun ro'yxatdan o'tishingiz kerak. Sinov 30 kun davomida bepul, bu sizning oyoqlaringizni namlash uchun juda yaxshi.

Hisob qaydnomangizni yaratgandan so'ng, jitsu paketini o'rnatishingiz kerak, uni buyruq satrida orqali qilishingiz mumkin $ npm o'rnatish jitsu -g.

Keyin orqali buyruq satridan kirishingiz kerak $ jitsu-ga kirish va hisobga olish ma'lumotlarini kiriting.

To'g'ridan-to'g'ri o'zingizning ilovangizda ekanligingizga ishonch hosil qiling, yozing $ jitsu tarqatish va savollarni ko'rib chiqing. Odatda men sukut bo'yicha iloji boricha ko'proq narsani qoldiraman, ya'ni men o'zimning nomimga nom beraman, ammo subdomain emas va hokazo.

Va, aziz do'stlarim, bu erda hamma narsa bor! Sizning arizangizga URL manzilini server ishga tushirilgandan so'ng uni server natijasidan olasiz.

15. Xulosa

Biz ushbu maqolada juda ko'p AngularJS asoslarini ko'rib chiqdik va umid qilamanki, bu jarayonda siz juda qiziqarli bo'ldingiz. AngularJS va Socket.io bilan taxminan 200 ta satr kodida nimani amalga oshirishingiz mumkin, deb o'ylayman.

Asosiy fikrlarga e'tibor berish uchun men yashirmagan bir nechta narsalar bor edi, lekin sizni manbani tushirishga va dastur bilan o'ynashga maslahat beraman. Biz kuchli poydevor qurdik, ammo siz hali ham qo'shishingiz mumkin bo'lgan ko'plab xususiyatlar mavjud. Hackni oling!

Lukas Ruebbelke texnologiya ixlosmandi va AngularJS for Action for Manning Publications-ning muallifi. Uning sevimli ishi odamlarni u kabi yangi texnologiyalardan hayajonlantirishdir. U Feniks veb-ilovasi foydalanuvchilari guruhini boshqaradi va jinoyatda sheriklari bilan bir nechta hackathonlarni uyushtirgan.

Bu sizga yoqdimi? Buni o'qing!

• Ilovani qanday qilish kerak
• Bizning sevimli veb-shriftlarimiz - va ular bir tiyinga ham tushmaydi
• Kengaytirilgan haqiqat uchun yana nima borligini bilib oling
• Bepul to'qimalarni yuklab oling: yuqori aniqlikdagi va hozir foydalanishga tayyor