Sular.io менен AngularJS кызматташуу кеңеши

Мазмун

• 01. Сервер
• 02. Жылаңач сөөктөр
• 03. Көз карандылыгыңыз жөнүндө жарыялаңыз
• 04. Wire 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 серверин курабыз. Экспрессти колдонуп жаткандыгыбыздын себеби, ал Node.js. ичинде статикалык активдер серверин орнотуунун ыңгайлуу механизмин камсыз кылат. Экспресс чындыгында эле укмуштуудай өзгөчөлүктөрдүн тобу менен келет, бирок, биз аны колдонмону сервер менен кардардын ортосунда таза экиге бөлүү үчүн колдонобуз.

(Мен сизде 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",
"description": "AngularJS Кызматташуу Кеңеши",
"версия": "0.0.1-1",
"жеке": чыныгы,
"көз карандылыктар": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

КЭУнун эң сонун өзгөчөлүктөрүнүн бири - а-га көз карандылыгыңызды жарыялоо мүмкүнчүлүгү packages.json файлын жүктөп, андан кийин аларды автоматтык түрдө орнотуңуз npm орнотуу буйрук сабында.

04. Wire up Socket.io

Биз колдонмодо каалаган негизги өзгөчөлүктөрдү алдын-ала аныктап алганбыз, ошондуктан Socket.io иш-чарасынын угуучуларын жана ар бир иш-чара үчүн иш-чара өткөрүү үчүн тиешелүү жабууну орнотушубуз керек.

Төмөнкү коддон сиз иш-чаранын угуучуларынын жана чалууларды кайра жөндөөнүн конфигурациясы экендигин байкайсыз. Биринчи иш-чара байланыш башка иш-чараларды жабуу үчүн колдоно турган иш-чара.

io.sockets.on ('туташуу', функция (розетка) {
socket.on ('createNote', function (data) {
socket.broadcast.emit (’onNoteCreated’, маалыматтар);
});

socket.on ('updateNote', function (data) {
socket.broadcast.emit (’onNoteUpdated’, маалыматтар);
});

socket.on ('deleteNote', function (data) {
socket.broadcast.emit (’onNoteDeleted’, маалыматтар);
});

socket.on ('moveNote', function (data) {
socket.broadcast.emit (’onNoteMoved’, маалыматтар);
});
});

Бул жерден биз угармандарды толуктайбыз createNote, updateNote, deleteNote жана moveNote. Кайра чакыруу функциясы боюнча, биз кандай гана окуя болгонун уктуруп жатабыз, ошондо каалаган кардарлар окуя болуп өткөндүгү жөнүндө кабардар болушат.

Жеке иш-чараларды өткөргүчтөрдөгү кайра чакыруу функциялары жөнүндө бир нече нерсени белгилей кетүү керек. Бирөө, эгер сиз иш-чараны чыгарган кардардан башка окуяны башкаларга жөнөтүүнү кааласаңыз, анда сиз киргизиңиз берүү чейин чыгаруу функцияны чакыруу. Экинчиден, биз иш-чаранын пайдалуу жүгүн жөн гана кызыкдар тараптарга өткөрүп беребиз, ошондо алар өзүлөрү каалагандай иштете алышат.

05. Кыймылдаткычтарыңызды күйгүзүңүз!

Эми көз карандылыгыбызды аныктап, Node.js тиркемесибизди Express жана Socket.io кубаттуулуктары менен орнотконубуздан кийин, Node.js серверин ишке киргизүү жөнөкөй.

Алгач Node.js көзкарандылыктарыңызды орнотсоңуз болот:

npm орнотуу

Андан кийин сиз серверди төмөнкүдөй баштайсыз:

node 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’, function ($ kapsam) {});

Ошондой эле Socket.io функциясын а розетка кызматы, биз ошол объектти каптап, глобалдык аталыштар мейкиндигинде калкып калбашыбыз үчүн.

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

Ал эми биз болсо, деп аталган директиваны жарыялайбыз stickyNote жабышча нота иштешин капсулалоо үчүн колдонобуз.

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

Эмесе, ушул кезге чейин жасаган ишибизди карап чыгалы. Колдонмонун жардамы менен жүктөлүп бүттү ng-app жана HTMLдеги колдонмо контроллерубуз деп жарыялады. Ошондой эле колдонмо модулун аныктап, түздүк MainCtrl контроллер, розетка кызмат жана stickyNote директива.

09. Жабышкак нота түзүү

