Socket.io-мен AngularJS ынтымақтастық тақтасы

Мазмұны

• 01. Сервер
• 02. Жалаңаш сүйектер
• 03. Өзіңіздің тәуелділігіңізді жариялаңыз
• 04. Wocket up 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-тің негізгі түсінігі бар деп есептеймін, өйткені мен кодтың әр бұрышын қамтымаймын. Мысалы, мен HTML файлының басына енгізген CSS және JavaScript файлдарын шақырмаймын, өйткені ол жерде жаңа ақпарат жоқ.

Сонымен қатар, сізді GitHub есептік жазбасындағы кодты алуға кеңес беремін. Менің жақын досым Брайан Фордта Socket.io-дің керемет тұқымы бар, мен оны кейбір түпнұсқа идеяларға сүйендім.

Ынтымақтастық тақтасында бізге қажет төрт негізгі ерекшелік - нотаны құру, жазбаларды оқу, жазбаны жаңарту, жазбаны жою және көңілді болу үшін жазбаны тақтаға жылжыту. Ия, дұрыс, біз стандартты CRUD мүмкіндіктеріне назар аударамыз. Осы іргелі ерекшеліктерге назар аудара отырып, біз сізде үлгілерді алу үшін жеткілікті кодты қамтыған боларсыз, сондықтан сіз оларды алып, оларды басқа жерде қолдана аласыз.

01. Сервер

Алдымен біз Node.js серверінен бастаймыз, өйткені ол біз қалағанның барлығын құруға негіз болады.

Біз Express және Socket.io көмегімен Node.js серверін құрамыз. Біздің Express-ті пайдалануымыздың себебі - бұл Node.js. ішінде статикалық активтер серверін орнатудың жақсы механизмін ұсынады. Express көптеген керемет мүмкіндіктермен келеді, бірақ бұл жағдайда біз оны қосымшаны сервер мен клиент арасында таза түрде бөлу үшін қолданамыз.

(Мен сізде Node.js және NPM орнатылған деген болжам бойынша жұмыс істеп жатырмын. Жылдам Google іздеуі бұларды қалай орнатуға болатынын көрсетеді, егер жоқ болса).

02. Жалаңаш сүйектер

Сонымен, сервердің жалаң сүйектерін құру үшін, біз бірнеше жұмыс жасауымыз керек.

// app.js

// A.1
var express = талап ету (‘express’),
app = express ();
server = need (’http’). createServer (app),
io = талап ету (‘socket.io’). тыңдау (сервер);

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

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

A.1 Біз Node.js модульдерін өз қосымшамызда қолдана алатындай етіп жариялаймыз және негіздейміз. Біз Express-ті жариялаймыз, Express-ті орнатамыз, содан кейін HTTP серверін құрамыз және оған Express данасын жібереміз. Біз сол жерден біз Socket.io-ны құрып, біздің сервер данасын қадағалап отыру керектігін айтамыз.

A.2 Біз Express қолданбасына файлдарды жіберу үшін жалпы каталогты қолдануды ұсынамыз.

A.3 Біз серверді іске қосамыз және оған портта тыңдауды айтамыз 1337.

Әзірге бұл өте ауыртпалықсыз және тез болды. Біздің ойымша, біз кодқа 10 жолдан азырақ келеміз және бізде Node.js функционалды сервері бар. Алға!

03. Өзіңіздің тәуелділігіңізді жариялаңыз

// packages.json
{
«name»: «angular-collab-board»,
«сипаттама»: «AngularJS ынтымақтастық кеңесі»,
«нұсқа»: «0.0.1-1»,
«жеке»: шын,
«тәуелділіктер»: {
«экспресс»: «3.x»,
«socket.io»: «0.9.x»
}
}

NPM-нің ең жақсы ерекшеліктерінің бірі - а-да тәуелділіктеріңізді жариялау мүмкіндігі packages.json файлын ашып, оларды автоматты түрде орнатыңыз npm орнату пәрмен жолында.

04. Wocket up 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, жоюNote және 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 қосымшасы, кем дегенде, бір контроллермен бірге жүктелуі керек, сондықтан мен әрқашан бастаймын.

Бағдарламаны автоматты түрде жүктеу үшін сізге жай қосу керек ng-app қосымшаның өмір сүруін қалайтын HTML түйініне. Көбінесе оны HTML тегіне қосу өте қолайлы болады. Мен оған атрибут қостым ng-app оны қолданғым келетінін айту үшін қолданба модулін, мен оны бір сәтте анықтаймын.

