Плата для супрацоўніцтва AngularJS з Socket.io

Задаволены

• 01. Сервер
• 02. Голыя косці
• 03. Абвясціце пра свае залежнасці
• 04. Падключыце Socket.io
• 05. Запусціце рухавікі!
• 06. Некалькі шчырых думак перад тым, як рухацца далей
• 07. Кліент
• 08. Голыя косці
• 09. Стварэнне налепкі
• 10. Адлюстраванне наліпак
• 11. Выдаленне налепкі
• 12. Абнаўленне налепкі
• 13. Перасоўванне налепкі
• 14. Бонус
• 15. Выснова
• Спадабалася гэта? Прачытайце гэтыя!

• Неабходныя веды: Прамежкавы JavaScript
• Патрабуецца: Node.js, NPM
• Час праекта: 2 гадзіны

AngularJS асабліва добра падыходзіць для стварэння багатых прыкладанняў на баку кліента ў браўзэры, і калі вы дадаеце ў сумесь трохі Socket.io, усё становіцца сапраўды цікавым. У гэтым артыкуле мы збіраемся стварыць дошку для супрацоўніцтва ў рэжыме рэальнага часу, якая выкарыстоўвае AngularJS для кліенцкага прыкладання і Socket.io для абмену станам паміж усімі падлучанымі кліентамі.

Давайце разбярэмся з хатняй гаспадаркай, перш чым пачаць. Я мяркую, што вы добра разумееце HTML і JavaScript, бо я не буду ахопліваць кожны маленькі куток кода. Напрыклад, я не збіраюся называць файлы CSS і JavaScript, якія я ўключыў у загаловак файла HTML, бо там няма новай інфармацыі.

Акрамя таго, я рэкамендую вам захапіць код з майго ўліковага запісу GitHub, каб ісці далей. У майго добрага сябра Брайана Форда таксама ёсць выдатнае насенне Socket.io, на якім я заснаваў некаторыя свае арыгінальныя ідэі.

Чатыры асноўныя функцыі, якія мы жадаем у дошцы для супрацоўніцтва, - гэта магчымасць ствараць нататкі, чытаць нататкі, абнаўляць нататкі, выдаляць нататкі і для задавальнення перамяшчаць нататкі на дошцы. Так, гэта дакладна, мы засяроджваемся на стандартных CRUD-функцыях. Я лічу, што, засяродзіўшы ўвагу на гэтых фундаментальных асаблівасцях, мы разгледзім дастаткова кода для з'яўлення шаблонаў, каб вы маглі ўзяць іх і прымяніць у іншым месцы.

01. Сервер

Мы пачнем з сервера Node.js спачатку, бо ён паслужыць асновай, на якой мы збіраемся пабудаваць усё астатняе.

Мы збіраемся стварыць сервер Node.js з Express і Socket.io. Прычына, па якой мы выкарыстоўваем Express, заключаецца ў тым, што ён забяспечвае прыемны механізм налады статычнага сервера актываў у рамках Node.js. Express пастаўляецца з мноствам цудоўных функцый, але ў гэтым выпадку мы збіраемся выкарыстоўваць яго, каб выразна падзяліць прыкладанне паміж серверам і кліентам.

(Я працую, мяркуючы, што ў вас устаноўлены Node.js і NPM. Хуткі пошук у Google пакажа, як іх усталяваць, калі вы гэтага не зробіце.)

02. Голыя косці

Такім чынам, каб стварыць голыя косці сервера, нам трэба зрабіць некалькі рэчаў, каб пачаць працу.

// app.js

// А.1
var express = require (’express’),
прыкладанне = express ();
server = require ('http'). createServer (прыкладанне),
io = require (’socket.io’). listen (сервер);

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

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

