AngularJS համագործակցության խորհուրդը Socket.io- ի հետ

Հեղինակ: Peter Berry

Ստեղծման Ամսաթիվը: 14 Հուլիս 2021

Թարմացման Ամսաթիվը: 13 Մայիս 2024

AngularJS համագործակցության խորհուրդը Socket.io- ի հետ - Ստեղծագործական

Բովանդակություն

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- ի հիմնարար ընկալում, քանի որ չեմ պատրաստվում ծածկել ծածկագրի յուրաքանչյուր փոքրիկ անկյուն: Օրինակ, ես չեմ պատրաստվում զանգահարել CSS և JavaScript ֆայլեր, որոնք ես ներառել եմ HTML ֆայլի գլխում, քանի որ այնտեղ նոր տեղեկատվություն չկա:

Բացի այդ, ես խրախուսում եմ ձեզ վերցնել կոդը իմ GitHub հաշվից, որին հետևելու եմ: Իմ լավ ընկեր Բրայան Ֆորդը նույնպես ունի հիանալի Socket.io սերմ, որի հիման վրա ես հիմնեցի իմ որոշ բնօրինակ գաղափարները:

Համագործակցության տախտակում մեր ուզած չորս հիմնական առանձնահատկությունները նոտա ստեղծելու, գրառումներ կարդալու, նոտա թարմացնելու, նոտան ջնջելու և զվարճանալու համար գրատախտակին տեղափոխելու հնարավորությունն է: Այո, դա ճիշտ է, մենք կենտրոնանում ենք ստանդարտ CRUD հատկությունների վրա: Հավատում եմ, որ կենտրոնանալով այս հիմնարար հատկությունների վրա, մենք կպարունակենք բավարար ծածկագիր, որպեսզի ձևանմուշներ հայտնվեն, որպեսզի դուք կարողանաք դրանք վերցնել և կիրառել այլուր:

01. Սերվերը

Մենք նախ սկսելու ենք Node.js սերվերից, քանի որ այն ծառայելու է որպես հիմք, որի վրա մենք պատրաստվում ենք կառուցել մնացած ամեն ինչ:

Մենք պատրաստվում ենք կառուցել Node.js սերվեր `Express- ի և Socket.io- ի միջոցով: Express- ի օգտագործման պատճառն այն է, որ այն ապահովում է Node.js- ի ստատիկ ակտիվների սերվեր ստեղծելու լավ մեխանիզմ: Express- ը գալիս է իրոք հիանալի առանձնահատկությունների մի խումբ, բայց, այս դեպքում, մենք այն կօգտագործենք սերվերի և հաճախորդի միջև դիմումը մաքուր բաժանելու համար:

(Ես գործում եմ ենթադրելով, որ դուք ունեք տեղադրված Node.js և NPM: Google- ի արագ որոնումը ցույց կտա, թե ինչպես դրանք տեղադրել, եթե չունեք):

02. Մերկ ոսկորները

Այսպիսով, սերվերի մերկ ոսկորները կառուցելու համար հարկավոր է մի քանի բան անել, որպեսզի ոտքի կանգնենք:

// հավելված.ջ

// Ա .1
var express = պահանջում ('express'),
ծրագիր = արտահայտել ();
սերվեր = պահանջել ('http'): createServer (ծրագիր),
io = պահանջում ('socket.io'): լսել (սերվեր);

// Ա .2
app.configure (գործառույթ () {
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
{
"Անուն". "անկյունային-սալիկ-տախտակ",
"նկարագրություն". "AngularJS համագործակցության խորհուրդ",
«տարբերակ» ՝ «0.0.1-1»,
«մասնավոր». ճիշտ է,
«կախվածություններ» ՝ {
«էքսպրես» ՝ «3.x»,
"socket.io": "0.9.x"
}
}

NPM- ի ամենագեղեցիկ հատկություններից մեկը ձեր կախվածությունը հայտարարելու ունակությունն է փաթեթներ. json ֆայլ, ապա դրանք ավտոմատ կերպով տեղադրեք միջոցով npm տեղադրել հրամանի տողում:

04. Wire up 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', տվյալներ);
});
});

Այստեղից մենք ունկնդիրներ ենք ավելացնում ստեղծելՆշում, թարմացում Նշում, ջնջել Նշում և moveNote, Հետադարձ կապի գործառույթում մենք պարզապես հեռարձակում ենք, թե ինչ իրադարձություն է տեղի ունեցել, որպեսզի ցանկացած հաճախորդ, որը լսում է, կարող է տեղեկացվել, որ դեպքը տեղի է ունեցել:

Մի քանի բան կա, որոնք արժե մատնանշել հետադարձ զանգի գործառույթների վերաբերյալ անհատական իրադարձությունների մշակողների մեջ: Մեկը, եթե ցանկանում եք իրադարձություն ուղարկել բոլորին, բացի այն հաճախորդից, որն արտանետել է ձեր տեղադրած իրադարձությունը հեռարձակում նախքան արտանետում ֆունկցիայի զանգ: Երկրորդ, մենք պարզապես իրադարձության ծանրաբեռնվածությունը փոխանցում ենք շահագրգիռ կողմերին, որպեսզի նրանք կարողանան այն մշակել այնպես, ինչպես իրենք են հարմար:

05. Գործեք ձեր շարժիչները:

Այժմ, երբ մենք սահմանեցինք մեր կախվածությունը և ստեղծեցինք մեր Node.js ծրագիրը Express- ի և Socket.io- ի միջոցով, Node.js սերվերի նախաստորագրումը շատ պարզ է:

Սկզբում դուք տեղադրում եք ձեր Node.js կախվածությունները, այսպես.

npm տեղադրել

Եվ ապա սերվերը սկսում եք այսպես.

հանգույցի հավելված. js

Եւ հետո! Դուք գնում եք այս հասցեն ձեր զննարկիչում: Բա !մ

06. Մի քանի անկեղծ մտքեր առաջ շարժվելուց առաջ

Ես հիմնականում ֆրոնտենտի մշակող եմ, և ի սկզբանե մի փոքր վախեցել էի Node.js սերվերը կապել իմ ծրագրին: AngularJS- ի հատվածը արտառոց էր, բայց սերվերի կողմից JavaScript- ը: Սարսափելի շարժումից հերթագրեք սողացող երաժշտությունը:

Բայց ես բացարձակապես տեղեկացված էի, որ կարող էի ստեղծել ստատիկ վեբ սերվեր ընդամենը մի քանի տող կոդով և մի քանի այլ տողերում օգտագործել Socket.io ՝ բրաուզերների միջև բոլոր իրադարձությունները կարգավորելու համար: Եվ դա դեռ պարզապես JavaScript էր: Timամանակի համար մենք ընդամենը մի քանի առանձնահատկություններ ենք լուսաբանում, բայց հուսով եմ, որ հոդվածի վերջում կտեսնեք, որ հեշտ է լողալ, և լողավազանի խորը ծայրը այնքան էլ վախկոտ չէ:

07. Հաճախորդը

Այժմ, երբ մենք մեր սերվերի հետ ունենք մեր ամուր հիմքը, եկեք անցնենք իմ սիրած հատվածին ՝ հաճախորդին: Քաշվող մասի համար մենք կօգտագործենք AngularJS, jQueryUI և ոճի հիմքի համար Twitter Bootstrap:

08. Մերկ ոսկորները

Որպես անձնական նախապատվություն, երբ ես սկսում եմ նոր AngularJS ծրագիր, ես սիրում եմ արագորեն սահմանել այն նվազագույնը, որը գիտեմ, որ պետք է սկսեմ, և այնուհետև սկսեմ կրկնել դա հնարավորինս արագ:

Յուրաքանչյուր AngularJS ծրագիր պետք է տեղադրվի առնվազն մեկ հսկիչով, և սա, ընդհանուր առմամբ, այն է, որտեղ ես միշտ սկսում եմ:

Automaticallyրագիրը ավտոմատ կերպով բեռնաթափելու համար անհրաժեշտ է պարզապես ավելացնել ng-app դեպի HTML հանգույց, որում ցանկանում եք, որ ծրագիրը գործի: Mostամանակի մեծ մասը, այն HTML պիտակի մեջ ավելացնելը, միանգամայն ընդունելի կլինի: Ես նաև ատրիբուտ եմ ավելացրել դրան ng-app ասել նրան, որ ես ուզում եմ օգտագործել այն ծրագիր մոդուլ, որը ես կսահմանեմ ընդամենը մի պահ:

// հանրային / ինդեքս. html
html ng-app = "ծրագիր">

Ես գիտեմ, որ գոնե մեկ կարգավորիչի կարիք կունենամ, ուստի ես այն կանչեմ ՝ օգտագործելով ng- վերահսկիչ և դրան հատկացնելով գույք MainCtrl.

body ng-controller = "MainCtrl"> / մարմին>

Այսպիսով, մենք այժմ կախված ենք մոդուլի անունով ծրագիր և վերահսկիչ անունով MainCtrl, Եկեք գնանք առաջ և ստեղծենք դրանք հիմա:

Մոդուլի ստեղծումը բավականին պարզ է: Դուք դա սահմանում եք զանգահարելով անկյունային. մոդուլ և դրան անուն տալը: Ապագա տեղեկանքի համար դատարկ զանգվածի երկրորդ պարամետրն այն վայրն է, որտեղ դուք կարող եք ներարկել ենթամոդուլներ ՝ կիրառման մեջ օգտագործելու համար: Այն դուրս է գալիս այս ձեռնարկի շրջանակից, բայց հարմար է, երբ ձեր դիմումը սկսում է աճել բարդության և կարիքների մեջ:

// հանրային / js / collab.js
var app = angular.module ('app', []);

Մենք մտադիր ենք հայտարարագրել մի քանի դատարկ տեղապահներ ծրագիր մոդուլը սկսած MainCtrl ստորևԱյս ամենը մենք լրացնելու ենք ավելի ուշ, բայց ես հենց սկզբից ցանկացա նկարագրել հիմնական կառուցվածքը:

app.controller ('MainCtrl', գործառույթ ($ շրջանակ) {});

Մենք նաև պատրաստվում ենք փաթեթավորել Socket.io ֆունկցիոնալությունը ա վարդակից ծառայություն, որպեսզի մենք կարողանանք այդ օբյեկտը ամփոփել և չթողնել այն լողալով գլոբալ անունների տարածքում:

app.factory ('socket', գործառույթ ($ rootScope) {});

Եվ մինչ մենք դրան ենք, մենք պատրաստվում ենք հայտարարել, որ կոչվում է հրահանգ կպչուն Նշում որը մենք կօգտագործենք կպչուն գրառման ֆունկցիոնալությունը ամփոփելու համար:

app.directive ('կպչուն նշում', գործառույթ (վարդակ) {});

Ուստի եկեք վերանայենք մինչ այժմ արածը: Մենք գործարկել ենք հավելվածը ՝ օգտագործելով ng-app և հայտարարեց մեր ծրագրերի վերահսկիչը HTML- ում: Մենք նաև սահմանել ենք կիրառման մոդուլը և ստեղծել այն MainCtrl վերահսկիչ, վարդակից ծառայությունը և կպչուն Նշում հրահանգ

09. Կպչուն նոտայի ստեղծում

Այժմ, երբ մենք ունենք AngularJS հավելվածի կմախքը, մենք կսկսենք ստեղծել ստեղծագործության առանձնահատկությունը:

app.controller ('MainCtrl', գործառույթ ($ շրջանակ, վարդակից) {// B.1
$ fush.notes = []; // Բ .2

// Ներգնա
socket.on ('onNoteCreated', գործառույթ (տվյալներ) {// B.3
$ scope.notes.push (տվյալներ);
});

// Արտագնա
$ scope.createNote = ֆունկցիա () {// B.4
var նշում = {
id ՝ նոր Ամսաթիվ (). getTime (),
վերնագիր ՝ «Նոր նշում»,
մարմին ՝ «Սպասում է»
};

$ scope.notes.push (նշում);
socket.emit ('createNote', նշում);
};

B.1 AngularJS- ն իր մեջ ներկառուցված է կախվածության ներարկման հատկություն, այնպես որ մենք ներարկում ենք ա $ շրջանակ օբյեկտը և վարդակից ծառայություն Ի $ շրջանակ օբյեկտը ծառայում է որպես ViewModel և հիմնականում JavaScript օբյեկտ է, որի մեջ թխված են որոշ իրադարձություններ ՝ երկկողմանի տվյալների շտեմարան ապահովելու համար:

B.2. Մենք հայտարարում ենք այն զանգվածի մասին, որով կօգտագործենք տեսակետը կապելու համար:

B.3. Մենք ավելացնում ենք ունկնդիրների համար onNoteCreated- ը իրադարձություն վարդակից սպասարկում և իրադարձության ծանրաբեռնվածությունը մղում է դեպի $ շրջանակ. նշում զանգված

B.4. Մենք հայտարարել ենք ստեղծելՆշում մեթոդ, որը ստեղծում է լռելյայն Նշում առարկան և մղում այն դեպի այն $ շրջանակ. նշում զանգված Այն նաև օգտագործում է վարդակից ծառայություն ՝ արտանետելու համար ստեղծելՆշում իրադարձություն և անցնել նոր նշում առարկա երկայնքով:

Այսպիսով, այժմ, երբ մենք ունենք նշում ստեղծելու մեթոդ, ինչպե՞ս ենք այն անվանում: Դա լավ հարց է: HTML ֆայլում մենք ավելացնում ենք ներկառուցված AngularJS հրահանգը նգ-կտտոցով կոճակին և ապա ավելացնել ստեղծելՆշում մեթոդի զանգը որպես հատկանիշի արժեք:

կոճակ id = "createButton" ng-click = "createNote ()"> Ստեղծել նշում / կոճակ>

Timeամանակն է մինչ այժմ արածի արագ վերանայման համար: Մենք զանգված ենք ավելացրել $ շրջանակ օբյեկտը MainCtrl այն պահելու է ծրագրի բոլոր գրառումները: Մենք ավելացրել ենք նաև ա ստեղծելՆշում մեթոդ է $ շրջանակ առարկա է ստեղծում նոր տեղական նշում և այնուհետև այդ նշումը փոխանցում է մյուս հաճախորդներին ՝ վարդակից ծառայություն Մենք նաև ավելացրել ենք միջոցառման ունկնդիրներին վարդակից ծառայություն, որպեսզի կարողանանք իմանալ, թե երբ են այլ հաճախորդներ ստեղծել նշում, որպեսզի կարողանանք այն ավելացնել մեր հավաքածուում:

10. Կպչուն գրառումների ցուցադրում

Այժմ մենք ունենք նոտա օբյեկտ ստեղծելու և այն բրաուզերների միջև կիսելու հնարավորություն, բայց իրականում ինչպե՞ս ենք այն ցուցադրում: Հենց այստեղ են մտնում հրահանգները:

Հրահանգներն ու դրանց խճճվածությունը հսկայական թեմա են, բայց կարճ տարբերակն այն է, որ դրանք միջոց են տրամադրում տարրերն ու հատկությունները ընդլայնելու գործառույթով: Հրահանգները հեշտությամբ իմ սիրելի մասն են AngularJS- ի վերաբերյալ, քանի որ այն թույլ է տալիս էապես ստեղծել ձեր HTML- ով ձեր դիմումի շուրջ մի ամբողջ DSL (տիրույթի հատուկ լեզու):

Բնական է, որ քանի որ մենք մեր համագործակցության խորհրդի համար կպչուն նշումներ ենք ստեղծելու, որոնք պետք է ստեղծենք կպչուն Նշում հրահանգ Հրահանգները սահմանվում են ՝ հրահանգի մեթոդը կանչելով այն մոդուլի, որի վրա ցանկանում եք այն հայտարարել, և փոխանցելով դիրեկտիվի սահմանման օբյեկտ վերադարձող անուն և գործառույթ: Հրահանգի սահմանման օբյեկտը շատ հնարավոր հատկություններ ունի, որոնք կարող եք սահմանել դրա վրա, բայց մենք պատրաստվում ենք օգտագործել այստեղ ընդամենը մի քանիսը մեր նպատակների համար:

Խորհուրդ եմ տալիս ստուգել AngularJS փաստաթղթերը `տեսնելու համար այն հատկությունների ամբողջական ցուցակները, որոնք կարող եք սահմանել հրահանգների սահմանման օբյեկտի վրա:

app.directive ('stickyNote', գործառույթ (վարդակից) {
var linker = գործառույթ (շրջանակ, տարր, ցուցիչներ) {};

var հսկիչ = գործառույթ ($ շրջանակ) {};

վերադարձնել {
սահմանափակել. «Ա», // Գ .1
հղում ՝ կապող, // Գ .2
հսկիչ ՝ հսկիչ, // C.3
շրջանակը ՝ {// Գ .4
նշում. '=',
ondelete: '&'
}
};
});

C.1 Դուք կարող եք սահմանափակել ձեր հրահանգը HTML- ի որոշակի տիպի տարրով: Երկու ամենատարածվածը տարրն է կամ հատկանիշը, որը դուք հայտարարում եք օգտագործելու մասին Ե և Ա համապատասխանաբար Կարող եք նաև սահմանափակել այն CSS դասով կամ մեկնաբանությամբ, բայց դրանք այնքան էլ տարածված չեն:

C.2 Հղման գործառույթն այն վայրն է, որտեղ դուք դնում եք ձեր բոլոր DOM մանիպուլյացիոն ծածկագրերը: Մի քանի բացառություններ կան, որոնք ես գտել եմ, բայց դա միշտ էլ ճիշտ է (ժամանակի առնվազն 99 տոկոսը): Սա AngularJS- ի հիմնարար կանոնն է, և ես դրա համար ընդգծեցի այն:

Գ .3 Կարգավորիչի գործառույթն աշխատում է ճիշտ այնպես, ինչպես հիմնական կարգավորիչը, որը մենք սահմանել ենք կիրառման համար, բայց $ շրջանակ օբյեկտը, որով մենք անցնում ենք, հատուկ է DOM տարրին, որով հրահանգը շարունակում է ապրել:

C.4 AngularJS- ն ունի մեկուսացված շրջանակի հայեցակարգ, որը թույլ է տալիս հստակորեն որոշել, թե ինչպես է դիրեկտիվի շրջանակը հաղորդակցվում արտաքին աշխարհի հետ: Եթե մենք չհայտարարեինք գործողության ոլորտը, ապա դիրեկտիվը անուղղակիորեն ժառանգված կլիներ ծնողի սահմաններից `ծնող-երեխա հարաբերությունների հետ: Շատ դեպքերում դա օպտիմալ չէ: Շրջանակը մեկուսացնելով մենք մեղմացնում ենք հնարավորությունները, որ արտաքին աշխարհը կարող է ակամա և բացասաբար ազդել ձեր դիրեկտիվի վիճակի վրա:

Ես հայտարարել եմ երկկողմանի տվյալների պարտադիր լինելու մասին Նշում հետ = խորհրդանիշ և արտահայտություն, որը պարտադիր է վերացնել հետ & խորհրդանիշ. Խնդրում ենք կարդալ AngularJS փաստաթղթերը `մեկուսացված շրջանակի լրիվ բացատրության համար, քանի որ այն շրջանակում առկա առավել բարդ թեմաներից մեկն է:

Այսպիսով, եկեք իրականում կպչուն նշում ավելացնենք DOM- ին:

Anyանկացած լավ շրջանակի նման, AngularJS- ն իրոք հոյակապ առանձնահատկություններով է դուրս գալիս: Ամենահարմար հատկություններից մեկն է նգ-կրկնել, AngularJS- ի այս հրահանգը թույլ է տալիս անցնել օբյեկտների զանգված, և այն կրկնօրինակում է ցանկացած պիտակի վրա, այնքան անգամ, որքան զանգվածում կան իրեր: Ստորև ներկայացված դեպքում մենք կրկնում ենք նշում է զանգված և կրկնօրինակել div տարրը և նրա երեխաները երկարության համար նշում է զանգված

div sticky-note ng-repeat = "note in notes" note = "note" ondelete = "ջնջել Նշում (id)">
կոճակի տեսակը = "կոճակը" ng-click = "deleteNote (note.id)"> × / կոճակ>
մուտքագրում ng-model = "note.title" ng-change = "update Նշում (նշում)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (նշում)"
> {{note.body}} / textarea>
/ div>

Գեղեցկությունը նգ-կրկնել այն է, որ այն կապված է ցանկացած զանգվածի, որը դուք փոխանցում եք, և, երբ զանգվածին նյութ եք ավելացնում, ձեր DOM տարրը ավտոմատ կերպով կթարմացվի: Կարող եք մեկ քայլ առաջ գնալ և կրկնել ոչ միայն ստանդարտ DOM տարրերը, այլ նաև այլ սովորեցված հրահանգներ: Դրա համար էլ տեսնում եք կպչուն նոտա որպես հատկանիշ տարրին:

Գոյություն ունեն մաքսային ծածկագրի երկու այլ կտորներ, որոնք պետք է հստակեցվեն: Մենք մեկուսացրել ենք շրջանակի վրա կպչուն գրառումները հրահանգ երկու հատկությունների վերաբերյալ: Առաջինը պարտադիր սահմանված մեկուսացված շրջանակն է Նշում սեփականություն Սա նշանակում է, որ ամեն անգամ, երբ նշման օբյեկտը փոխվի ծնողի տիրույթում, այն ավտոմատ կերպով կթարմացնի համապատասխան նշման օբյեկտը հրահանգում և հակառակը: Մյուս սահմանված մեկուսացված շրջանակը գտնվում է վերացնել հատկանիշ Սա նշանակում է, որ երբ վերացնել հրահանգում կանչված է, այն կկոչի այն արտահայտությունը, որը կա վերացնել ատրիբուտը հրահանգը հրահանգող DOM տարրի վրա:

Երբ հրահանգավորվում է, այն ավելացվում է DOM- ին և կոչվում է հղման գործառույթ: Սա հիանալի հնարավորություն է տարրի վրա դնելու որոշ լռելյայն DOM հատկություններ: Մենք անցնում ենք տարրի պարամետրը իրականում jQuery օբյեկտ է, և այդպիսով մենք կարող ենք jQuery գործողություններ կատարել դրա վրա:

(AngularJS- ն իրականում գալիս է դրա մեջ ներկառուցված jQuery ենթաբազմության, բայց եթե դուք արդեն ներառել եք jQuery- ի ամբողջական տարբերակը, AngularJS- ը հետաձգելու է դրան):