// public / index.html
html ng-app = «app»>

Маған кем дегенде бір контроллер керек болатынын білемін, сондықтан оны пайдаланып шақырамын ng-контроллер және оны меншіктеу MainCtrl.

body ng-controller = «MainCtrl»> / body>

Сонымен, біз қазір модульге ілулі тұрмыз қолданба және атты контроллер MainCtrl. Оларды қазір жасайық.

Модульді құру өте қарапайым. Сіз оны қоңырау арқылы анықтайсыз бұрыштық.модуль және оған ат беру. Болашақ анықтама үшін бос массивтің екінші параметрі - қосымшада қолдану үшін қосалқы модульдерді енгізуге болатын жер. Бұл оқулықтың аясына кірмейді, бірақ сіздің қосымшаңыз күрделене бастаған кезде және қажеттіліктеріңізде ыңғайлы.

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

Біз бірнеше бос толтырғышты жариялаймыз қолданба бастап басталатын модуль MainCtrl төменде.Мұның бәрін кейінірек толтырамыз, бірақ мен негізгі құрылымды басынан бастап түсіндіргім келді.

app.controller (’MainCtrl’, функция ($ ауқымы) {});

Сондай-ақ, біз Socket.io функциясын а розетка біз бұл нысанды қоршап, оны ғаламдық аттар кеңістігінде қалдырып кетпеу үшін қызмет етеміз.

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

Біз осы уақытта болған кезде, деп аталатын директиваны жариялаймыз stickyNote біз жабысқақ ноталардың функционалдығын инкапсуляциялау үшін қолданамыз.

app.directive (’stickyNote’, function (розетка) {});

Сонымен осы уақытқа дейін не істегенімізді қарастырайық. Біз қолданбаны жүктеп алдық ng-app және біздің HTML контроллерімізді жариялады. Біз сонымен қатар қолданбалы модульді анықтадық және жасадық MainCtrl контроллер, розетка қызмет және stickyNote директива.

09. Жабысқақ жазбаны құру

Енді бізде AngularJS қосымшасының қаңқасы болғаннан кейін, біз жасау мүмкіндігін дамыта бастаймыз.

app.controller (’MainCtrl’, функция ($ ауқымы, розетка) {// B.1
$ kapsam.notes = []; // B.2

// Кіріс
socket.on (’onNoteCreated’, function (деректер) {// B.3
$ scale.notes.push (деректер);
});

// Шығыс
$ scale.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
тақырып: 'Жаңа ескерту',
негізгі мәтін: 'күтуде'
};

$ scale.notes.push (ескерту);
socket.emit (‘createNote’, ескерту);
};

B.1 AngularJS-те тәуелділікті енгізу мүмкіндігі бар, сондықтан біз а енгіземіз $ ауқымы объект және розетка қызмет. The $ ауқымы объект ViewModel ретінде қызмет етеді және негізінен JavaScript объектісі болып табылады, оған екі жақты деректер байланысын қосу үшін кейбір оқиғалар енгізілген.

B.2 Біз көріністі байланыстыратын массивті жариялаймыз.

B.3 Біз тыңдаушыны қосамыз onNoteCreated бойынша іс-шара розетка қызмет көрсету және оқиға жүктемесін итеру $ kapsam. ескертулер массив.

B.4 біз жарияладық createNote әдепкі жағдайды жасайтын әдіс Ескерту объектіні итеріп жібереді $ kapsam. ескертулер массив. Ол сонымен қатар розетка шығаратын қызмет createNote іс-шара және өту жаңа ескерту бірге объект.

Енді нотаны жасау әдісі бар болса, оны қалай атаймыз? Бұл жақсы сұрақ! HTML файлында біз AngularJS директивасын қосамыз батырмасын басыңыз батырмасын басыңыз, содан кейін createNote төлсипат мәні ретінде әдіс шақыру.

button id = «createButton» ng-click = «createNote ()»> Ескерту жасау / батырма>

Осы уақытқа дейін не істегенімізді тез қарап шығатын уақыт. Біз массивті қостық $ ауқымы объектісі MainCtrl бұл қосымшаның барлық жазбаларын сақтайтын болады. Біз сонымен бірге а createNote әдісі $ ауқымы жаңа жергілікті жазбаны құруға қарсы болыңыз, содан кейін сол жазбаны басқа клиенттерге розетка қызмет. Сонымен қатар біз іс-шара тыңдаушысын қостық розетка қызмет, сондықтан біз басқа клиенттер жазбаны қашан жасағанын біле аламыз, сондықтан оны өз коллекциямызға қосуға болады.