A.1 Мы аб'яўляем і ствараем асобнікі нашых модуляў Node.js, каб мы маглі выкарыстоўваць іх у нашым дадатку. Мы аб'яўляем Express, ствараем экземпляр Express, а затым ствараем HTTP-сервер і адпраўляем у яго экземпляр Express. І адтуль мы ствараем асобнік Socket.io і кажам яму сачыць за нашым экземплярам сервера.

A.2 Затым мы гаворым нашаму праграме Express выкарыстоўваць наш агульнадаступны каталог для абслугоўвання файлаў.

A.3 Мы запускаем сервер і кажам яму праслухоўваць порт 1337.

Да гэтага часу гэта было даволі бязбольна і хутка. Я лічу, што ў нас менш за 10 радкоў кода, і ў нас ужо ёсць функцыянальны сервер Node.js. Наперад!

03. Абвясціце пра свае залежнасці

// пакеты.json
{
"name": "вуглавая дошка",
"description": "Савет па супрацоўніцтве AngularJS",
"версія": "0.0.1-1",
"private": праўда,
"залежнасці": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Адна з самых прыемных асаблівасцей NPM - гэта магчымасць заявіць пра свае залежнасці ў пакеты.json файл, а затым аўтаматычна ўсталяваць іх праз npm ўсталяваць у камандным радку.

04. Падключыце Socket.io

Мы ўжо вызначылі асноўныя функцыі, якія мы хочам у дадатку, і таму нам трэба наладзіць праслухоўшчыкі падзей Socket.io і адпаведнае закрыццё для апрацоўкі падзеі для кожнай аперацыі.

У прыведзеным ніжэй кодзе вы заўважыце, што гэта, па сутнасці, канфігурацыя праслухоўнікаў падзей і зваротных выклікаў. Першае мерапрыемства - злучэнне мерапрыемства, якое мы выкарыстоўваем для падключэння іншых нашых падзей у закрыцці.

io.sockets.on (’злучэнне’, функцыя (сокет) {
socket.on ('createNote', функцыя (дадзеныя) {
socket.broadcast.emit (’onNoteCreated’, дадзеныя);
});

socket.on (’updateNote’, функцыя (дадзеныя) {
socket.broadcast.emit (’onNoteUpdated’, дадзеныя);
});

socket.on ('deleteNote', функцыя (дадзеныя) {
socket.broadcast.emit (’onNoteDeleted’, дадзеныя);
});

socket.on ('moveNote', функцыя (дадзеныя) {
socket.broadcast.emit (’onNoteMoved’, дадзеныя);
});
});

Адсюль мы дадаем слухачоў createNote, updateNote, deleteNote і moveNote. А ў функцыі зваротнага выкліку мы проста трансліруем, якая падзея адбылася, каб любы кліент, які праслухоўвае, мог атрымаць паведамленне пра тое, што падзея адбылася.

Ёсць некалькі рэчаў, на якія варта звярнуць увагу наконт функцый зваротнага выкліку ў асобных апрацоўшчыках падзей. Па-першае, калі вы хочаце адправіць падзею ўсім, акрамя кліента, які выпусціў падзею, якую вы ўставілі вяшчанне да выпраменьваць выклік функцыі. Па-другое, мы проста перадаем карысную нагрузку мерапрыемству зацікаўленым бакам, каб яны маглі апрацаваць яго так, як лічаць патрэбным.

05. Запусціце рухавікі!

Цяпер, калі мы вызначылі нашы залежнасці і стварылі наша прыкладанне Node.js з паўнамоцтвамі Express і Socket.io, ініцыялізаваць сервер Node.js даволі проста.

Спачатку вы ўсталёўваеце залежнасці Node.js так:

npm ўсталяваць

І тады вы запускаеце сервер так:

вузел app.js

Потым! Вы пераходзіце па гэтым адрасе ў вашым браўзэры. Бам!

06. Некалькі шчырых думак перад тым, як рухацца далей

Я ў першую чаргу распрацоўшчык інтэрфейсу, і мяне першапачаткова трохі напалохалі падключэннем сервера Node.js да майго прыкладання. Частка AngularJS была аснасткай, але JavaScript на баку сервера? Чарга жудаснай музыкі ад жаху.

Але мне было вельмі зручна даведацца, што я магу наладзіць статычны вэб-сервер усяго ў некалькі радкоў кода і яшчэ ў некалькіх радках выкарыстоўваць Socket.io для апрацоўкі ўсіх падзей паміж браўзэрамі. І гэта ўсё яшчэ быў проста JavaScript! Дзеля своечасовасці мы разгледзім толькі некаторыя асаблівасці, але я спадзяюся, што да канца артыкула вы ўбачыце, што плаваць лёгка - і глыбокі канец басейна не такі ўжо і страшны.

07. Кліент

Цяпер, калі ў нас ёсць трывалая аснова для нашага сервера, пяройдзем да маёй любімай часткі - кліента! Мы будзем выкарыстоўваць AngularJS, jQueryUI для перацягванай часткі і Twitter Bootstrap для асновы стылю.

08. Голыя косці

Што датычыцца асабістых пераваг, пры запуску новага прыкладання AngularJS мне падабаецца хутка вызначаць мінімальны мінімум, які, як я ведаю, мне спатрэбіцца, каб пачаць, а потым пачаць яго перагляд як мага хутчэй.

Кожнае прыкладанне AngularJS павінна быць загружана па меншай меры з адным прысутным кантролерам, і таму я звычайна пачынаю з гэтага.

Каб аўтаматычна загрузіць праграму, трэба проста дадаць яе нг-дадатак да вузла HTML, у якім вы хочаце, каб прыкладанне жыло. У большасці выпадкаў даданне яго ў HTML-тэг будзе цалкам прымальным. Я таксама дадаў атрыбут нг-дадатак сказаць яму, што я хачу выкарыстоўваць дадатак модуль, які я вызначу літаральна праз імгненне.

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

Я ведаю, што мне спатрэбіцца хаця б адзін кантролер, і таму я буду называць гэта з дапамогай нг-кантролер і прысваенне яму ўласцівасці MainCtrl.

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

Такім чынам, зараз мы падключылі модуль з імем дадатак і кантролер з імем MainCtrl. Давайце і зараз створым іх.

Стварэнне модуля даволі простае. Вы вызначаеце гэта па тэлефоне вуглавы.модуль і даючы яму імя. Для будучай даведкі другі параметр пустога масіва - гэта месца, дзе можна ўводзіць суб-модулі для выкарыстання ў дадатку. Гэта выходзіць за рамкі гэтага ўроку, але зручна, калі ваша дадатак пачынае расці па складанасці і патрэбах.

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

Мы збіраемся аб'явіць некалькі пустых запаўняльнікаў у дадатак модуль, які пачынаецца з MainCtrl ніжэй.Мы запоўнім усё гэта пазней, але я хацеў праілюстраваць асноўную структуру з самага пачатку.

app.controller ('MainCtrl', функцыя ($ scope) {});

Мы таксама збіраемся абгарнуць функцыянальнасць Socket.io у разетка сэрвіс, каб мы маглі інкапсуляваць гэты аб'ект і не пакідаць яго плаваючым на глабальнай прасторы імёнаў.

app.factory ('сокет', функцыя ($ rootScope) {});

І пакуль мы гэта робім, мы збіраемся абвясціць дырэктыву пад назвай stickyNote што мы збіраемся выкарыстаць для інкапсуляцыі функцыянальнасці налепкі ў.

app.directive (’stickyNote’, функцыя (сокет) {});

Такім чынам, давайце разгледзім тое, што мы зрабілі да гэтага часу. Мы загрузілі прыкладанне з дапамогай нг-дадатак і абвясціў наш кантролер прыкладанняў у HTML. Мы таксама вызначылі модуль прыкладанняў і стварылі MainCtrl кантролер, разетка абслугоўванне і stickyNote дырэктывы.

09. Стварэнне налепкі

Цяпер, калі ў нас ёсць каркас прыкладання AngularJS, мы пачнем выпрацоўваць функцыю стварэння.

app.controller ('MainCtrl', функцыя ($ scope, socket) {// B.1
$ scope.notes = []; // Б.2

// Які паступае
socket.on (’onNoteCreated’, функцыя (дадзеныя) {// B.3
$ scope.notes.push (дадзеныя);
});

// Які выходзіць
$ scope.createNote = function () {// B.4
var note = {
ідэнтыфікатар: новая дата (). getTime (),
загаловак: "Новая нататка",
body: «У чаканні»
};

$ scope.notes.push (нататка);
socket.emit (’createNote’, заўвага);
};

B.1 AngularJS мае ўбудаваную функцыю ўвядзення залежнасці, таму мы ўводзім a $ вобласць аб'ект і разетка абслугоўванне. $ вобласць аб'ект выконвае функцыю ViewModel і ў асноўным уяўляе сабой аб'ект JavaScript, у які ўпісаны некаторыя падзеі, каб уключыць двухбаковую прывязку дадзеных.

B.2 Мы заяўляем масіў, у якім будзем звязваць выгляд.

B.3 Мы дадаем слухача для onNoteCreated падзея на ст разетка сэрвіс і перасоўванне карыснай нагрузкі на падзею ў $ scope.notes масіў.

B.4 Мы заявілі, што createNote метад, які стварае па змаўчанні нататка аб'ект і штурхае яго ў $ scope.notes масіў. Ён таксама выкарыстоўвае разетка сэрвіс для выпраменьвання createNote падзея і перадаць новая нататка аб'ект уздоўж.

Такім чынам, цяпер, калі ў нас ёсць спосаб стварыць нататку, як мы яе называем? Гэта добрае пытанне! У файл HTML мы дадаем убудаваную дырэктыву AngularJS нг-пстрычка да кнопкі, а затым дадайце createNote выклік метаду ў якасці значэння атрыбута.

button id = "createButton" ng-click = "createNote ()"> Стварыць нататку / кнопку>

Час для хуткага агляду зробленага намі. Мы дадалі масіў у $ вобласць аб'ект у MainCtrl у ім будуць усе нататкі да заяўкі. Мы таксама дадалі а createNote метад на $ вобласць аб'ект, каб стварыць новую лакальную нататку, а затым трансляваць гэтую нататку іншым кліентам праз разетка абслугоўванне. Мы таксама дадалі слухач падзеі на разетка сэрвіс, каб мы маглі ведаць, калі іншыя кліенты стварылі нататку, каб мы маглі дадаць яе ў сваю калекцыю.

10. Адлюстраванне наліпак

Цяпер у нас ёсць магчымасць стварыць аб'ект нататкі і падзяліцца ім паміж браўзэрамі, але як мы на самой справе можам яго адлюстраваць? Тут уводзяцца дырэктывы.

Дырэктывы і іх тонкасці - гэта велізарная тэма, але кароткая версія заключаецца ў тым, што яны даюць магчымасць пашырыць элементы і атрыбуты з дапамогай карыстацкіх функцыянальных магчымасцей. Дырэктывы - гэта мая любімая частка пра AngularJS, таму што яна дазваляе стварыць увесь DSL (даменную мову) вакол вашага прыкладання ў HTML.

Цалкам натуральна, што, паколькі мы збіраемся ствараць налепкі для нашага савета па супрацоўніцтве, мы павінны стварыць stickyNote дырэктывы. Дырэктывы вызначаюцца шляхам выкліку метаду дырэктывы ў модулі, які вы хочаце дэклараваць, і перадачы імя і функцыі, якія вяртаюць аб'ект вызначэння дырэктывы. Аб'ект вызначэння дырэктывы мае мноства магчымых уласцівасцей, якія вы можаце вызначыць на ім, але мы збіраемся выкарыстаць тут толькі некалькі для нашых мэтаў.

Я рэкамендую вам азнаёміцца ​​з дакументацыяй AngularJS, каб убачыць увесь спіс уласцівасцей, якія вы можаце вызначыць у аб'екце вызначэння дырэктывы.

app.directive ('stickyNote', функцыя (сокет) {
var linker = функцыя (сфера дзеяння, элемент, attrs) {};

кантролер var = функцыя ($ вобласць) {};

вярнуцца {
абмежаваць: ’A’, // C.1
спасылка: linker, // C.2
кантролер: кантролер, // C.3
вобласць прымянення: {// C.4
нататка: '=',
ondelete: '&'
}
};
});

C.1 Вы можаце абмежаваць сваю дырэктыву пэўным тыпам элементаў HTML. Два найбольш распаўсюджаныя - гэта элемент альбо атрыбут, якія вы заяўляеце з выкарыстаннем Э і А адпаведна. Вы таксама можаце абмежаваць яго класам CSS альбо каментарыям, але гэта не так часта.

C.2 Функцыя спасылкі - гэта месца, дзе вы змяшчаеце ўвесь код маніпуляцыі DOM. Ёсць некалькі выключэнняў, якія я знайшоў, але гэта заўсёды дакладна (па меншай меры, 99 адсоткаў часу). Гэта асноўнае асноўнае правіла AngularJS, і таму я гэта падкрэсліў.

C.3 Функцыя кантролера працуе гэтак жа, як асноўны кантролер, які мы вызначылі для прыкладання, але $ вобласць аб'ект, які мы перадаем, характэрны для элемента DOM, на якім жыве дырэктыва.

C.4 AngularJS мае канцэпцыю ізаляванай сферы, якая дазваляе дакладна вызначыць, як сфера дзеяння дырэктывы ўзаемадзейнічае са знешнім светам. Калі б мы не абвясцілі вобласць прымянення, дырэктыва б імпліцытна наследавала бацькоўскую вобласць з адносінамі бацькоў і дзяцей. У многіх выпадках гэта не з'яўляецца аптымальным. Вылучаючы сферу прымянення, мы змякчаем верагоднасць таго, што знешні свет можа незнарок і негатыўна паўплываць на стан вашай дырэктывы.

Я абвясціў двухбаковую прывязку дадзеных да нататка з = сімвал і выраз, прывязаны да ondelete з & сімвал. Калі ласка, прачытайце дакументацыю AngularJS для поўнага тлумачэння ізаляванага аб'ёму, паколькі гэта адна з самых складаных тэм у рамках.

Такім чынам, давайце на самай справе дадамо ліпкую нататку ў DOM.

Як і любы добры фреймворк, AngularJS пастаўляецца з некалькімі сапраўды цудоўнымі магчымасцямі адразу. Адна з самых зручных функцый нг-паўтарыць. Гэтая дырэктыва AngularJS дазваляе перадаваць масіў аб'ектаў, і ён дублюе любы тэг, на якім ён знаходзіцца, столькі разоў, колькі элементаў у масіве. У выпадку ніжэй мы перабіраем нататкі масіў і дубляванне дзів элемент і яго дзеці на працягу нататкі масіў.

div sticky-note ng-repeat = "нататка ў нататках" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
увод ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Прыгажосць нг-паўтарыць заключаецца ў тым, што ён прывязаны да любога масіва, які вы перадасце, і пры даданні элемента ў масіў ваш элемент DOM аўтаматычна абнавіцца. Вы можаце зрабіць гэты крок далей і паўтарыць не толькі стандартныя элементы DOM, але і іншыя карыстацкія дырэктывы. Вось чаму вы бачыце налепка у якасці атрыбута элемента.

Ёсць два іншыя біты карыстацкага кода, якія неабходна ўдакладніць. Мы ізалявалі вобласць прымянення на налепкі дырэктыва па двух уласцівасцях. Першы - гэта абавязковая вызначаная ізаляваная вобласць на нататка маёмасць. Гэта азначае, што кожны раз, калі аб'ект заўвагі змяняецца ў бацькоўскай вобласці, ён будзе аўтаматычна абнаўляць адпаведны аб'ект заўвагі ў дырэктыве і наадварот. Іншы вызначаны ізаляваны аб'ём знаходзіцца на ondelete атрыбут. Гэта азначае, што калі ondelete называецца ў дырэктыве, яна будзе выклікаць любы выраз у ondelete атрыбут элемента DOM, які стварае экземпляр дырэктывы.

Пры стварэнні экземпляра дырэктывы яна дадаецца ў DOM і выклікаецца функцыя сувязі. Гэта выдатная магчымасць усталяваць некаторыя ўласцівасці DOM па змаўчанні для элемента. Параметр элемента, які мы перадаём, на самай справе з'яўляецца аб'ектам jQuery, і таму мы можам выконваць над ім аперацыі jQuery.

(AngularJS на самай справе пастаўляецца з убудаванай у яго падмноствам jQuery, але калі вы ўжо ўключылі поўную версію jQuery, AngularJS адкладзецца на гэта.)

app.directive ('stickyNote', функцыя (сокет) {
var linker = функцыя (аб'ём, элемент, attrs) {
// Некаторая ініцыяцыя DOM, каб зрабіць гэта прыемна
element.css ('злева', '10px');
element.css («зверху», «50 пікселяў»);
element.hide (). fadeIn ();
};
});

У прыведзеным вышэй кодзе мы проста размяшчаем налепку на сцэне і выцвітаем.

11. Выдаленне налепкі

Такім чынам, зараз, калі мы можам дадаць і адлюстраваць ліпкую нататку, самы час выдаліць ліпкія нататкі. Стварэнне і выдаленне наліпак - гэта пытанне дадання і выдалення элементаў з масіва, да якіх нататкі абавязаны. Гэта адказнасць бацькоўскай сферы для падтрымання гэтага масіва, таму мы і бярэм запыт на выдаленне з дырэктывы, але хай бацькоўская вобласць робіць сапраўдны цяжкі ўздым.

Вось чаму мы прайшлі праз усе праблемы, звязаныя са стварэннем ідэнтыфікаванай вобласці выразаў у дырэктыве: так дырэктыва можа прымаць падзея выдалення ўнутры і перадаваць бацьку для апрацоўкі.

Звярніце ўвагу на HTML унутры дырэктывы.

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

Самае наступнае, што я скажу, можа здацца доўгім шляхам, але памятайце, што мы на адным баку, і гэта будзе мець сэнс пасля таго, як я ўдакладню. Калі націснута кнопка ў правым верхнім куце налепкі, мы тэлефануем deleteNote на кантролеры дырэктывы і перадачы note.id значэнне. Пасля гэтага тэлефануе кантролер выдаліць, які затым выконвае любы выраз, які мы падвялі да яго. Пакуль што ўсё добра? Мы выклікаем лакальны метад на кантролеры, які затым перадае яго, выклікаючы любы выраз, вызначаны ў ізаляванай вобласці. Выраз, які выклікаецца на бацьку, проста выклікаецца deleteNote таксама.

app.directive ('stickyNote', функцыя (сокет) {
кантролер var = функцыя ($ вобласць) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
я зрабіў
});
};
};

вярнуцца {
абмежаваць: "A",
спасылка: спасылка,
кантролер: кантролер,
сфера: {
нататка: '=',
ondelete: '&'
}
};
});