app.directive ('stickyNote', գործառույթ (վարդակից) {
var linker = գործառույթ (շրջանակ, տարր, ցուցիչ) {
// Ինչ-որ DOM նախաձեռնություն `այն գեղեցիկ դարձնելու համար
element.css («ձախ», «10px»);
element.css («վերև», «50 հատ»);
element.hide (). fadeIn ();
};
});

Վերոնշյալ ծածկագրում մենք պարզապես դիրում ենք կպչուն նոտան բեմի վրա և մարում այն:

11. Կպչուն նոտայի ջնջում

Այսպիսով, հիմա, երբ մենք կարողացանք ավելացնել և ցուցադրել կպչուն նոտա, ժամանակն է ջնջել կպչուն գրառումները: Կպչուն նոտաների ստեղծումը և ջնջումը խնդիր է այն զանգվածից ավելացնելու և ջնջելու, որի հետ կապված են գրառումները: Սա ծնողական շրջանակի պարտականությունն է պահպանել այդ զանգվածը, այդ իսկ պատճառով մենք ծագում ենք հրահանգի ներսից ջնջելու հայցը, բայց թող ծնողի շրջանակը կատարի իրական ծանրաբեռնվածությունը:

Սա է պատճառը, որ մենք անցանք հրահանգի վրա սահմանված արտահայտության սահմանված մեկուսացված շրջանակ ստեղծելու բոլոր դժվարությունները. Այնպես որ դիրեկտիվը կարող է ներքինից ստանալ ջնջման իրադարձությունը և այն փոխանցել իր ծնողին ՝ մշակման համար:

Ուշադրություն դարձրեք հրահանգի ներսում գտնվող HTML- ին:

կոճակի տեսակը = "կոճակը" ng-click = "deleteNote (note.id)"> × / կոճակ>

Հաջորդ հաջորդ բանը, որ ես պատրաստվում եմ ասել, կարող է թվալ, թե շատ երկար ճանապարհ կա, բայց հիշեք, որ մենք նույն կողմում ենք, և իմաստ կունենա այն բանից հետո, երբ կմանրամասնեմ: Երբ կպչուն գրության վերևի աջ անկյունում գտնվող կոճակը կտտացնում են, մենք զանգահարում ենք ջնջել Նշում դիրեկտիվի վերահսկիչի մասին և անցում կատարելու մեջ նշում. id արժեք Դրանից հետո վերահսկիչը զանգահարում է վերացնել, որն այնուհետև կատարում է ցանկացած արտահայտություն, որը մենք կապում էինք դրան: Մինչ այժմ այնքան լավ Մենք հսկիչի վրա կանչում ենք տեղական մեթոդ, որն այնուհետև այն հանձնում է `զանգահարելով ցանկացած արտահայտություն, որը սահմանված է մեկուսացված տիրույթում: Արտահայտությունը, որը կոչվում է ծնողին, պատահաբար կոչվում է ջնջել Նշում նույնպես.

app.directive ('stickyNote', գործառույթ (վարդակից) {
var հսկիչ = գործառույթ ($ շրջանակ) {
$ scope.deleteNote = գործառույթ (id) {
$ scope.ondelete ({
Ես արել եմ
});
};
};

վերադարձնել {
սահմանափակել. «Ա»,
հղում ՝ կապող,
վերահսկիչ ՝ վերահսկիչ,
շրջանակը ՝ {
նշում. '=',
ondelete: '&'
}
};
});

(Արտահայտությամբ սահմանված մեկուսացված շրջանակն օգտագործելիս պարամետրերն ուղարկվում են օբյեկտի քարտեզում):

Scopeնողական շրջանակներում ջնջել Նշում ստանում է զանգահարում և կատարում է բավականին ստանդարտ ջնջում ՝ օգտագործելով անկյունային: Յուրաքանչյուրի համար օգտակար գործառույթ ՝ գրառումների զանգվածի վրա կրկնություն կատարելու համար: Երբ գործառույթը կարգավորի իր տեղական բիզնեսը, այն շարունակվում է և արձակում է իրադարձություն, որպեսզի մնացած աշխարհը համապատասխանաբար արձագանքի:

app.controller ('MainCtrl', գործառույթ ($ շրջանակ, վարդակից) {
$ fush.notes = [];

// Ներգնա
socket.on ('onNoteDeleted', գործառույթ (տվյալներ) {
$ scope.deleteNote (data.id);
});

// Արտագնա
$ scope.deleteNote = գործառույթ (id) {
var oldNotes = $ շրջանակ. նշում,
newNotes = [];

անկյունային. Յուրաքանչյուրի համար (oldNotes, ֆունկցիա (նշում) {
if (note.id! == id) newNotes.push (նշում);
});

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

12. Կպչուն գրության թարմացում

Մենք ֆանտաստիկ առաջընթաց ենք ապրում: Այժմ ես հուսով եմ, որ դուք սկսում եք տեսնել որոշ օրինաչափություններ, որոնք առաջանում են այս պտտահողմային շրջագայությունից, որը մենք իրականացնում ենք: Listուցակի հաջորդ կետը թարմացման առանձնահատկությունն է:

Մենք պատրաստվում ենք սկսել իրական DOM տարրերից և հետևել դրան մինչև սերվեր և հետ կանգնել հաճախորդի համար: Նախ պետք է իմանանք, թե երբ է փոխվում կպչուն նոտայի վերնագիրը կամ մարմինը: AngularJS- ը ձևի տարրերը վերաբերվում է որպես տվյալների մոդելի մի մաս, այնպես որ կարող եք կապել երկկողմանի տվյալների պարտադիր պատուհանի մեջ: Դա անելու համար օգտագործեք ng- մոդել հրահանգ և տեղադրել այն գույքը, որին ուզում եք կապել: Այս դեպքում մենք կօգտագործենք նշում. վերնագիր և նշում.մարմին համապատասխանաբար

Երբ այս հատկություններից որևէ մեկը փոխվում է, մենք ուզում ենք որսալ այդ տեղեկատվությունը, որը պետք է փոխանցվի: Մենք դա իրականացնում ենք հետևյալով նգ-փոփոխություն հրահանգը և օգտագործեք այն զանգահարելու համար թարմացում Նշում և անցնել նոտայի օբյեկտի մեջ: AngularJS- ը շատ խելացի կեղտոտ ստուգում է կատարում `պարզելու համար, թե արդյոք դրա արժեքի արժեքը կա ng- մոդել փոխվել է և այնուհետև կատարում է այն արտահայտությունը, որը կա նգ-փոփոխություն.