10. Жабысқақ жазбаларды көрсету

Енді бізде жазба нысанын құру және оны браузерлер арасында бөлу мүмкіндігі бар, бірақ оны қалай көрсетеміз? Бұл жерде директивалар келеді.

Директивалар және олардың нәзіктіктері - бұл үлкен тақырып, бірақ қысқа нұсқасы - бұл элементтер мен атрибуттарды арнайы функционалдылықпен кеңейтуге мүмкіндік береді. Директивалар AngularJS туралы менің сүйікті бөлімім, себебі бұл HTML-де қолданбаның айналасында DSL (доменге тән тіл) құруға мүмкіндік береді.

Әрине, біз ынтымақтастық тақтасына жабысқақ жазбалар жасайтын боламыз stickyNote директива. Директивалар директивалық әдісті сіз жариялағыңыз келетін модульге шақыру және директивалық анықтама объектісін қайтаратын ат пен функция арқылы беру арқылы анықталады. Директивтік анықтау нысаны сіз анықтай алатын көптеген мүмкін қасиеттерге ие, бірақ біз мұнда тек кейбіреулерін қолданамыз.

AngularJS құжаттамасын директивалық анықтама объектісінде анықтауға болатын қасиеттер тізімін толығымен қарауды ұсынамын.

app.directive (‘stickyNote’, function (розетка) {
var linker = функция (ауқым, элемент, attrs) {};

var контроллер = функция ($ ауқымы) {};

қайтару {
шектеу: ’A’, // C.1
сілтеме: сілтеме, // C.2
контроллер: контроллер, // C.3
қолдану аясы: {// C.4
ескерту: ’=’,
жою: '&'
}
};
});

C.1 Сіз өзіңіздің директиваңызды HTML элементінің белгілі бір түрімен шектей аласыз. Ең көп таралған екеуі - сіз қолданатын мәлімдейтін элемент немесе атрибут E және A сәйкесінше. Сіз оны тек CSS сыныбымен немесе түсініктемемен шектей аласыз, бірақ олар онша кең таралған емес.

C.2 Сілтеме функциясы - бұл сіздің барлық DOM манипуляция кодтарын қоятын орын. Мен тапқан бірнеше ерекшеліктер бар, бірақ бұл әрдайым дұрыс (кем дегенде 99 пайыз). Бұл AngularJS-тің негізгі ережесі, сондықтан мен оны ерекше атап өттім.

C.3 Контроллер функциясы қосымша үшін анықталған негізгі контроллер сияқты жұмыс істейді, бірақ $ ауқымы біз жіберіп отырған объект директиваның өмір сүретін DOM элементіне тән.

C.4 AngularJS оқшауланған ауқымының тұжырымдамасына ие, бұл директиваның ауқымы сыртқы әлеммен қалай байланысатындығын анық анықтауға мүмкіндік береді. Егер біз ауқымды жарияламаған болсақ, директива ата-ана мен баланың қарым-қатынасы арқылы ата-ананың аясынан мұраға қалған болар еді. Көптеген жағдайларда бұл оңтайлы емес. Ауқымды оқшаулау арқылы біз сыртқы әлем сіздің директиваңыздың күйіне абайсызда және кері әсер етуі мүмкін мүмкіндіктерді азайтамыз.

Мен деректерді екі жақты байланыстыратындығын жарияладым Ескерту бірге = таңбасы және өрнек өшіру бірге & таңба. Оқшауланған ауқымды толық түсіндіру үшін AngularJS құжаттамасын оқып шығыңыз, себебі бұл аядағы күрделі тақырыптардың бірі.

Сонымен, DOM-ға жабысқақ жазбаны қосайық.

Кез-келген жақсы құрылым сияқты, AngularJS қораптан тыс жерде керемет ерекшеліктермен бірге жеткізіледі. Ең ыңғайлы ерекшеліктердің бірі ng-қайталау. Бұл AngularJS директивасы объектілер массивіне өтуге мүмкіндік береді және ол кез-келген тегті массивтің элементтеріндей етіп қайталайды. Төмендегі жағдайда біз қайталанамыз ескертулер массив және көшірмесін жасау див ұзындығы бойынша элемент және оның балалары ескертулер массив.

