Шӯрои ҳамкории 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 месозем. Сабаби истифодаи экспресс дар он аст, ки он механизми хуб барои ташкили сервери дороиҳои статикӣ дар дохили 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
{
"ном": "angular-collab-board",
"description": "Шӯрои ҳамкории AngularJS",
"версия": "0.0.1-1",
"хусусӣ": ҳақиқӣ,
"вобастагӣ": {
"экспресс": "3.x",
"socket.io": "0.9.x"
}
}

Яке аз хусусиятҳои зебои NPM ин қобилияти эълом кардани вобастагии худ дар a мебошад packages.json файлро фиристед ва пас онҳоро ба таври худкор тавассути насб кунед npm насб кунед дар сатри фармон.

04. Симро то Socket.io

Мо аллакай хусусиятҳои асосии дилхоҳамонро дар барнома муайян кардем ва аз ин рӯ, мо бояд шунавандагони чорабинии Socket.io ва бастани мувофиқро барои ҳар як амалиёт идора кунем.

Дар коди зер шумо мушоҳида хоҳед кард, ки он аслан конфигуратсияи шунавандагони рӯйдодҳо ва бозгашти зангҳост. Аввалин чорабинӣ пайвастшавӣ чорабинӣ, ки мо онро барои пайваст кардани рӯйдодҳои дигари худ дар басташавӣ истифода мебарем.