Эми бизде AngularJS тиркемесинин скелети бар болгондуктан, жаратуу өзгөчөлүгүн түзө баштайбыз.

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

// Кирүүчү
socket.on (’onNoteCreated’, function (data) {// B.3
$ kapsam.notes.push (маалыматтар);
});

// Чыгуучу
$ kapsam.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
аталышы: 'Жаңы Эскертүү',
тулку: 'Күтүүдө'
};

$ kapsam.notes.push (эскертүү);
socket.emit ('createNote', эскертүү);
};

B.1 AngularJS бир көз карандылыкты сайынуу өзгөчөлүгүнө ээ, ошондуктан биз а $ масштабы объект жана розетка кызмат. The $ масштабы объект ViewModel катары кызмат кылат жана негизинен JavaScript объектиси, ага эки тараптуу берилиштерди иштетүү үчүн айрым окуялар камтылган.

В.2 Биз көрүнүштү байлап турган массивди жарыялап жатабыз.

Б.3 Биз үчүн угуучу кошуп жатабыз onNoteCreated боюнча иш-чара розетка кызмат көрсөтүү жана иш-чаранын жүктөмүн түртүү $ kapsam.notes массив

В.4 Биз жарыяладык createNote демейки шартты түзүүчү ыкма Эскертүү объектисине кирип, аны түртөт $ kapsam.notes массив Ошондой эле розетка чыгаруу үчүн кызмат createNote иш-чара жана өтүп жаңы нота бирге объект.

Эми бизде нота түзүү ыкмасы бар, аны кантип атайбыз? Бул жакшы суроо! HTML файлында AngularJS директивасына курабыз нг бас баскычына жана андан кийин кошуңуз createNote атрибуттун мааниси катары ыкма чалуу.

button id = "createButton" ng-click = "createNote ()"> Эскертүү түзүү / баскыч>

Буга чейин жасаган иштерибизди тезинен карап чыгууга убакыт келди. Биз массивди коштук $ масштабы объект MainCtrl бул колдонмо үчүн бардык эскертүүлөрдү камтыйт. Биз дагы коштук createNote ыкмасы $ масштабы жаңы жергиликтүү нота түзүп, андан кийин ал карточканы башка кардарларга розетка кызмат. Ошондой эле окуя боюнча угарманды коштук розетка кызматы, башка кардарлар качан жазуу жаратканын билип, аны коллекциябызга кошо алабыз.

10. Жабышча жазууларды көрсөтүү

Бизде нота объектисин түзүү жана аны браузерлердин ортосунда бөлүшүү мүмкүнчүлүгү бар, бирок аны кантип көрсөтөбүз? Бул жерде директивалар кирет.

Директивалар жана алардын татаалдыгы өтө чоң тема, бирок кыскача версиясы, элементтерди жана атрибуттарды колдонуучунун функционалдык мүмкүнчүлүктөрү менен кеңейтүү мүмкүнчүлүгүн берет. Директивалар AngularJS жөнүндө эң жакшы көргөн бөлүгүм, анткени ал HTMLде тиркемеңиздин айланасында DSL (Domain Specific Language) түзүүгө мүмкүнчүлүк берет.

Биздин кызматташуу кеңешине жабышчаак белгилерди түзүп жаткандыктан, биз жаратышыбыз керек stickyNote директива. Директивалар сиз жарыялагыңыз келген модулдагы директивдик ыкманы чакыруу жана директивалык аныктоо объектисин кайтаруучу ат жана функция аркылуу өтүү менен аныкталат. Директивдүү аныктама объектисинде сиз аныктай турган көптөгөн касиеттер бар, бирок биз бул жерде бир нече гана нерселерди колдонобуз.

Сиз директивалык аныктоо объектисинде аныктай турган касиеттердин толук тизмесин көрүү үчүн AngularJS документтерин карап чыгууну сунуштайм.

app.directive ('stickyNote', function (розетка) {
var linker = function (масштаб, элемент, attrs) {};

var controller = function ($ kapsam) {};

return {
чектөө: ’A’, // C.1
link: linker, // C.2
контроллер: контроллер, // C.3
көлөмү: {// C.4
эскертүү: ’=’,
ondelete: ’&’
}
};
});

C.1 Сиз директиваңызды HTML элементинин белгилүү бир түрү менен чектей аласыз. Эң кеңири тараган эки элемент же атрибут, аны сиз колдонуп жарыялайсыз E жана A тиешелүүлүгүнө жараша. Сиз аны CSS классы же комментарий менен чектей аласыз, бирок алар анчалык көп эмес.

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

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

C.4 AngularJS обочолонгон чөйрөнүн концепциясына ээ, бул директиванын чөйрөсү тышкы дүйнө менен кандайча байланышта экендигин так аныктоого мүмкүндүк берет. Эгерде биз көлөмүн жарыялаган эмеспиз, анда директива ата-эне менен баланын ортосундагы мамиле менен ата-эне чөйрөсүнөн тукум кууп өткөн болот. Көп учурларда бул оптималдуу эмес. Көлөмдү бөлүп алуу менен биз тышкы дүйнө сиздин директиваңыздын абалына байкабай жана терс таасирин тийгизиши мүмкүн болгон мүмкүнчүлүктөрдү азайтабыз.

Мен эки тараптуу маалыматтарды милдеттүү түрдө байланыштырдым Эскертүү менен = белгиси жана милдеттүү түрдө туюнтма ondelete менен & белгиси. Сураныч, AngularJS документациясын окуп чыгыңыз, бул обочолонгон масштабдын толук түшүндүрмөсүн алуу, анткени ал алкактагы эң татаал темалардын бири.

Ошентип, келгиле, чындыгында DOMго жабышчаак нота кошолу.

Бардык жакшы алкактар ​​сыяктуу эле, AngularJS кээ бир чынында эле сонун өзгөчөлүктөр менен кошо кутудан чыгып турат. Ыңгайлуу өзгөчөлүктөрдүн бири ng-кайталоо. Бул AngularJS директивасы объектилердин массивине өтүүгө мүмкүнчүлүк берет жана ал кандай гана тег болбосун, массивдеги нерселер канча болсо, ошону кайталайт. Төмөндөгү учурда биз кайталап жатабыз эскертүүлөр массив жана копиялоо div узундугу үчүн элемент жана анын балдары эскертүүлөр массив

div sticky-note ng-repeat = "not in note" 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 элементтерин гана эмес, башка колдонуучунун көрсөтмөлөрүн дагы кайталай аласыз. Ошондуктан көрүп жатасыңар жабышчаак жазуу элементтин атрибуту катары.

Бажы кодунун дагы эки битин тактоо керек. Биз чөйрөсүн бөлүп карадык жабышчаак жазуулар эки касиетке көрсөтмө. Биринчиси, милдеттүү түрдө аныкталган обочолонгон чөйрө Эскертүү мүлк. Демек, нота объектиси ата-эненин чөйрөсүндө өзгөргөн сайын, ал тийиштүү нота объектисин директивада жана тескерисинче автоматтык түрдө жаңыртып турат. Башка аныкталган обочолонгон чөйрө боюнча ondelete атрибут. Бул эмнени билдирет, качан ondelete директивада аталат, анда кандай гана туюнтмалар болбосун, ondelete директиваны түзүүчү DOM элементиндеги атрибут.

Директива орнотулганда, ал DOMго кошулуп, шилтеме функциясы аталат. Бул элементке демейки DOM касиеттерин орнотууга сонун мүмкүнчүлүк. Биз өткөрүп жаткан элемент параметри чындыгында jQuery объектиси, андыктан ага jQuery амалдарын жасай алабыз.

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

app.directive ('stickyNote', function (розетка) {
var linker = function (масштаб, элемент, attrs) {
// Аны жагымдуу кылуу үчүн кээ бир DOM демилгеси
element.css ('сол', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Жогорудагы коддо биз жабышчаак нотаны сахнага коюп, өчүп баратабыз.

11. Жабышча жазууну жок кылуу

Ошентип, эми биз жабышча нота кошуп, көрсөтө алгандан кийин, жабышча жазууларды жок кылууга кез келди. Жабышкак нота түзүү жана жок кылуу, бул нота милдеттүү болгон массивдеги нерселерди кошуу жана жок кылуу. Бул массивди сактап калуу үчүн ата-энелер чөйрөсүнүн милдети, ошондуктан биз жок кылуу өтүнүчүн директиванын ичинен баштайбыз, бирок ата-эненин масштабы чыныгы оор жүктү көтөрүп чыгалы.

Ошондуктан, биз директивада аныкталган обочолонгон чөйрөнү түзүүдө бардык кыйынчылыктарды башыбыздан өткөрдүк: ошондуктан директива жок кылуу окуясын ички кабыл алып, аны иштеп чыгуу үчүн ата-энесине өткөрүп бере алат.

Директиванын ичиндеги HTMLге көңүл буруңуз.

баскычы түрү = "баскычы" ng-чыкылдатуу = "deleteNote (note.id)"> × / баскычы>

Кийинки айта турган сөзүм алыс жактагыдай сезилиши мүмкүн, бирок биз экөөбүздүн бир тарапта экенибизди эсиңизден чыгарбаңыз, мен кеңири айтып бергенден кийин мааниси бар болот. Чаптагыч нотанын жогорку оң бурчундагы баскыч чыкылдатканда биз чалып жатабыз deleteNote директиванын көзөмөлдөөчүсүндө жана note.id мааниси. Андан кийин контролер чалат ondelete, андан кийин биз ага байланышкан кандай гана сөздөрдү болбосун аткарат. Азырынча жакшыбы? Биз контроллерге жергиликтүү ыкманы чакырып жатабыз, андан кийин обочолонгон чөйрөдө кандай гана сөз айкашы берилбесин, аны өткөрүп берет. Ата-энени чакырган сөз айкашы жөн эле атала берет deleteNote ошондой эле.

app.directive ('stickyNote', function (розетка) {
var controller = function ($ kapsam) {
$ scale.deleteNote = function (id) {
$ kapsam.ondelete ({
Мен кылдым
});
};
};

return {
чектөө: 'A',
шилтеме: linker,
контролер: контроллер,
көлөмү: {
эскертүү: ’=’,
ondelete: ’&’
}
};
});

(Экспрессия менен аныкталган обочолонгон масштабды колдонууда, параметрлер объект картасында жөнөтүлөт.)

Ата-энелер чөйрөсүндө, deleteNote деп аталат жана жетиштүү стандарттуу өчүрүүнү жасайт angular.forEach пайдалуу функциясы нота массивинин үстүнөн кайталоо. Функция өзүнүн жергиликтүү бизнеси менен алектенип бүткөндөн кийин, иш-чара бүткүл дүйнө жүзү боюнча ошого жараша реакция жасайт.

app.controller ('MainCtrl', function ($ kapsam, розетка) {
$ kapsam.notes = [];

// Кирүүчү
socket.on (’onNoteDeleted’, function (data) {
$ kapsam.deleteNote (data.id);
});

// Чыгуучу
$ scale.deleteNote = function (id) {
var oldNotes = $ scale.notes,
newNotes = [];

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

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

12. Жабышча жазууну жаңыртуу

Биз укмуштай ийгиликтерге жетишип жатабыз! Азыркы учурда, биз сиз алып жаткан бороондун экскурсиясынан улам пайда болгон айрым үлгүлөрдү көрө баштайсыз деп үмүттөнөм. Тизмедеги кийинки жаңыртуу функциясы.

Биз иш жүзүндө DOM элементтеринен баштап, аны серверге чейин жеткирип, кардарга кайтып келебиз. Алгач жабышча жазуунун аталышы же негизги бөлүгү качан өзгөртүлүп жаткандыгын билишибиз керек. AngularJS форма элементтерин маалымат моделинин бир бөлүгү катары карайт, андыктан эки тараптуу маалыматтарды байлап кошуп алсаңыз болот. Бул үчүн ng-модель директивасы жана сиз байлап турган касиетке коюңуз. Бул учурда биз колдонууга бара жатабыз note.title жана note.body тиешелүүлүгүнө жараша.

Ушул касиеттердин бири дагы өзгөргөндө, ошол маалыматты өткөрүп берүүнү каалайбыз. Биз муну менен 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 controller = function ($ kapsam) {
$ scale.updateNote = function (note) {
socket.emit ('updateNote', эскертүү);
};
};
});

Жана директивалык контроллерде биз угуп жатабыз onNoteUpdated Жергиликтүү версиябызды жаңырта алышыбыз үчүн, башка кардардын нотасы качан жаңылангандыгын билүү үчүн иш-чара.

var controller = function ($ kapsam) {
// Кирүүчү
socket.on (’onNoteUpdated’, function (data) {
// Ошол эле эскертүү болсо, жаңыртуу
if (data.id == $ kapsam.note.id) {

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

13. Жабышча жазууну жылдыруу

Бул учурда биз негизинен CRUD киди бассейнин айланып чыктык жана жашоо жакшы! Досторуңуздун көңүлүн ачкан салондун айла-амалдары үчүн, экрандын айланасында ноталарды жылдырып, координаттарды реалдуу убакытта жаңыртуу мүмкүнчүлүгүн кошобуз. Коркпоңуз - бул дагы бир нече саптык код. Ушунча оор жумуштун бардыгы жемишин берет. Мен сөз берем!

Биз конокко атайын конок jQueryUI чакырдык жана сүйрөлүүчү нерселер үчүн баарын жасадык. Нотага сүйрөп баруу мүмкүнчүлүгүн кошуу бир гана сапты талап кылат. Эгер сиз кошсоңуз element.draggable (); Сиздин шилтеме функцияңызга Survivor тарабынан жазылган 'Eye of Tiger' аттуу чыгарманы уга баштайсыз, анткени эми өз жазууңузду ары-бери сүйрөп жүрө аласыз.

Сүйрөө качан токтогонун билип, жаңы координаттарды басып өтүү үчүн басып алабыз. jQueryUI кээ бир акылдуу адамдар тарабынан курулган, андыктан сүйрөө токтогондо токтотуу иш-чарасы үчүн кайра чакыруу функциясын аныктоо керек. Биз note.id масштаб объектисин жана сол жактагы жана жогорку CSS баалуулуктарын ui объект. Ошол билим менен биз мурунтан бери жасап келген нерселерди жасайбыз: эмитент!

app.directive ('stickyNote', function (розетка) {
var linker = function (масштаб, элемент, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit ('moveNote', {
id: kapsam.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (data) {
// Ошол эле эскертүү болсо, жаңыртуу
if (data.id == kapsam.note.id) {
element.animate ({
сол жакта: data.x,
top: data.y
});
}
});
};
});

Бул учурда биз сокет кызматынан көчүп байланыштуу иш-чараны угуп жаткандыгыбыз таң калыштуу деле эмес. Бул учурда ал onNoteMoved окуя жана эгерде жазуу дал келсе, анда CSS сол жана жогорку сапаттарын жаңыртабыз. Бам! Бүттү!

14. Бонус

Бул бонустук бөлүм, эгерде мен ага 10 мүнөттөн аз убакыттын ичинде жетише алам деп толук ишенбесем, анда камтылбайт элем. Биз жандуу серверге жайгаштырганы жатабыз (аны жасоонун оңой экенине дагы деле таң калам).

Биринчиден, сиз Nodejitsu акысыз сыноосуна катталууңуз керек. Сыноо 30 күндүн ичинде акысыз жүргүзүлөт, бул бутту нымдоо үчүн эң сонун.

Каттоо эсебиңизди түзгөндөн кийин, jitsu пакетин орнотушуңуз керек, ал аркылуу буйрук сабынан жасай аласыз $ npm jitsu -g орнотуу.

Андан кийин буйрук сабынан кирүү керек $ jitsu кирүү жана ишеним грамоталарын киргизиңиз.

Түздөн-түз колдонмоңузда экениңизди текшериңиз, териңиз $ jitsu deploy жана суроолор аркылуу кадам. Мен, адатта, мүмкүн болушунча көп нерсени калтырам, демек, мен өзүмдүн өтүнмөмө ат берем, бирок субдоменди ж.б.

Кымбаттуу достор, мунун бардыгы бар! Сиздин колдонмоңуздун URL дареги сервер иштей баштагандан кийин, ал иштөөгө даяр болгондон кийин болот.

15. Корутунду

Биз бул макалада көптөгөн AngularJS негиздерин карадык жана бул процессте сиз көп кызыктуу болду деп үмүттөнөм. AngularJS жана Socket.io менен 200гө жакын коддун ичинде эмнелерди жасай алсаңыз болот деп ойлойм.

Негизги ойлорго токтолуш үчүн бир нече нерселерди камтыган жокмун, бирок булакты түшүрүп, тиркеме менен ойноого үндөйм. Биз бекем пайдубал түптөдүк, бирок сиз дагы көптөгөн функцияларды кошо аласыз. Хакерликти алыңыз!

Лукас Руэббелке технологиянын ышкыбозу жана AngularJS in Manning Publications үчүн иш-аракеттердин автору. Анын сүйүктүү иш-аракеттери - ал сыяктуу жаңы технологияга адамдардын көңүлүн көтөрүү. Ал Phoenix Веб Тиркемесинин Колдонуучулар тобун башкарат жана кылмыштуулуктагы шериктештери менен бир нече жолу хакатон өткөргөн.

Бул жактыбы? Буларды оку!

• Колдонмону кантип жасоо керек
• Биздин сүйүктүү веб шрифттерибиз - жана алардын баасы бир тыйынга деле турбайт
• Кеңейтилген Чындыктын кийинки кадамдары менен таанышыңыз
• Акысыз текстураларды жүктөп алыңыз: жогорку разряддуу жана азыр колдонууга даяр