div sticky-note ng-repeat = «ноталардағы ескертпе» note = «note» ondelete = «deleteNote (id)»>
батырма түрі = «батырма» ng-басу = «deleteNote (note.id)»> × / батырма>
ng-model = «note.title» ng-change = «updateNote (note)» type = «text»> енгізу
textarea ng-model = «note.body» ng-change = «updateNote (note)»
> {{note.body}} / textarea>
/ div>

Сұлулығы ng-қайталау ол сіз қандай массивке берілсе де, алапқа элемент қосқан кезде DOM элементі автоматты түрде жаңарады. Сіз бұл қадамды әрі қарай жалғастыра аласыз және тек стандартты DOM элементтерін ғана емес, сонымен қатар басқа тұтынушылық директиваларды да қайталай аласыз. Сондықтан сіз көріп отырсыз жабысқақ жазба элементтегі атрибут ретінде.

Түсіндіруді қажет ететін тағы екі биттік код бар. Біз ауқымды оқшауладық жабысқақ жазбалар екі қасиетке директива. Біріншісі - міндетті түрде оқшауланған ауқым Ескерту мүлік. Бұл дегеніміз, ескертпе нысаны ата-ананың ауқымында өзгерген сайын, ол автоматты түрде сәйкес жазбаны директивада және керісінше жаңартады. Басқа анықталған оқшауланған ауқым өшіру атрибут. Бұл дегеніміз, қашан өшіру директивада аталады, ол кез келген өрнекті шақырады өшіру директиваны дайындайтын DOM элементіндегі атрибут.

Нұсқаулық туындаған кезде ол DOM-қа қосылады және сілтеме функциясы шақырылады. Бұл элементте әдепкі DOM қасиеттерін орнатудың тамаша мүмкіндігі. Біз жіберіп отырған элемент параметрі шын мәнінде jQuery нысаны болып табылады, сондықтан біз оған jQuery әрекеттерін орындай аламыз.

(AngularJS іс жүзінде оған орнатылған jQuery жиынтығымен келеді, бірақ егер сіз jQuery-дің толық нұсқасын енгізген болсаңыз, AngularJS бұл туралы кейінге қалдырады.)

app.directive (‘stickyNote’, function (розетка) {
var linker = функция (ауқым, элемент, attrs) {
// Мұны жақсы ету үшін кейбір DOM бастамалары
element.css ('сол жақта', '10px');
element.css (‘top’, ’50px’);
element.hide (). fadeIn ();
};
});

Жоғарыдағы кодта біз жабысқақ нотаны сахнаға жай орналастырып, оны өшіріп жатырмыз.

11. Жабысқақ жазбаны жою

Енді біз жабысқақ жазбаны қосып, көрсете алатын болсақ, жабысқақ жазбаларды жою уақыты келді. Жабысқақ ноталарды құру және жою - бұл жазбалар байланыстырылған массивтен элементтерді қосу және жою. Бұл массивтің сақталуы үшін ата-аналық аймақтың міндеті, сондықтан біз жою туралы сұрауды директиваның ішінен шығарамыз, бірақ негізгі ауқым нақты ауыр көтеруді жасасын.

Сондықтан біз директивада анықталған оқшауланған ауқымды құрудың барлық қиындықтарын бастан өткердік: сондықтан директива жою оқиғасын іштей қабылдап, оны өңдеу үшін ата-анасына бере алады.

Директиваның ішіндегі HTML-ге назар аударыңыз.

батырма түрі = «батырма» ng-басу = «deleteNote (note.id)»> × / батырма>

Мен айтқым келген жайт ұзаққа созылған сияқты көрінуі мүмкін, бірақ біз бір жақта екенімізді ұмытпаңыз, әрі қарай түсіндіргеннен кейін мағынасы болады. Жабысқақ жазбаның жоғарғы оң жақ бұрышындағы батырма басылған кезде біз қоңырау шалып жатырмыз жоюNote директиваның контроллерінде және өту note.id мәні. Содан кейін контроллер қоңырау шалады ondelete, содан кейін біз оған сәйкес келген кез-келген өрнекті орындаймыз. Әзірше бәрі жақсы? Біз контроллерге жергілікті әдісті шақырамыз, содан кейін оқшауланған ауқымда анықталған кез-келген өрнекті шақырамыз. Ата-анаға қоңырау шалынатын өрнек тек кездейсоқ шақырылады жоюNote сонымен қатар.

app.directive (‘stickyNote’, function (розетка) {
var контроллер = функция ($ ауқымы) {
$ kapsam.deleteNote = функция (идентификатор) {
$ kapsam.ondelete ({
мен істедім
});
};
};

қайтару {
шектеу: ‘A’,
сілтеме: сілтеме,
контроллер: контроллер,
қолдану саласы: {
ескерту: ’=’,
жою: '&'
}
};
});

(Өрнекпен анықталған оқшауланған ауқымды қолданған кезде параметрлер объект картасында жіберіледі.)

Ата-ана шеңберінде жоюNote қоңырау шалады және көмегімен стандартты жоюды жасайды әрқайсысы үшін қосымшалар функциясы жазбалар массивінің үстінен қайталанады. Функция өзінің жергілікті бизнесімен айналысқаннан кейін, ол алға жылжиды және бүкіл әлемде осыған сәйкес әрекет ету үшін оқиға туындайды.

app.controller (’MainCtrl’, функция ($ ауқымы, розетка) {
$ kapsam.notes = [];

// Кіріс
socket.on (’onNoteDeleted’, function (деректер) {
$ kapsam.deleteNote (data.id);
});

// Шығыс
$ kapsam.deleteNote = функция (идентификатор) {
var oldNotes = $ scale.notes,
newNotes = [];

angular.forEach (oldNotes, функция (ескерту) {
егер (note.id! == id) newNotes.push (ескерту);
});

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

12. Жабысқақ жазбаны жаңарту

Біз керемет жетістіктерге жетеміз! Қазіргі уақытта біз сіздер алып бара жатқан дауыл турынан бірнеше заңдылықтарды көре бастадыңыздар деп үміттенемін. Тізімнің келесі элементі - жаңарту мүмкіндігі.

Біз нақты DOM элементтерінен бастаймыз және оны серверге дейін, клиентке дейін қайтарамыз. Алдымен біз жабысқақ нотаның тақырыбы немесе денесі қашан өзгертіліп жатқанын білуіміз керек. AngularJS форма элементтерін деректер моделінің бөлігі ретінде қарастырады, осылайша сіз деректерді екі жақты байланыстыруды тез арада байланыстыра аласыз. Мұны істеу үшін ng-модель директива және сіз байланыстырғыңыз келетін қасиетке салыңыз. Бұл жағдайда біз қолданамыз ескерту және ескерту. дене сәйкесінше.

Осы қасиеттердің кез-келгені өзгерген кезде, біз сол ақпаратты жіберіп алғымыз келеді. Біз мұны ng-өзгеріс директива және оны қоңырау шалу үшін қолданыңыз updateNote және нота объектісінің өзінде өткізіңіз. AngularJS қандай да бір мәннің бар-жоғын анықтау үшін өте ақылды лас тексерулер жасайды ng-модель өзгерді, содан кейін орналасқан өрнекті орындайды ng-өзгеріс.

ng-model = «note.title» ng-change = «updateNote (note)» type = «text»> енгізу
textarea ng-model = «note.body» ng-change = «updateNote (note)»> {{note.body}} / textarea>

Қолданудың төңкерісі ng-өзгеріс жергілікті трансформацияның болғандығы және біз тек хабарламаны тарату үшін жауаптымыз. Контроллерде updateNote деп аталады және сол жерден біз шығаратын боламыз updateNote біздің сервердің басқа клиенттерге тарататын оқиғасы.

app.directive (‘stickyNote’, function (розетка) {
var контроллер = функция ($ ауқымы) {
$ kapsam.updateNote = функция (ескерту) {
socket.emit (’updateNote’, ескерту);
};
};
});

Ал директивалық контроллерде біз тыңдаймыз onNoteUpdated Жергілікті нұсқаны жаңарту үшін басқа клиенттің жазбасының қашан жаңартылғанын білетін оқиға.

var контроллер = функция ($ ауқымы) {
// Кіріс
socket.on (’onNoteUpdated’, function (деректер) {
// Егер сол жазба болса, жаңартыңыз
егер (data.id == $ scale.note.id) {

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

13. Жабысқақ нотаны жылжыту

Қазіргі уақытта біз CRUD балалар бассейнін айналып өттік, ал өмір жақсы! Достарыңызды таңдандыру үшін қонақтардың айла-амалдары үшін біз экранға жазбаларды жылжыту және координаттарды нақты уақыт режимінде жаңарту мүмкіндігін қосамыз. Дүрбелең емес - бұл тағы бірнеше код жолдары. Осы қажырлы еңбектің барлығы өз нәтижесін береді. Мен сөз беремін!

Біз кешке арнайы қонақ, jQueryUI шақырдық, және біз бәрін сүйрелетін заттар үшін жасадық. Жергілікті жазбаны апару мүмкіндігін қосу кодтың бір жолын ғана алады. Егер сіз қоссаңыз element.draggable (); байланыстырушы функциясы үшін сіз Survivor-дің ‘Eye of Tiger’ тыңдай бастайсыз, өйткені енді өз жазбаларыңызды сүйреп апара аласыз.

Біз сүйреудің қашан тоқтағанын білгіміз келеді және өту үшін жаңа координаттарды түсіреміз. jQueryUI-ді кейбір ақылды адамдар құрастырған, сондықтан сүйреу тоқтаған кезде тоқтату оқиғасы үшін кері қоңырау функциясын анықтау керек. Біз note.id ауқым объектісінен және солдан және жоғарыдан CSS мәндерінен UI объект. Осы біліммен біз бұрыннан келе жатқан нәрсені жасаймыз: шығарыңыз!

app.directive (‘stickyNote’, function (розетка) {
var linker = функция (ауқым, элемент, attrs) {
element.draggable ({
аялдама: функция (оқиға, интерфейс) {
socket.emit (‘moveNote’, {
id: kapsam.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (деректер) {
// Егер сол жазба болса, жаңартыңыз
егер (data.id == kapsam.note.id) {
element.animate ({
сол жақта: data.x,
жоғарғы: data.y
});
}
});
};
});

Осы кезде біз розетка қызметінен көшуге байланысты оқиғаны тыңдайтынымыз таңқаларлық емес. Бұл жағдайда onNoteMoved егер ескертпе сәйкес болса, онда біз CSS сипаттарының сол және жоғарғы жақтарын жаңартамыз. Бам! Дайын!

14. Бонус

Бұл бонустық бөлім, егер сіз оған 10 минуттан аз уақыт ішінде жететіндігіңізге сенімді болмасам, оны қоспаймын. Біз тірі серверге орналастырамыз (мен оны жасаудың қаншалықты оңай екеніне әлі таңғаламын).

Алдымен, сіз Nodejitsu сынақ нұсқасына тіркелуіңіз керек. Сынақ 30 күн бойы тегін, бұл аяғыңызды ылғалдандыру үшін өте қолайлы.

Есептік жазбаны жасағаннан кейін джитсу пакетін орнату керек, оны пәрмен жолынан жасай аласыз $ npm орнату jitsu -g.

Содан кейін сізге пәрмен жолынан кіру керек $ jitsu кіру және тіркелу деректеріңізді енгізіңіз.

Қолданбада екеніңізге көз жеткізіңіз, теріңіз $ jitsu орналастыру және сұрақтар бойынша қадам жасаңыз. Әдетте мен әдепкі бойынша мүмкіндігінше көп қалдырамын, яғни мен өзімнің қосымшама атау беремін, бірақ субдомен емес, т.б.

Менің қымбатты достарым, мұнда бәрі бар! Сіз өзіңіздің қосымшаңызға URL мекенжайын сервердің орналастырылғаннан кейін, ол дайын болғаннан кейін аласыз.

15. Қорытынды

Біз осы мақалада көптеген AngularJS негіздерін қарастырдық және бұл процесте сіз көп уақыт өткіздіңіз деп үміттенемін. AngularJS және Socket.io-мен 200-ге жуық кодтық кодты орындауға болатын нәрсе өте жақсы деп ойлаймын.

Мен негізгі мәселелерге назар аудару үшін қарастырмаған бірнеше нәрсе болды, бірақ мен сізден қайнар көзді алып тастап, қосымшамен ойнауға шақырамын. Біз берік іргетас құрдық, бірақ әлі де көптеген мүмкіндіктер қосуға болады. Хакерлікке қол жеткізіңіз!

Лукас Руеббелке - бұл технологияның энтузиасты және AngularJS-тің Manning Publications үшін Action-да бірлескен авторы. Оның сүйікті ісі - адамдарға өзі сияқты жаңа технологияны қызықтыру. Ол Phoenix веб-қосымшасының пайдаланушылар тобын басқарады және өзінің серіктестерімен бірге бірнеше рет хакатондар ұйымдастырған.

Ұнады ма? Оларды оқыңыз!

• Қолданба қалай жасалады
• Біздің сүйікті веб-қаріптеріміз - және олардың құны бір тиын емес
• Толықтырылған шындық үшін не болатынын біліп алыңыз
• Тегін текстураны жүктеңіз: жоғары ажыратымдылық және қазір пайдалануға дайын