io.sockets.on ('пайвастшавӣ', функсия (розетка) {
socket.on ('createNote', function (маълумот) {
socket.broadcast.emit ('onNoteCreated', маълумот);
});

socket.on ('updateNote', function (маълумот) {
socket.broadcast.emit ('onNoteUpdated', маълумот);
});

socket.on ('deleteNote', function (маълумот) {
socket.broadcast.emit ('onNoteDeleted', маълумот);
});

socket.on ('moveNote', function (маълумот) {
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 бояд бо ҳадди аққал як нозир ҳузур дошта бошад ва аз ин рӯ, он ҷое ки ман ҳамеша оғоз мекунам.

Барои ба таври худкор пур кардани барнома, шумо бояд танҳо илова кунед ng-app ба гиреҳи HTML, ки шумо мехоҳед барнома зиндагӣ кунед. Бештари вақт, илова кардани он ба теги HTML комилан қобили қабул аст. Ман инчунин як атрибутро ба он илова кардам ng-app ба он мегӯям, ки ман мехоҳам истифода барнома модул, ки ман онро танҳо дар як лаҳза муайян мекунам.

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

Мо инчунин вазифаи Socket.io-ро дар а розетка хидмат, то ки мо ин объектро даргиронем ва онро дар фазои номҳои ҷаҳонӣ шино накунем.

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

Ва вақте ки мо дар он ҳастем, мо дастуреро бо номи эълом мекунем stickyNote ки мо онро барои инкапсулатсияи функсияи нотаи часпанда истифода хоҳем бурд.

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

Пас биёед он кореро, ки то имрӯз кардаем, бознигарӣ кунем. Мо барномаро бо истифода аз он оғоз кардем ng-app ва нозироти барномавии моро дар HTML эълом дошт. Мо инчунин модули барномаро муайян кардем ва MainCtrl нозир, розетка хидмат ва stickyNote директива.

09. Эҷоди ёддошти часпанда

Ҳоло, ки мо кузови барномаи AngularJS-ро дорем, мо ба сохтани хусусияти эҷод шурӯъ хоҳем кард.

app.controller (’MainCtrl’, function ($ kapsam, розетка) {// B.1
$ kapsam.notes = []; // B.2

// Воридшавӣ
socket.on ('onNoteCreated', function (маълумот) {// B.3
$ scale.notes.push (маълумот);
});

// содиротӣ
$ kapsam.createNote = function () {// B.4
var note = {
id: санаи нав (). getTime (),
сарлавҳа: 'Эзоҳи нав',
бадан: 'Интизорӣ'
};

$ scale.notes.push (қайд);
socket.emit ('createNote', қайд);
};

B.1 AngularJS дорои хусусияти тазриқи вобастагӣ мебошад, ки дар он сохта шудааст, бинобар ин мо а $ доираи объект ва розетка хизматрасонӣ. Дар $ доираи объект ҳамчун ViewModel хидмат мекунад ва асосан як объекти JavaScript мебошад, ки дар он баъзе воқеаҳо пухта шудаанд, то ҷубронкунии дуҷонибаро фароҳам оранд.

B.2 Мо массиви худро эълон карда истодаем, ки дар он мо намуди онро истифода мебарем.

Б.3 Мо барои шунаванда шунаванда илова карда истодаем onNoteCreated чорабинӣ дар розетка хизматрасонӣ ва тела додани сарбории чорабинӣ ба $ scale.notes массиви.

B.4 Мо эълон кардем createNote усуле, ки бо нобаёнӣ эҷод мекунад Шарҳ объект ва онро ба $ scale.notes массиви. Он инчунин розетка хидмат барои баровардани createNote чорабинӣ ва гузаред ёддошти нав объект дар баробари.

Пас акнун, ки мо усули сохтани ёддоштро дорем, чӣ гуна онро меномем? Ин саволи хуб аст! Дар файли HTML, мо директиваи дар AngularJS сохташударо илова мекунем нг-ро пахш кунед ба тугма ва сипас илова кунед createNote усули даъват ҳамчун арзиши атрибутӣ.

тугмаи id = "createButton" ng-click = "createNote ()"> Эҷоди Эзоҳ / тугма>

Вақти баррасии фаврии корҳое, ки мо то имрӯз анҷом додем. Мо массивро ба $ доираи объект дар MainCtrl ки ҳамаи қайдҳоро барои ариза нигоҳ медорем. Мо инчунин илова кардем createNote усули дар $ доираи эътироз кунед, ки як ёддошти нави маҳаллиро эҷод кунед ва сипас ин ёддоштро ба муштариёни дигар тавассути розетка хизматрасонӣ. Мо инчунин як шунавандаи чорабиниро дар розетка хидмат, то мо донем, ки кай мизоҷони дигар ёддошт эҷод кардаанд, то мо онро ба коллексияи худ илова кунем.

10. Намоиши ёддоштҳои часпанда

Ҳоло мо қобилияти сохтани объекти ёддоштро дорем ва онро дар байни браузерҳо мубодила кунем, аммо чӣ гуна мо онро воқеан намоиш медиҳем? Ин ҷо дастурҳо ворид мешаванд.

Директиваҳо ва нозукиҳои онҳо мавзӯи васеъ мебошанд, аммо версияи кӯтоҳ он аст, ки онҳо роҳи васеъ кардани унсурҳо ва атрибутҳоро бо фаъолияти фармоишӣ фароҳам меоранд. Дастурҳо ба осонӣ қисми дӯстдоштаи ман дар бораи AngularJS мебошанд, зеро он ба шумо имкон медиҳад, ки дар доираи барномаи худ дар тамоми DSL (Забони мушаххаси доменӣ) тамоми эҷод кунед.

Табиист, ки азбаски мо барои Шӯрои ҳамкории худ ёддоштҳои часпанда эҷод мекунем, ки мо бояд а stickyNote директива. Директиваҳо бо роҳи даъват кардани усули директивӣ дар модуле, ки мехоҳед онро эълон кунед ва бо ном ва функсияе, ки объекти таърифи директиваро бар мегардонад, муайян карда мешаванд. Объекти таърифи директивӣ дорои хосиятҳои зиёди имконпазир мебошад, ки шумо метавонед онро муайян кунед, аммо мо танҳо якчандтоашро барои мақсадҳои худ дар ин ҷо истифода мебарем.

Ман тавсия медиҳам, ки ҳуҷҷатҳои AngularJS -ро санҷед, то тамоми рӯйхати хосиятҳоро, ки шумо метавонед дар объекти таърифи директивӣ муайян кунед, дидан кунед.

app.directive ('stickyNote', function (розетка) {
var linker = function (доираи, унсури, attrs) {};

var controller = function ($ kapsam) {};

бозгашт {
маҳдуд кардан: ’A’, // C.1
истинод: linker, // C.2
нозир: контролер, // C.3
доираи: {// C.4
щайд: ’=’,
тоза кардан: ’&’
}
};
});

C.1 Шумо метавонед директиваи худро бо як намуди муайяни HTML маҳдуд кунед. Ду чизи маъмултарин унсур ё атрибут мебошанд, ки шумо бо истифода аз он эълом мекунед Е. ва A мутаносибан. Шумо инчунин метавонед онро бо синфи CSS ё шарҳ маҳдуд кунед, аммо ин чандон маъмул нест.

C.2 Функсияи истинод дар он аст, ки шумо ҳамаи рамзҳои идоракунии DOM-и худро мегузоред. Чанд истисное, ки ман ёфтам, вуҷуд дорад, аммо ин ҳамеша дуруст аст (ҳадди аққал 99 фоизи вақт). Ин як қоидаи асосии заминавии AngularJS аст ва аз ин рӯ ман инро таъкид кардам.

C.3 Функсияи контролер ба монанди контролери асосие, ки мо барои барнома муайян кардем, кор мекунад $ доираи объекте, ки мо мегузарем, хоси унсури DOM мебошад, ки директива дар он зиндагӣ мекунад.

C.4 AngularJS мафҳуми доираи ҷудошударо дорад, ки ба шумо имкон медиҳад, ки чӣ гуна доираи директива бо ҷаҳони беруна робита дошта бошад. Агар мо миқёсро эълон намекардем, директива ба таври мустақим аз доираи волидайн бо муносибати волидайн ва фарзанд мерос мегирифт. Дар бисёр ҳолатҳо ин оптималӣ нест. Бо ҷудо кардани миқёс, мо имкониятеро, ки ҷаҳони беруна метавонад нохост ва ба ҳолати дастури шумо таъсири манфӣ расонад, коҳиш медиҳем.

Ман дуҷонибаи ҳатмии маълумотро ба эълом доштам Шарҳ бо = аломат ва ифодаи ҳатмӣ тоза карда шуд бо & рамз Лутфан ҳуҷҷатҳои AngularJS -ро барои тавзеҳи пурраи доираи ҷудогона хонед, зеро ин яке аз мавзӯъҳои мураккаб дар чаҳорчӯба мебошад.

Пас, биёед воқеан ба DOM ёддошти часпак илова кунем.

Мисли ҳама гуна чаҳорчӯбаи хуб, AngularJS бо баъзе хусусиятҳои воқеан олӣ берун аз қуттӣ меояд. Яке аз хусусиятҳои дастӣ он аст нг-такрор кунед. Ин директиваи AngularJS ба шумо имкон медиҳад, ки дар массиви объектҳо гузаред ва он ҳама теги онро такрор мекунад, ба андозаи ашё дар массив. Дар ҳолати дар поён овардашуда мо такрор мекунем қайдҳо массив ва такрори див унсур ва фарзандони он барои дарозии қайдҳо массиви.

div sticky-note ng-repeat = "қайд дар ёддоштҳо" note = "note" ondelete = "deleteNote (id)">
навъи тугма = "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, балки дигар дастурҳои фармоиширо низ такрор кунед. Барои ҳамин шумо мебинед часпанда ҳамчун як хусусият дар унсур.

Ду ҷузъи дигари рамзи фармоишӣ мавҷуданд, ки бояд аниқ карда шаванд. Мо доираи оид ба ҷудо кардаанд часпанда дастур оид ба ду хосият. Аввалин доираи ҳатмии муайяншудаи алоҳида дар Шарҳ амвол. Ин чунин маъно дорад, ки ҳар вақте объекти нота дар доираи волидайн тағир ёбад, он объекти нотаи мувофиқро ба тариқи худкор баръакс нав мекунад. Дигар доираи ҷудошудаи муайяншуда дар тоза карда шуд аттрибутӣ. Ин маънои онро дорад, ки вақте тоза карда шуд дар директива номида мешавад, он ҳама ифодаҳое, ки дар тоза карда шуд аттрибутӣ дар унсури DOM, ки дастурро ба кор медарорад.

Вақте ки директива таҳия карда мешавад, он ба DOM илова карда мешавад ва функсияи пайванд номида мешавад. Ин як имконияти комил барои гузоштани баъзе хосиятҳои пешфарзии DOM дар унсур аст. Параметри унсури мо воқеъан як объекти jQuery аст ва аз ин рӯ мо метавонем дар он амалҳои jQuery иҷро кунем.

(AngularJS воқеан бо зергурӯҳи jQuery, ки дар он сохта шудааст, меояд, аммо агар шумо версияи пурраи jQuery-ро аллакай дохил карда бошед, AngularJS ба ин таъхир хоҳад кард.)

app.directive ('stickyNote', function (розетка) {
var linker = function (доираи, унсури, attrs) {
// Баъзе ташаббуси DOM барои онро хуб кардан
element.css ('чап', '10px');
element.css ('боло', '50px');
element.hide (). fadeIn ();
};
});

Дар рамзи дар боло овардашуда мо танҳо ёддошти часпандаро дар саҳна ҷойгир карда, онро пажмурда карда истодаем.

11. Нобуд сохтани ёддошти часпанда

Ҳамин тавр, акнун, ки мо метавонем як ёддошти часпакро илова ва намоиш диҳем, вақти он расидааст, ки ёддоштҳои часпакро нест кунем. Офариниш ва ҳазфи ёддоштҳои часпанда масъалаи илова ва нест кардани ашё аз массив аст, ки ёддоштҳо ба он ҳатмӣ мебошанд. Ин масъулияти доираи волидайн барои нигоҳ доштани он массив аст, бинобар ин мо дархости несткуниро аз дохили дастур сарчашма медиҳем, аммо бигзор доираи волидайн вазнинии воқеиро иҷро кунад.

Аз ин рӯ, мо тамоми мушкилоти эҷоди ифодаи муқарраршудаи ҷудошудаи директиваро паси сар кардем: то директива метавонист воқеаи несткуниро дар дохили худ қабул кунад ва онро барои коркарди волидайнаш супорад.

Ба HTML дар дохили дастур аҳамият диҳед.

навъи тугма = "button" ng-click = "deleteNote (note.id)"> × / button>

Он чизе, ки ман гуфтанӣ ҳастам, метавонад роҳи дароз ба назар расад, аммо дар хотир доред, ки мо дар як тарафем ва ин пас аз муфассал баён кардани ман маъно хоҳад дошт. Вақте ки тугма дар кунҷи болоии рости ёддошт часпонида мешавад, мо занг мезанем deleteNote дар нозири директива ва гузаштан дар note.id арзиш. Пас нозир занг мезанад навсозӣ, ки пас ҳар он ифодаеро, ки мо ба он пайваст карда будем иҷро мекунад. То ҳоло ҳамааш хуб? Мо як усули маҳаллиро ба контролер даъват мекунем, ки пас онро бо истифодаи ҳар як иборае, ки дар доираи ҷудошуда муайян карда шудааст, ба дасти худ месупорад. Иборае, ки ба волидон даъват карда мешавад, танҳо ҳамон вақт номида мешавад deleteNote инчунин.

app.directive ('stickyNote', function (розетка) {
var controller = function ($ kapsam) {
$ kapsam.deleteNote = функсия (id) {
$ kapsam.ondelete ({
ман кардам
});
};
};

бозгашт {
маҳдуд кардан: 'A',
истинод: linker,
нозир: назоратчи,
доираи: {
щайд: ’=’,
тоза кардан: ’&’
}
};
});

(Ҳангоми истифодаи миқёси ҷудошудаи ифодашуда, параметрҳо дар харитаи объект фиристода мешаванд.)

Дар доираи волидайн, deleteNote даъват карда мешавад ва бо истифода аз кунҷӣ. барои ҳар як функсияи утилит барои такрори болои массиви ёддоштҳо. Пас аз он, ки функсия бо тиҷорати маҳаллии худ сарукор дорад, он пеш меравад ва барои тамоми ҷаҳон дар ин самт вокуниш нишон медиҳад.

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

// Воридшавӣ
socket.on ('onNoteDeleted', function (маълумот) {
$ kapsam.deleteNote (data.id);
});

// содиротӣ
$ kapsam.deleteNote = функсия (id) {
var oldNotes = $ scale.notes,
newNotes = [];

angular.forEach (oldNotes, function (ёддошт) {
агар (note.id! == id) newNotes.push (note);
});

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

12. Навсозии ёддошти часпанда

Мо ба пешрафти афсонавӣ ноил мешавем! То имрӯз умедворам, ки шумо дидани баъзе намунаҳои аз ин сайёҳати гирдбод гузарандаро, ки мо гирифта истодаем, сар мекунед. Ҷузъи навбатии рӯйхат хусусияти навсозӣ мебошад.

Мо аз унсурҳои воқеии DOM оғоз карда, онро то ба сервер пайравӣ мекунем ва ба муштарӣ бармегардем. Аввалан мо бояд донем, ки сарлавҳа ё ҷасади ёддошт кай иваз карда мешавад. AngularJS унсурҳои формаро ҳамчун як қисми модели маълумот баррасӣ мекунад, то шумо битавонед дуҷонибаи бастани маълумотро дар як лаҳза пайваст кунед. Барои ин истифодаи модели нг дастур ва ба амволи гузоштан мехоҳед. Дар ин ҳолат мо истифода мебарем ёддошт. унвон ва ёддошт. бадан мутаносибан.

Ҳангоме ки яке аз ин хосиятҳо тағир меёбад, мо мехоҳем ин иттилоотро дар бар гирем. Мо инро бо нг-тағир дастур диҳед ва онро барои занг задан истифода баред 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', function (розетка) {
var controller = function ($ kapsam) {
$ kapsam.updateNote = функсия (қайд) {
socket.emit ('updateNote', қайд);
};
};
});

Ва дар нозири директивӣ, мо гӯш мекунем onNoteUpdated чорабинӣ барои донистани кай ёддошти муштарии дигар, то мо нусхаи маҳаллии худро нав кунем.

var controller = function ($ kapsam) {
// Воридшавӣ
socket.on ('onNoteUpdated', function (маълумот) {
// Агар ҳамон ёддоштро навсозӣ кунед
агар (data.id == $ scale.note.id) {

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

13. Ҷойивазкунии нотаи часпанда

Дар ин лаҳза мо асосан дар атрофи ҳавзи kiddie CRUD давр задем ва зиндагӣ хуб аст! Танҳо барои ҳиллаест, ки барои дӯстони худ ба ҳайрат афтодан, мо қобилияти ҳаракат кардани ёддоштҳоро дар атрофи экран ва дар вақти воқеӣ нав кардани координатҳо илова хоҳем кард. Воҳима накунед - ин танҳо якчанд сатри дигари код аст. Ҳамаи ин меҳнати пурсамар натиҷа медиҳад. Ман ваъда медиҳам!

Мо меҳмони махсус, jQueryUI-ро ба зиёфат даъват кардем ва мо ҳама чизро барои чизҳои кашолакунанда кардем. Илова кардани қобилияти кашолакунии маҳаллӣ танҳо як сатри кодро мегирад. Агар шумо илова кунед element.draggable (); ба вазифаи пайвандгари худ шумо ба шунидани 'Чашми паланг' аз ҷониби Survivor шурӯъ мекунед, зеро акнун шумо метавонед ёддоштҳои худро ба атрофи худ кашед.

Мо мехоҳем бидонем, ки кашолакунӣ кай қатъ шудааст ва координатҳои навро барои гузаштан ба даст меорем. jQueryUI аз ҷониби баъзе одамони хеле зирак сохта шудааст, аз ин рӯ, вақте ки кашолакунӣ қатъ мешавад, ба шумо лозим аст, ки танҳо як функсияи бозгашти воқеаи қатъро муайян кунед. Мо дастгир note.id хомӯш кардани объект ва арзишҳои чап ва болоии CSS аз ui объект. Бо ин дониш мо он чиро, ки ҳамеша иҷро мекардем, анҷом медиҳем: эмитент!

app.directive ('stickyNote', function (розетка) {
var linker = function (доираи, унсури, attrs) {
element.draggable ({
ист: функсия (ҳодиса, ui) {
socket.emit ('moveNote', {
id: kapsam.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (маълумот) {
// Агар ҳамон ёддоштро навсозӣ кунед
агар (data.id == scale.note.id) {
element.animate ({
чап: data.x,
боло: data.y
});
}
});
};
});

Дар ин маврид набояд тааҷҷубовар бошад, ки мо инчунин як чорабинии марбут ба ҳаракатро аз хидмати розетка гӯш мекунем. Дар ин ҳолат он аст onNoteMoved чорабинӣ ва агар ёддошт мувофиқат кунад, мо хосиятҳои чап ва болоии CSS-ро навсозӣ мекунем. Бам! Шуд!

14. Бонус

Ин як бахши бонусест, ки ман дохил намекунам, агар комилан боварӣ надоштам, ки шумо онро дар муддати камтар аз 10 дақиқа ба даст меоред. Мо ба сервери зинда ҷойгир хоҳем кард (ман то ҳол ҳайронам, ки ин чӣ қадар осон аст).

Аввалан, шумо бояд ба озмоиши ройгони Nodejitsu ворид шавед. Озмоиш барои 30 рӯз ройгон аст, ки барои тар кардани пойҳои шумо комил аст.

Пас аз эҷод кардани ҳисоби худ, шумо бояд бастаи jitsu -ро насб кунед, ки шумо метавонед онро аз сатри фармон тавассути $ npm install jitsu -g.

Пас ба шумо лозим аст, ки аз сатри фармон тавассути $ jitsu воридшавӣ ва эътиборномаи худро ворид кунед.

Боварӣ ҳосил кунед, ки шумо бевосита дар барномаи худ ҳастед, нависед $ jitsu deploy ва саволҳоро аз назар гузаронед. Ман одатан ба қадри имкон ба тарзи пешфарзӣ мегузорам, яъне маънои онро дорад, ки ман аризаи худро ном мегузорам, вале на subdomain ва ғайра.

Ва, дӯстони азизи ман, ин ҳама чизест! Пас аз он, ки он ҷойгир аст ва он ба кор омода аст, шумо URL-ро ба аризаи худ аз натиҷаи сервер хоҳед гирифт.

15. Хулоса

Мо дар ин мақола бисёр заминаи AngularJS-ро баррасӣ кардем ва умедворам, ки шумо дар ҷараёни ин кор хеле шавқовар будед. Ман фикр мекунам он воқеан хуб аст, ки шумо бо AngularJS ва Socket.io тақрибан 200 хатти кодро иҷро карда метавонед.

Чанд чизҳое буданд, ки ман ба хотири таваҷҷӯҳ ба нуқтаҳои асосӣ пӯшида надоштам, аммо ман шуморо даъват мекунам, ки манбаъро канда ва бо барнома бозӣ кунед. Мо таҳкурсии мустаҳкам сохтем, аммо боз ҳам бисёр хусусиятҳои шумо метавонед илова карда шаванд. Ҳакериро гиред!

Лукас Руеббелке як дӯстдори технология аст ва ҳаммуаллифи AngularJS дар амал барои нашрияҳои Manning мебошад. Чизи дӯстдоштаи ӯ ин аст, ки одамонро мисли ӯ аз технологияи нав ба ҳаяҷон оранд. Вай Phoenix Web Application User Group-ро роҳбарӣ мекунад ва бо шарикони худ дар ҷиноят чандин ҳактон баргузор кардааст.

Ин ба шумо писанд омад? Инҳоро бихонед!

• Чӣ гуна барнома сохтан мумкин аст
• Шрифтҳои вебии дӯстдоштаи мо - ва онҳо як динор арзиш надоранд
• Кашф кунед, ки барои воқеияти афзуда оянда чӣ аст
• Текстураҳои ройгонро зеркашӣ кунед: ҳалли баланд ва ҳоло барои истифода омода