(Пры выкарыстанні ізаляванай вобласці выразаў, параметры адпраўляюцца ў карту аб'екта.)

У бацькоўскай вобласці, deleteNote выклікаецца і робіць даволі стандартнае выдаленне з дапамогай вуглавы.для кожнага функцыя ўтыліты для перагляду масіва нататак. Пасля таго, як функцыя апрацавала свой мясцовы бізнес, яна ідзе наперад і выпускае падзею для астатняга свету, каб рэагаваць адпаведна.

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

// Які паступае
socket.on ('onNoteDeleted', функцыя (дадзеныя) {
$ scope.deleteNote (data.id);
});

// Які выходзіць
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

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

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

12. Абнаўленне налепкі

Мы робім фантастычны прагрэс! Да гэтага часу я спадзяюся, што вы пачынаеце бачыць некаторыя шаблоны, якія ўзнікаюць з гэтай віхуры, якую мы праводзім. Наступны пункт у спісе - гэта функцыя абнаўлення.

Мы пачнем з фактычных элементаў DOM і будзем сачыць за ім аж да сервера і назад да кліента. Спачатку нам трэба ведаць, калі змяняецца загаловак альбо тэкст налепкі. AngularJS разглядае элементы формы як частку мадэлі дадзеных, так што вы можаце хутка падключыць двухбаковую прывязку дадзеных. Для гэтага выкарыстоўвайце нг-мадэль дырэктывы і ўвядзіце ўласцівасць, да якога вы хочаце прывязаць. У гэтым выпадку мы збіраемся выкарыстоўваць note.title і note.body адпаведна.

Калі якое-небудзь з гэтых уласцівасцяў змяняецца, мы хочам захапіць гэтую інфармацыю для перадачы. Мы робім гэта з нг-змена дырэктывы і выкарыстоўваць яго для выкліку updateNote і перадайце ў сам аб'ект нататкі. AngularJS робіць вельмі разумную брудную праверку, каб выявіць, ці варта значэнне нг-мадэль змянілася, а затым выконвае выраз, які знаходзіцца ў нг-змена.

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

Перавагі выкарыстання нг-змена у тым, што мясцовая трансфармацыя ўжо адбылася, і мы проста адказныя за перадачу паведамлення. У кантролеры, updateNote называецца, і адтуль мы збіраемся выпраменьваць updateNote падзея для нашага сервера для трансляцыі для іншых кліентаў.

app.directive ('stickyNote', функцыя (сокет) {
кантролер var = функцыя ($ вобласць) {
$ scope.updateNote = функцыя (заўвага) {
socket.emit (’updateNote’, заўвага);
};
};
});

І ў кантролеры дырэктыў мы прыслухоўваемся да onNoteUpdated падзея, каб даведацца, калі нататка ад іншага кліента абнавілася, каб мы маглі абнавіць лакальную версію.

кантролер var = функцыя ($ вобласць) {
// Які паступае
socket.on ('onNoteUpdated', функцыя (дадзеныя) {
// Абнавіць, калі тая ж нататка
калі (data.id == $ scope.note.id) {

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

13. Перасоўванне налепкі

На дадзены момант мы ў асноўным зрабілі круг вакол дзіцячага басейна CRUD, і жыццё добра! Дзеля хітрасці салона, каб зрабіць уражанне на сваіх сяброў, мы дадамо магчымасць перамяшчаць нататкі па экране і абнаўляць каардынаты ў рэжыме рэальнага часу. Не панікуйце - гэта яшчэ некалькі радкоў кода. Уся гэтая цяжкая праца акупіцца. Я абяцаю!

Мы запрасілі на вечарыну спецыяльнага госця, jQueryUI, і зрабілі ўсё для перацягвання. Даданне магчымасці перацягвання нататкі лакальна займае толькі адзін радок кода. Калі дадаць element.draggable (); да вашай функцыі спасылкі вы пачнеце чуць «Вока тыгра» ад Survivor, таму што зараз вы можаце перацягваць нататкі.

Мы хочам ведаць, калі перацягванне спынілася, і захапіць новыя каардынаты для праходжання. jQueryUI быў пабудаваны некаторымі вельмі разумнымі людзьмі, таму, калі перацягванне спыняецца, вам проста трэба вызначыць функцыю зваротнага выкліку для падзеі stop. Мы хапаем note.id ад аб'екта сферы і левага і верхняга значэнняў CSS з карыстацкі інтэрфейс аб'ект. З гэтымі ведамі мы робім тое, што рабілі ўвесь час: выпраменьваем!

app.directive ('stickyNote', функцыя (сокет) {
var linker = функцыя (аб'ём, элемент, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit ('moveNote', {
ідэнтыфікатар: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', функцыя (дадзеныя) {
// Абнавіць, калі тая ж нататка
калі (data.id == scope.note.id) {
element.animate ({
злева: data.x,
зверху: data.y
});
}
});
};
});

У гэты момант не павінна здзіўляцца, што мы таксама слухаем падзею, звязаную з пераездам, ад службы сокетаў. У дадзеным выпадку гэта onNoteMoved падзея, і калі нататка супадае, мы абнаўляем левыя і верхнія ўласцівасці CSS. Бам! Гатова!

14. Бонус

Гэта раздзел бонусаў, які я б не ўключыў, калі б не быў цалкам упэўнены, што вы зможаце яго дасягнуць менш чым за 10 хвілін. Мы збіраемся размясціць на жывым серверы (я па-ранейшаму здзіўлены, як лёгка гэта зрабіць).

Па-першае, вам трэба падпісацца на бясплатную пробную версію Nodejitsu. Пробная версія бясплатная на працягу 30 дзён, што ідэальна падыходзіць для таго, каб намачыць ногі.

Пасля стварэння ўліковага запісу вам неабходна ўсталяваць пакет джытсу, які вы можаце зрабіць з каманднага радка праз $ npm ўсталяваць джытсу -g.

Тады вам трэба ўвайсці з каманднага радка праз $ jitsu лагін і ўвядзіце свае ўліковыя дадзеныя.

Пераканайцеся, што вы знаходзіцеся ў дадатку непасрэдна, увядзіце $ jitsu разгортванне і перабярыце пытанні. Я звычайна пакідаю як мага больш па змаўчанні, гэта азначае, што я даю сваёй праграме імя, але не паддамен і г.д.

І, дарагія мае сябры, гэта ўсё! Вы атрымаеце URL-адрас вашага прыкладання з выхаду сервера, як толькі ён будзе разгорнуты і гатовы да працы.

15. Выснова

Мы разгледзелі шмат артыкулаў пра AngularJS у гэтым артыкуле, і я спадзяюся, што вам было вельмі цікава ў гэтым працэсе. Я думаю, што гэта сапраўды цудоўна, што вы можаце зрабіць з AngularJS і Socket.io прыблізна ў 200 радкоў кода.

Было некалькі рэчаў, пра якія я не расказваў дзеля таго, каб засяродзіцца на асноўных момантах, але я заклікаю вас зняць крыніцу і пагуляць з дадаткам. Мы стварылі трывалую аснову, але ёсць яшчэ шмат магчымасцей, якія вы маглі б дадаць. Атрымаць узлом!

Лукаш Рубельке - энтузіяст тэхналогій і з'яўляецца суаўтарам AngularJS у дзеянні па камплектацыі публікацый. Яго любімая справа - захапляць людзей такімі ж новымі тэхналогіямі, як і ён. Ён кіруе групай карыстальнікаў вэб-прыкладанняў Phoenix і праводзіў некалькі хакатонаў са сваімі калегамі-злачынцамі.

Спадабалася гэта? Прачытайце гэтыя!

• Як зрабіць прыкладанне
• Нашы любімыя вэб-шрыфты - і яны не каштуюць ні капейкі
• Даведайцеся, што чакае дапоўненая рэальнасць
• Загрузіце бясплатныя тэкстуры: з высокім дазволам і гатовыя да выкарыстання зараз