մուտքագրում ng-model = "note.title" ng-change = "update Նշում (նշում)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (նշում)"> {{note.body}} / textarea>

Օգտագործման հակառակ կողմը նգ-փոփոխություն այն է, որ տեղական վերափոխումն արդեն տեղի է ունեցել, և մենք պարզապես պատասխանատու ենք հաղորդագրությունը փոխանցելու համար: Վերահսկիչում թարմացում Նշում կոչվում է, և այնտեղից մենք պատրաստվում ենք թողարկել այն թարմացում Նշում իրադարձություն, որպեսզի մեր սերվերը փոխանցի մյուս հաճախորդներին:

app.directive ('stickyNote', գործառույթ (վարդակից) {
var հսկիչ = գործառույթ ($ շրջանակ) {
$ scope.updateNote = գործառույթ (նշում) {
socket.emit ('updateNote', նշում);
};
};
});

Իսկ հրահանգների վերահսկիչում մենք լսում ենք այն onNoteUpdated իրադարձություն ՝ իմանալու համար, երբ մեկ այլ հաճախորդի գրառումն է թարմացվել, որպեսզի մենք կարողանանք թարմացնել մեր տեղական տարբերակը:

var հսկիչ = գործառույթ ($ շրջանակ) {
// Ներգնա
socket.on ('onNoteUpdated', գործառույթ (տվյալներ) {
// Թարմացնել, եթե նույն նշումը
եթե (data.id == $ fush.note.id) {

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

13. Կպչուն նոտա տեղափոխելը

Այս պահին մենք հիմնականում պտույտ ենք կատարել CRUD kiddie լողավազանի շուրջ և կյանքը լավ է: Պարզապես ձեր ընկերներին տպավորություն թողնելու հնարքի համար, մենք ավելացնելու ենք էկրանին գրառումներ տեղափոխելու և կոորդինատները իրական ժամանակում թարմացնելու հնարավորություն: Մի խուճապի մատնվեք. Դա ընդամենը մի քանի ծածկագիր է: Այս ամբողջ քրտնաջան աշխատանքն իր արդյունքը կտա: Ես խոստանում եմ!

Մենք երեկույթին հրավիրել ենք հատուկ հյուրի ՝ jQueryUI, և ամեն ինչ արել ենք քաշքշուկների համար: Նիշը տեղական քաշելու հնարավորության մեջ ավելացնելը տանում է միայն մեկ տող կոդ: Եթե ավելացնեք element.draggable (); ձեր հղիչի գործառույթին դուք կսկսեք լսել Survivor- ի «Eye of the Tiger» - ը, քանի որ այժմ կարող եք ձեր գրառումները քաշել շուրջը:

Մենք ուզում ենք իմանալ, թե երբ է քարշը դադարել և գրավել այն նոր կոորդինատները, որոնք պետք է անցնեն: jQueryUI- ը կառուցվել է որոշ շատ խելացի մարդկանց կողմից, այնպես որ, երբ քարշը դադարում է, պարզապես անհրաժեշտ է սահմանել կանգառի իրադարձության հետադարձ կապի գործառույթ: Մենք գրավում ենք այն նշում. id շրջանակի օբյեկտից և ձախից և վերևից CSS արժեքներից ՝ ui առարկա Այդ գիտելիքներով մենք անում ենք այն, ինչ անում ենք ամբողջ ընթացքում.

app.directive ('stickyNote', գործառույթ (վարդակից) {
var linker = գործառույթ (շրջանակ, տարր, ցուցիչ) {
element.draggable ({
կանգառ. գործառույթ (իրադարձություն, ui) {
socket.emit ('moveNote', {
id: range.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', գործառույթ (տվյալներ) {
// Թարմացնել, եթե նույն նշումը
եթե (data.id == range.note.id) {
տարր. կենդանի ({
ձախ: data.x,
վերև ՝ data.y
});
}
});
};
});

Այս պահին զարմանալի չէ, որ մենք նաև լսում ենք վարդակից ծառայությունից շարժման հետ կապված իրադարձություն: Այս դեպքում դա onNoteMoving- ը իրադարձություն, և եթե նշումը համապատասխանում է, ապա մենք թարմացնում ենք ձախ և վերևի CSS հատկությունները: Բա !մ Կատարած!

14. Բոնուս

Սա բոնուսային բաժին է, որը ես չէի ներառի, եթե միանգամայն վստահ չլինեի, որ դրան կարող եք հասնել 10 րոպեից էլ պակաս ժամանակահատվածում: Մենք պատրաստվում ենք տեղակայել կենդանի սերվեր (ես դեռ զարմանում եմ, թե որքան հեշտ է դա անել):

Նախ, դուք պետք է գնաք գրանցվեք Nodejitsu- ի անվճար դատավարությանը: Փորձարկումն անվճար է 30 օրվա ընթացքում, ինչը կատարյալ է ձեր ոտքերը թրջելու համար:

Ձեր հաշիվը ստեղծելուց հետո անհրաժեշտ է տեղադրել jitsu փաթեթը, որը կարող եք անել հրամանի տողից միջոցով $ npm տեղադրել jitsu -g.

Դրանից հետո անհրաժեշտ է մուտք գործել հրամանի տողից միջոցով $ jitsu մուտք և մուտքագրեք ձեր հավատարմագրերը:

Համոզվեք, որ ուղղակիորեն ձեր ծրագրում եք, մուտքագրեք $ jitsu տեղակայել և քայլեք հարցերի միջով: Ես սովորաբար թողնում եմ հնարավորինս շատ լռելյայն, ինչը նշանակում է, որ ես իմ ծրագրին տալիս եմ անուն, բայց ոչ ենթադոմեյն և այլն:

Եվ, իմ սիրելի ընկերներ, դրանում կա միայն այն: Ձեր դիմումի URL- ը կստանաք սերվերի ելքից, երբ այն տեղակայվի և պատրաստ լինի:

15. Եզրակացություն

Այս հոդվածում մենք լուսաբանեցինք շատ AngularJS հիմքեր, և հուսով եմ, որ այս ընթացքում շատ զվարճացաք: Կարծում եմ, որ իսկապես կոկիկ է այն, ինչը կարող եք իրականացնել AngularJS- ի և Socket.io- ի միջոցով `մոտավորապես 200 տող կոդով:

Մի քանի բան կար, որոնք ես չեմ լուսաբանել ՝ հիմնական կետերի վրա կենտրոնանալու համար, բայց ես խրախուսում եմ ձեզ ցած գցել աղբյուրը և խաղալ խաղի հետ: Մենք ամուր հիմք ենք կառուցել, բայց դեռ կան շատ առանձնահատկություններ, որոնք կարող եք ավելացնել: Ստացեք հակերություն:

Լուկաս Ռյուբելկեն տեխնոլոգիայի սիրահար է և համահեղինակ է AngularJS in Action for Manning հրատարակությունների: Նրա ամենասիրած բանը `մարդկանց ոգևորել նոր տեխնոլոգիայով, ինչպես ինքն է: Նա ղեկավարում է Phoenix Web Application User Group- ը և հանցագործությունների իր գործընկերների հետ հյուրընկալել է բազմաթիվ հաքաթոնների: